web-dev-qa-db-ja.com

ajaxを使って関数を実行する

function getSingleAmazonProduct($asin='')という関数があります。

Amazonの商品を返します。

$asinを入力するためのフォームフィールドがあります。

    <div id="asinform">
        <form id="productpreview" action="#">
        <input type="text" id="asin" name="asin" value="" placeholder="Enter ASIN"/>
        <input type="hidden" name="asin_form_post" value="1"/>              
        <input type="submit" value="Preview"/>
    </div>
    <div id="asinpreview">
    <!--  Preview goes here -->
    </div>

if ( isset($_POST['asin_form_post']) && $_POST['asin_form_post'] == '1') {
    $asin = $_POST['asin'];
    $preview = getSingleAmazonProduct($asin);
}

asinpreview div内に返されたデータを表示するためのajaxの使い方を教えてもらえますか？

pluginsplugin-developmentfunctionsajax
1
Giri
<div id="asinform">
        <form id="productpreview" action="#">
        <input type="text" id="asin" name="asin" value="" placeholder="Enter ASIN"/>
        <input type="hidden" name="asin_form_post" value="1"/>              
        <input type="submit" value="Preview"/>
</div>
    <div id="asinpreview">
    <!--  Preview goes here -->
    </div>
<script type="text/javascript">
if ( typeof jq == "undefined" )
    var jq = jQuery;

jq(document).ready( function() {
    jq("#productpreview").submit(function() {
        var asin =   jq("#asin").val();
        jq.post( ajaxurl, {
            action: 'Amazon_product_preview',
            'asin': asin
        },
        function(response) {
        jq('#asinpreview').html(response);
        });
        return false;
    } );
} );

</script>

function amazonajax() {
if ( isset($_POST['asin'])) {
    $asin = $_POST['asin'];
    $preview = getSingleAmazonProduct($asin);
    echo $preview;
    die();
    }
}
add_action('wp_ajax_Amazon_product_preview', 'amazonajax' );
add_action('wp_ajax_nopriv_Amazon_product_preview', 'amazonajax' );
0
Giri