在Wordpress中使用ajax提交表单

时间:2013-09-13 03:18:00

标签: php jquery ajax wordpress

我想在wordpress中获取ajax请求的结果,但是我在javascript的警告框中得到'0'的结果,所以表单看起来像这样:

<form class="form" id="ajax-contact-form" action="#">                            
        <input type="text" name="name" id="name"  placeholder="Name" required="">
        <button type="submit" class="btn">Submit</button>
</form>

javascript看起来像这样:

$('#ajax-contact-form').submit(function(e){

    $.ajax({ 
         data: {action: 'contact_form'},
         type: 'post',
         url: ajaxurl,
         success: function(data) {
              alert(data); // This prints '0', I want this to print whatever name the user inputs in the form. 

        }
    });

})

PHP:

add_action('wp_ajax_contact_form', 'contact_form');
add_action('wp_ajax_nopriv_contact_form', 'contact_form');

function contact_form()
{
echo $_POST['name'];    
}

有谁知道上面的代码是否正确,我也尝试过$ _REQUEST ['name']并且它不起作用。

非常感谢,

2 个答案:

答案 0 :(得分:8)

尝试这样的事情,你没有在PHP name函数中添加你期望的contact_form参数,所以你必须将它添加到jQuery ajax函数中的data属性中调用

$('#ajax-contact-form').submit(function(e){
    var name = $("#name").val();
    $.ajax({ 
         data: {action: 'contact_form', name:name},
         type: 'post',
         url: ajaxurl,
         success: function(data) {
              console.log(data); //should print out the name since you sent it along

        }
    });

});

答案 1 :(得分:0)

你也应该在你的javascript中为name添加一个属性。

可能看起来像这样........

$('#ajax-contact-form').submit(function(e){

$.ajax({ 
     data: {action: 'contact_form', name:name},
     type: 'post',
     url: ajaxurl,      
     success: function(data) {
          alert(data); 
    }
});

})