前端AJAX调用无法使用wp_ajax、wp_enQueue_script和wp_Localize_script进行调用

时间:2012-01-29 作者:Danny

我想我几乎已经对ajax是Wordpress的业务有了头绪,彻底了解了它,但我现在完全被难住了。

首先是那些讨厌的东西!我的主插件文件中有以下内容:

wp_enqueue_script( \'function\', plugin_dir_url( __FILE__ ) . \'function.js\', array( \'jquery\', \'json2\' ) );
wp_localize_script( \'function\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

add_action(\'wp_ajax_nopriv_pfxconversion\', \'pfxconversion\');
这里是什么是函数。js公司

$(document).ready(function() {

    $("#convert").click(function () {
                var from = $("#from").val();
                var to = $("#to").val();
                var amount = $("#amount").val();

    //Make data string
     var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

         $.ajax({
           type: "POST",
           action: pfxconversion,
           url: MyAjax.ajaxurl,
           data: dataString,
           success: function(data){

           $(\'#result\').show();

            //Put received response into result div
            $(\'#result\').html(data);
           }
         });
    });
});
这是我知道的在Wordpress之外可以完美工作的函数。

function pfxconversion () {
//Get Posted data
$amount = $_POST[\'amount\'];
$from = $_POST[\'from\'];
$to = $_POST[\'to\'];

//make string to be put in API
$string = "1".$from."=?".$to;

//Call Google API
$google_url = "http://www.google.com/ig/calculator?hl=en&q=".$string;

//Get and Store API results into a variable
$result = file_get_contents($google_url);

//Explode result to convert into an array
$result = explode(\'"\', $result);

################################
# Right Hand Side
################################
$converted_amount = explode(\' \', $result[3]);
$conversion = $converted_amount[0];
$conversion = $conversion * $amount;
$conversion = round($conversion, 2);

//Get text for converted currency
$rhs_text = ucwords(str_replace($converted_amount[0],"",$result[3]));

//Make right hand side string
$rhs = $conversion.$rhs_text;

################################
# Left Hand Side
################################
$google_lhs = explode(\' \', $result[1]);
$from_amount = $google_lhs[0];

//Get text for converted from currency
$from_text = ucwords(str_replace($from_amount,"",$result[1]));

//Make left hand side string
$lhs = $amount." ".$from_text;

################################
# Make the result
################################

echo $lhs." = ".$rhs;exit;
}
问题是我没有从打印在#result div中的函数/ajax请求中获得结果

非常感谢您的帮助。

Edit 我现在在#result中得到了一个-1的值,在将我的js从$更改为jQuery之后-Firebug报告了一个错误($不是函数)。

Edit 2 我很确定我现在已经完成了操作,但我仍然在#结果-1中获得了输出:

jQuery(document).ready(function() {

    jQuery("#convert").click(function () {
                var from = jQuery("#from").val();
                var to = jQuery("#to").val();
                var amount = jQuery("#amount").val();

    //Make data string
     var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

         jQuery.ajax({
           type: "POST",
           url: MyAjax.ajaxurl,
           data: "action=pfxconversion"&dataString, 
           success: function(data){
           jQuery(\'#result\').show();

            //Put received response into result div
            jQuery(\'#result\').html(data);
           }
         });
    });
});

3 个回复
最合适的回答,由SO网友:Abdussamad 整理而成

查看生成的HTML源代码的顶部。您是否看到类似的情况:

<script type=\'text/javascript\'>
/* <![CDATA[ */
var MyAjax = {"ajaxurl":"http:\\/\\/localboast\\/home\\/wp2\\/wp-admin\\/admin-ajax.php"};
/* ]]> */
</script>
wp\\u localize\\u脚本现在将转义您传递给它的任何内容。所以我有个问题。

SO网友:Jared

在jQuery中,可以尝试以下操作:

jQuery( document ).ready( function() {

    jQuery( "#convert" ).click( function() {
        var from = jQuery( "#from" ).val();
        var to = jQuery( "#to" ).val();
        var amount = jQuery( "#amount" ).val();

        //Make data string
        var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

        jQuery.post( MyAjax.ajaxurl, {
            action: \'pfxconversion\',
            data: dataString
        }, function( data ) {

            if( data.response === \'success\' ) {

                // Success
                jQuery( \'#result\' ).show();

                //Put received response into result div
                jQuery( \'#result\' ).html( data.html );

            } else {

                // Failure

            }

        } );
    } );
} );
此AJAX调用向其发送数据并从中接收数据的PHP函数应发回JSON encoded array 我还添加了一个名为“success”和“failure”的变量response, 为了提高准确性,最好将此消息与AJAX调用一起发送回来。

发送回AJAX的JSON编码数组应该如下所示:

$response = json_encode( array( \'response\' => \'success\', \'html\' => \'some value\' ) );
echo $response;
exit; // This is needed to send back properly

Edit

根据您的示例,您应该更改此行:

echo $lhs." = ".$rhs;exit;
大概是

echo json_encode( array( \'html\' => $lhs." = ".$rhs, \'response\' => \'success\' ) ); exit;
然后你可以用data.html 在AJAX函数中。

Edit 2

另一方面,您需要在wp_enqueue_scripts 如下图所示挂钩。您可以删除这些代码,然后像这样将它们重新放在插件中(还更改了要使用的文件的位置plugins_url()):

function enqueue_some_scripts() {

    wp_enqueue_script( \'json2\' );
    wp_enqueue_script( \'jquery\' ); // If not loaded in your theme already, wouldn\'t hurt here though I don\'t think!

    wp_enqueue_script( \'function\', plugins_url( \'function.js\', __FILE__ ), array( \'jquery\', \'json2\' ) );
    wp_localize_script( \'function\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

}

add_action( \'wp_ajax_nopriv_pfxconversion\', \'pfxconversion\' );
add_action( \'wp_enqueue_scripts\', \'enqueue_some_scripts\' );

SO网友:Tim Jacobs

这是一个非常晚的答案,但在WP中,您需要die() 在php AJAX函数的末尾。如果你没死,你会得到的0 回答查看wp-admin/admin-ajax。php文件。

结束

相关推荐

AJAX在未登录时停止工作?

自动完成字段已工作数月,但未登录时已停止工作?不确定何时但在最近几天或几周内(wordpress最近未更新)。已经拥有;add\\u action(\'wp\\u ajax\\u filter\\u schools\',\'filter\\u schools\');add\\u action(\'wp\\u ajax\\u nopriv\\u filter\\u schools\',\'filter\\u schools\');在函数中。php,任何地方都没有错误。未登录时得到的响应为来自safari*请