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

更新：

我在上面使用了错误的操作和错误的名称。该表单现在可以使用，但是我仍然不明白如何在不刷新页面的情况下显示提交结果...

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;
}