使用Jquery的ajax无法在wordpress中工作

时间:2013-06-23 08:40:11

标签: php jquery ajax wordpress

我正在为wordpress编写一个插件,我在其中使用jquery进行AJAX。

以下代码不起作用。当我输入输入框时,我希望在结果div中显示内容。

这是我用于ajax请求的代码。它位于我的主题标题文件中。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


<script type="text/javascript" >
$(document).ready(function(){
//alert("sjsjs");

    $("#se").keypress(function(e){
       // e.preventDefault();
        var search_val=$("#se").val(); 
        $.ajax({
            type:"POST",
            url: "./wp-admin/admin-ajax.php",
            data: {
                action:'wpay_search', 
                search_string:search_val
            },
            success:function(data){
                $('#results').append(response);
            }
    });   
});
});
</script>

模板文件中的html内容

<form name="nn" action="" method="post"></br></br>
            <input id ="se" type="text" name="test" width="20" />
            <input type="submit" id="clicksubmit" value="Submit" />

        </form>
        <div id="results">val is: 


        </div>

以下是插件文件中的代码

function wpay_search() {
    //global $wpdb; // this is how you get access to the database

    $whatever = $_POST['search_val'];

    $whatever += 10;

        echo $whatever;

    die(); // this is required to return a proper result
}

add_action('wp_ajax_wpay_search', 'wpay_search');
add_action('wp_ajax_nopriv_wpay_search', 'wpay_search');

我是wordpress插件编写的新手。任何人都可以告诉我哪里做错了吗?

1 个答案:

答案 0 :(得分:2)

有一件事显然是我跳出来的......

        success:function(data){
            $('#results').append(response);
        }

应该......

        success:function(data){
            $('#results').append(data);
        }

因为你没有名为response的变量,所以你将函数data作为变量传递,所以你必须使用它。

此外,您正在传递search_string作为参数,当您在php文件中,$_POST正在寻找search_val

因此,您需要发送search_val作为参数,并在JavaScript中为您的JavaScript search_val变量提供另一个变量名称,以减少混淆。在这种情况下,我将其设为search

                action:'wpay_search', 
                search_val:search

总的来说它应该看起来像这样...

$("#se").keypress(function(e){
   e.preventDefault();
    var search=$("#se").val(); 
    $.ajax({
        type:"POST",
        url: "./wp-admin/admin-ajax.php",
        data: {
            action:'wpay_search', 
            search_val:search
        },
        success:function(data){
            $('#results').append(data);
        }
    });   
  });