尝试在前端创建一个带有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。
任何建议都会很有帮助。
最合适的回答,由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.