如何在jQuery AJAX中显示成功插入的新数据?

时间:2019-02-21 作者:Rollor

我使用jQuery Ajax form post将消息写入db表,如下所示:

functions.php

add_action(\'wp_ajax_send_projectmessage\', \'send_projectmessage\');
function send_projectmessage() {
    global $wpdb;
    $wpdb->insert( //insert stuff to db table));

    wp_send_json_success();    
}

JS:

$(\'#form-pm\').on(\'submit\',function(e) {

        var mydata = { 
            \'action\': \'send_projectmessage\',
            \'projectid\': projectid,  
            \'message\': message
        };

        var ajaxRequest =
        $.ajax({
            url: admin_ajax.ajax_url,
            type: \'post\',
            data: mydata
        });

        ajaxRequest.done(function(data) { console.log(data); });
        ajaxRequest.fail(function(jqXHR) { alert(jqXHR); });

        e.preventDefault();
});
一切正常,数据被插入到我的数据库表中。

现在,这是我显示消息的方式:

<div id="messages">
    <?php
    $messages = load_projectmessages($projectid);

    foreach ($messages as $message) {
    //make a <table><tr><td> with $message->themessage
    }
    ?>
</div>

<form id="form-pm>
    <!-- input fields and submit here -->
</form>
load_projectmessages 在同一个functions.php:

function load_projectmessages($projectid) {
    global $wpdb;
    $sql_displaymessages = $wpdb->prepare("sql stuff", $projectid );
    $projectmessages = $wpdb->get_results($sql_displaymessages);
    return $projectmessages;
    wp_die();
}
我的问题是,where/when 我要打电话吗load_projectmessages? 我是否应该修改整个JS ajax代码来同时显示新数据?

2 个回复
最合适的回答,由SO网友:Qaisar Feroz 整理而成

按如下方式修改代码:

add_action(\'wp_ajax_send_projectmessage\', \'send_projectmessage\');
function send_projectmessage() {
    global $wpdb;
    $wpdb->insert( //insert stuff to db table));

    // Call your function to retrieve your data and send it to browser
    $messages = load_projectmessages($projectid);

    wp_send_json_success($messages);    
}
通过修改此项通过JS显示数据

ajaxRequest.done(function(data) { console.log(data); });
到这个

ajaxRequest.done(function(data) { 
    // Put markup for retrieved data here
    // for example 

    var o = "<table><tr><td>Project ID</td><td>Message</td></tr>";

    for (i=0; i<=data.length; i++){
        o .=  "<tr><td>"+data.projectid+"</td><td>"+data.message"+</td></tr>";
    }

    o .=   "</table>";

    $(#messages).html(o); 

 });
另外,请确保函数返回的是数组而不是对象,因此请按如下方式修改它:

function load_projectmessages($projectid) {
    global $wpdb;
    $sql_displaymessages = $wpdb->prepare("sql stuff", $projectid );

    // Add ARRAY_A to get result in an associative array
    $projectmessages = $wpdb->get_results($sql_displaymessages, ARRAY_A);
    return $projectmessages;

    // Not needed
    // wp_die();
}
我希望这会有所帮助。

SO网友:Antti Koskinen

您可以使用wp_send_json_success 将消息发送回jQuery。函数接受$data 基本上可以是任何内容的参数—纯文本字符串、html、数组。

因此,您可以在ajax插入函数中使用消息函数,并让它每次都将所有消息发送回jQuery。或者让insert只回复与该特定insert相关的(成功)消息。

您还可以向insert函数添加某种错误处理,并让它这样做wp_send_json_error 如果插入过程中有东西向南移动。

相关推荐

在AJAX调用循环中返回自定义产品

从事Wordpress/Woocommerce架构的工作,我是Woocommerce的新手,在我从事django和laravel框架之前,该项目是一个插件wp,其中一个小表单适合选择标签,以便按sku返回一些产品。我可以获取产品对象,但我不能覆盖ajax响应返回的wp\\U查询,同时也不能用自定义数据覆盖归档循环模板并显示最终结果。这是我的班级: if(!defined(\'EXCELREADER_ASSETS_URL\')) define(\'EXCELREADER_AS