使用AJAX请求插件开发的POST表单

时间:2021-09-19 作者:upss1988

尝试在前端创建一个带有AJAX调用的表单,用户可以在其中提交帖子。

有一个文本字段、一个文本区域和一个文件字段。

以下是表格:

public function pp_html_template() {
    if ( is_user_logged_in() ) {
        return \'<h2>\' . __( \'Publish your post\', \'post-publisher\' ) . \'</h2>
        <form id="pp-form-submit" class="pp-form-submit" enctype="multipart/form-data">\' .
       wp_nonce_field( \'pp_publisher_save\', \'pp_publisher_name\' )
       . \'<div class="pp-row">
                <label for="pp_title">\' . esc_attr__( \'Title\', \'post-publisher\' ) . \'</label>
                <input type="text" id="pp_title" name="pp_title">
            </div>

            <div class="pp-row">
                <label for="pp_content">\' . esc_attr__( \'Content\', \'post-publisher\' ) . \'</label>
                <textarea name="pp_content" id="pp_content" name="pp_content" cols="30" rows="10"></textarea>
            </div>
            
            <div class="pp-row">
                <label for="pp_featured_image">\' . esc_attr__( \'Featured Image\', \'post-publisher\' ) . \'</label>
                <input type="file" id="pp_featured_image" name="pp_featured_image">
            </div>
            <input type="hidden" name="action" value="pp_html_process"/>
            <div class="pp-row">
                <input type="submit" name="pp_submit" id="pp_submit">
            </div>
        </form>\';
    }
}
以下是处理过程:

public function pp_html_process() {

    // Process the form
    if ( isset( $_POST[\'pp_submit\'] ) ) {
        if ( ! isset( $_POST[\'pp_publisher_name\'] ) || ! wp_verify_nonce( $_POST[\'pp_publisher_name\'], \'pp_publisher_save\' ) ) {
            esc_attr__( \'Sorry, this action is not allowed.\', \'post-publisher\' );
            exit;
        } else {
            global $current_user;

            $user_login   = $current_user->user_login;
            $user_id      = $current_user->ID;
            $post_title   = sanitize_text_field( $_POST[\'pp_title\'] );
            $post_content = sanitize_textarea_field( $_POST[\'pp_content\'] );

            $new_post = array(
                \'post_title\'   => $post_title,
                \'post_content\' => $post_content,
                \'post_type\'    => \'post\',
                \'post_status\'  => \'draft\',
                \'post_name\'    => str_replace( \' \', \'-\', $post_title ),
            );

            $post_id = wp_insert_post( $new_post, true );

            if ( ! function_exists( \'wp_generate_attachment_metadata\' ) ) {
                require_once( ABSPATH . "wp-admin" . \'/includes/image.php\' );
                require_once( ABSPATH . "wp-admin" . \'/includes/file.php\' );
                require_once( ABSPATH . "wp-admin" . \'/includes/media.php\' );
            }


            $featured_image = media_handle_upload( \'pp_featured_image\', $post_id );
            if ( $featured_image > 0 ) {
                update_post_meta( $post_id, \'_thumbnail_id\', $featured_image );
            }
        }
    }
}
以及__construct()

public function __construct() {
    if ( ! is_admin() ) {
        add_shortcode( \'pp_html_template\', array( $this, \'pp_html_template\' ) );
        add_action( \'init\', array( $this, \'pp_html_process\' ) );
    }

    add_action( \'wp_ajax_pp_html_process\', array( $this, \'pp_html_process\' ) );
    add_action( \'wp_ajax_nopriv_pp_html_process\', array( $this, \'pp_html_process\' ) );
}
jQuery:

jQuery(document).ready(function ($) {
    $(\'#pp-form-submit\').submit(ajaxSubmit);

    function ajaxSubmit() {
        var newCustomerForm = $(this).serialize();

        jQuery.ajax({
            type: "POST",
            url: "/codeable/wp-admin/admin-ajax.php",
            data: $("#pp-form-submit").serialize(),
            success: function (response) {
                console.log(response);
            }
        });
        return false;
    }
});
控制台中没有任何错误。没有AJAX的Post工作得非常好,但有了AJAX,它将返回0。

任何建议都会很有帮助。

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

没有AJAX的Post工作得非常好,但有了AJAX,它将返回0。

简单地说,这是因为您的AJAX请求不包括pp_submit 所需的输入pp_html_process() — 常规和AJAX表单提交的回调。

一、 e.正如我在评论中所说:

jQuery不会序列化提交按钮值(请参阅here), 这意味着pp_submit 输入从未提交到服务器,因此if ( isset( $_POST[\'pp_submit\'] ) ) 返回false。所以您只需要手动包括pp_submit在AJAX表单数据中。但是,您的表单包含一个文件输入,因此,您应该改为use the FormData API而不是jQuery的.serialize().

例如,我会这样做:

function ajaxSubmit() {
    var formData = new FormData( this );

    // Yes, even when using FormData, you still need to manually include the pp_submit.
    formData.append( \'pp_submit\', 1 );

    jQuery.ajax({
        type: \'POST\',
        url: \'/codeable/wp-admin/admin-ajax.php\',
        data: formData,
        processData: false,
        contentType: false,
        success: function ( response ) {
            console.log( \'success\', response );
        },
        error: function ( response ) {
            console.log( \'error!\', response );
        }
    });

    return false;
}
我已经用您的PHP/HTML代码测试了这一点,这意味着我只需替换上面的JS函数,然后一切都正常了-帖子创建成功,帖子缩略图也设置正确。然而,我补充道wp_die() 防止0 在回应中。(见下文第一条注释)

其他注意事项,请致电wp_die() 设置帖子缩略图后,要退出页面并防止WordPress回显0:

// set the post thumbnail:
// if ( $featured_image > 0 ) { ... your code here }

// then call wp_die():
if ( wp_doing_ajax() ) {
    echo \'Post created! ID: \' . $post_id;
    wp_die();
}
附言:我会用set_post_thumbnail() 函数设置帖子缩略图。

我用过url: \'/codeable/wp-admin/admin-ajax.php\' 因为这是你用过的,但你真的应该localize your AJAX/JS parameters 例如,使用url: my_ajax_obj.ajax_url 而不是硬编码admin-ajax.php 进入的URL/路径url 所有物

strongly 建议您使用现代WordPress REST API,该API:

具有更好的错误处理能力,例如admin-ajax.php 端点,如果您的AJAX操作没有正确注册,您只需400 Bad Request 状态为0 回答但是使用REST API,如果没有正确注册路由,您将看到一个人类可读的错误来解释发生了什么。

  • 有现有端点,可以简单地用于创建帖子、媒体(附件帖子)、术语等。

    允许您create your own custom endpoint 带“a”;“漂亮”;URL(当然,如果在站点上启用了永久链接),如https://example.com/wp-json/your-plugin/v1/pp-html-process 您还可以轻松地将端点设置为公共端点或仅对某些用户/角色可用。

    接受许多请求格式,包括JSON负载(不受admin-ajax.php) 响应主体/头也默认为JSON。

  • 。。。以及手册中提供的许多其他功能here.