WordPress的前端Ajax

Question

我目前正在开发一个呈现它自己的页面的插件，以便管理员在管理面板之外提交表单。我想创建即时更新表单提交，就像你在WordPress的管理面板中看到的那样。

我看过一百万教程，我只是不能似乎身边让我的头，我希望有人能花时间向我解释，用这个例子：

我想一个表单添加一个联系人。 表格要求提供“联系人姓名”，“联系人类型”，“联系电话号码”以及“作业ID”的隐藏字段。我想加载已经在数据库中的所有联系人以完成这项工作，并且希望在添加新联系人时刷新它。

在先进的感谢，我真的需要一些帮助！

JS：

jQuery(document).on("click", "#submitcontact", function(e){ 

    e.preventDefault(); 
    jQuery.ajax({ 
     url: MyAjax.ajaxurl, 
     type: "POST", 
     data: { 
      action: "tm_add_contact", 
      contactname: jQuery("#contactname").val(), 
      contacttype: jQuery("#contacttype").val(), 
      contact: jQuery("#contact").val(), 
      jobnumber: jQuery("#jobnumber").val() 
     }, 
     success: function(data){ 
      alert("success " + data); 
     }, 
     error: function(e){ 
      alert("error " + e); 
     } 
    }); 

}); 

形式：

<button type="button" class="btn btn-success pull-right" data-toggle="popover" title="Add Contact" data-placement="left" data-html='true' data-content=' 
          <form> 
           <div class="form-group"> 
           <label for="contactname">Name</label> 
           <input type="text" class="form-control" id="contactname" name="contactname" placeholder="Jane Doe"> 
           </div> 
           <div class="form-group"> 
           <label for="contacttype">Type</label> 
           <select class="form-control" id="contacttype" name="contacttype"> 
            <option>Landline</option> 
            <option>Mobile</option> 
            <option>Buisness</option> 
            <option>Email</option> 
            <option>Fax</option> 
           </select> 
           </div> 
           <div class="form-group"> 
           <label for="contact">Contact</label> 
           <input type="text" class="form-control" id="contact" name=contact placeholder=""> 
           <input type="hidden" id="jobnumber" name="jobnumber" value="<?php echo $job->JobNumber ?>"> 
           </div> 
           <button type="button" id="submitcontact" name="submitcontact" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button> 
          </form> 
           '><i class="fa fa-plus" aria-hidden="true"></i> Add Contact</button> 

功能：

function tm_add_contact(){ 

$contactname = $_POST['contactname']; 
$contacttype = $_POST['contacttype']; 
$contact = $_POST['contact']; 
$jobnumber = $_POST['jobnumber']; 
$date = current_time('mysql'); 
global $wpdb; 
$table_name = $wpdb->prefix . 'trademanager_job_contacts'; 
$wpdb->insert(
    $table_name, 
    array(
     'JobNumber' => $jobnumber, 
     'ContactName' => $contactname, 
     'Type' => $contacttype, 
     'Contact' => $contact, 
     'DateAdded' => $date 
    ), 
    array(
     '%s' 
    ) 
); 

echo "HELLO WORLD!!!"; 

die(); 
return true; 
} 
// 
add_action('tm_ajax', 'tm_add_contact'); // Call when user logged in 
add_action('tm_ajax', 'tm_add_contact'); // Call when user in not logged in 

UPDATE：

我用上面的错误行为和不正确的名称。现在的形式工作，但我仍然不明白如何显示提交结果没有刷新页面...

Answer 1

尝试使用ajaxForm jquery插件。 http://malsup.com/jquery/form/#ajaxForm

然后使用回调：

function showResponse(response){ 
     jQuery('.datalist > tbody').prepend(response); 
} 

注意：格式化因此使用表中的后端的响应。成功提交后，您甚至可以清除表格。

或者不给ajaxForm插件：

jQuery('form').on('submit', function(event){ 
    event.preventDefault(); 
    var data = $(this).serialize(); 
    var form = $(this); 
    // than use $.ajax 

    $.post(url,data,function(response){    
     jQuery('.your_table > tbody').append(response); 
     //using previously defined form variable, because this is now post object 
     form[0].reset(); 

    }); 
    // or use: return false 
}); 

对于数据库结果使用

$db_contacts = $wpdb->get_results('SELECT * FROM your_table ORDER BY id'); 

然后：

foreach($db_contacts as $contact){ 
    echo $contact->contactname; 
}