Wordpress 如何使用 Ajax 显示从成功的 insert_post() 返回的新数据?

Posted

技术标签:

【中文标题】Wordpress 如何使用 Ajax 显示从成功的 insert_post() 返回的新数据?【英文标题】:Wordpress how to use Ajax to show new data returned from successful insert_post()? 【发布时间】:2022-01-05 05:54:48 【问题描述】:

Ajax 成功插入一个条目后,我想查看该条目的 ID 和 url 是什么,并在不刷新页面的情况下将其显示在模式窗口中

有什么方法可以从成功中获取此数据:函数(响应)?这是我必须使用 ajax 制作一个新条目的代码,效果很好:

  <script>
        
        $("#enquiry_email_form").on("submit", function (event) 
            event.preventDefault();
 
            var form= $(this);
            var ajaxurl = form.data("url");
            var detail_info = 
                post_title: form.find("#post_title").val(),
                post_description: form.find("#post_description").val()
            
 
            if(detail_info.post_title === "" || detail_info.post_description === "") 
                alert("Fields cannot be blank");
                return;
            
 
            $.ajax(
 
                url: ajaxurl,
                type: 'POST',
                data: 
                    post_details : detail_info,
                    action: 'save_post_details_form' // this is going to be used inside wordpress functions.php// *esto se utilizará dentro de las functions.php*
                ,
                error: function(error) 
                    alert("Insert Failed" + error);
                ,
      success: function(response) 
                modal.style.display = "block";  * abre la ventana modal*

                body.style.position = "static";
                body.style.height = "100%";
                body.style.overflow = "hidden";
                     
                     
                
            );
        )
    </script>
<button id="btnModal">Abrir modal</button> 
<div id="tvesModal" class="modalContainer">
 <div class="modal-content">
 <span class="close">×</span> <h2>Modal</h2> * Ventana modal mostrar le url y ID generado *
 <p><?php ***echo $title_post, $url, $ID*** ?></p> 
 
 </div>
 </div> 

归档functions.php

 function save_enquiry_form_action() 
     
        $post_title = $_POST['post_details']['post_title'];
        $post_description = $_POST['post_details']['post_description'];
        $args = [
            'post_title'=> $post_title,
            'post_content'=>$post_description,
            'post_status'=> 'publish',
            'post_type'=> 'post',
            'show_in_rest' => true,
            'post_date'=> get_the_date()
        ];
     
        $is_post_inserted = wp_insert_post($args);
     
        if($is_post_inserted) 
            return "success";
         else 
            return "failed";
        
    

【问题讨论】:

所以研究如何获取最后插入的行,然后您可以从该行返回您需要的 json,而不仅仅是您当前返回的简单字符串 如果插入最后一行很容易,但我如何将它传递给 JSON?你有什么例子吗? 您可以在要返回的对象或数组上使用json_encode() 【参考方案1】:

当您使用wp_insert_postDocs 函数时,它会返回帖子ID。

成功时返回帖子 ID。失败时值为 0 或 WP_Error。


首先,您可以启动一个空数组并调用它,比如$response,然后根据wp_insert_post 函数的返回值填充它。

然后,我们也可以使用 id 来获取永久链接,使用 get_permalinkDocs

最后,我们可以使用wp_send_json_successDocs 函数将该数组发送回客户端。

所以您在php 端的代码将是这样的:

function save_enquiry_form_action() 

    $response = array(
    'error'             => '',
    'success'           => '',
    'post_id'           => '',
    'post_url'          => '',
  );
     
    $post_title       = sanitize_text_field($_POST['post_details']['post_title']);
    // Note we could have used 'sanitize_title()' function too!

    $post_description = sanitize_textarea_field($_POST['post_details']['post_description']);

    $args = array(
            'post_title'   => $post_title,
            'post_content' => $post_description,
            'post_status'  => 'publish',
            'post_type'    => 'post',
            'show_in_rest' => true,
            'post_date'    => get_the_date()
    );

    $post_id = wp_insert_post($args);

    if($post_id)
        $response['success']       = true;
        $response['error']         = false;
        $response['id']            = $post_id;
        $response['post_url']      = get_permalink($post_id);
    else
        $response['success']       = false;
        $response['error']         = true;
    

    wp_send_json_success($response);

    exit;


注意:

我使用sanitize_text_fieldDocs 函数清理$_POST['post_details']['post_title'] 值和sanitize_textarea_fieldDocs 函数清理$_POST['post_details']['post_description'] 值。 当您在客户端收到响应时,您可以检查 $response['success']$response['error'] 值。

在 javascript 方面

正如您在以下屏幕截图中所见,数据返回为data object。要访问数据,您可以使用 response.data.successresponse.data.errorresponse.data.idresponse.data.post_url

【讨论】:

感谢您的回答,有没有办法显示wp_send_json_success($ response)的查询;在 html 中?我正在尝试这样但没有成功:code . $.ajax( type: 'POST', url: '&lt;?php echo admin_url('admin-ajax.php');?&gt;', dataType: "json", // add data type data: action : 'save_enquiry_form_action' , success: function( response ) $.each( response, function( key, value ) console.log( key, value ); // that's the posts data. $('#result_msg').html(key, value); ); ); code 刚刚更新了我的答案。您可以像这样访问数据:response.data.successresponse.data.errorresponse.data.idresponse.data.post_url

以上是关于Wordpress 如何使用 Ajax 显示从成功的 insert_post() 返回的新数据?的主要内容,如果未能解决你的问题,请参考以下文章

Wordpress 插件类和 Ajax

将变量从 PHP 传递到 AJAX 成功函数

如何在 WordPress 简码中使用 AJAX?

WordPress 中的 AJAX 只返回 0

使用纯 Javascript 通过 AJAX 发送 WordPress 对象

Wordpress:如何使用 ajax 调用来调用插件函数?