我通过jQuery.ajax()发送formData,但是处理所有这些的PHP函数无法正确检索和识别正在发送的数据。我经历了很多关于stackoverflow的问题,也尝试了许多不同的方式,但都无济于事,最终放弃了。
这一切都是在WORDPRESS中完成的。
我不能使用序列化,因为我也在发送文件,但为了简单起见,我将它们省略在下面。
这是表单的简化版本:
<form id="newForm" method="post" enctype='multipart/form-data'>
<div>
<label>Title</label>
<input name="title" type="text" value=""/>
</div>
<div>
<label>Content</label>
<input name="content" type="text" value=""/>
</div>
<button type="submit" id="submit_button">SUBMIT</button>
</form>
这是jQuery:
jQuery(document).ready(function(){
$('#newForm').submit(function(e){
e.preventDefault();
var new_data = new FormData($(this)[0]);
$.ajax({
url:ajaxurl,
type: "POST",
data: {
'action': 'upload_function',
new_data //I've tried new_data: new_data
},
cache:false,
processData:false,
dataType: 'json', //tried not sending it as json dataType, still didn't work
success:function(response){
console.log(response);
if(response.success == 1){
alert("Post inserted");
}else{
alert("Post not inserted");
}
},
error:function(){
alert("Ajax request hasn't passed");
}
});
});
});
这是处理帖子插入的 PHP(它被正确调用,我已经通过在帖子标题和内容中插入静态值进行了检查),为了简单起见,我省略了随机数和其他东西:
function upload_function(){
$json_result=array();
$json_input=$_POST['new_data'];
$post_vars=json_decode($json_input,true);
$submit_post_data = array (
'post_title' => $post_vars['title'],
'post_content' => $post_vars['content'],
'post_status' => 'draft'
);
$post_id = wp_insert_post($submit_post_data);
if($post_id){
$json_result['success']=1;
}else{
$json_result['success']=0;
}
wp_send_json($json_result);
exit();
}
add_action('wp_ajax_upload_function','upload_function');
您需要
序列化表单数据,然后将其传递给PHP代码。对你的var new_data
作业执行此操作。
var new_data = $(this).serialize()
编辑 1:正如您所说,您有文件,您需要使用 FormData 对象将文件传递到 ajax 中的服务器。 请参阅下面的代码。
var $element = $(this);
var formdata = new FormData();
var totalFiles = $element.files.length;
if (totalFiles > 0) {
for (var i = 0; i < totalFiles; i++) {
var file = $element.files[i];
formdata.append("FileUpload", file);
}
$.ajax({
type: "POST",
url: Url,
data: formdata,
contentType: false,
processData: false,
success: function (result) {
// make the server return a array of file names that has been saved.
//Post your other form elements data a this point with the filename array.
},
error: function (error) {
console.log("File Upload Failure");
}
});
}