我学习了一些关于Wordpress如何与Ajax交互的教程，并尝试为我的用户构建一个前端表单。从我的 html 开始：
<form id="myform" action="" method="post" enctype="multipart/form-data">
<div id="apf-response" style="background-color:#E6E6FA"></div>
<input type="text" name="title" id="title" value="titlevalue">
<input type="text" name="description" id="description" value="descvalue">
//other inputs
<input type="submit" class="submit" value="Publish"/>
</form>
我已经注册并本地化了我的脚本
function apf_enqueuescripts()
{
wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));
wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', apf_enqueuescripts);
我创建了wp_ajax_priv和wp_ajax_nopriv函数，例如：
function apf_addpost() {
get_currentuserinfo();
$uid = $current_user->ID;
$results = '';
$project_title = $_POST['title'];
$project_description = $_POST['description'];
$pid = wp_insert_post( array(
'post_title' => $project_title,
'post_content' => $project_description,
'post_status' => 'publish',
'post_author' => $uid,
'post_type' => 'project',
) );
if ( $pid != 0 )
{
$results = '*Post Added';
}
else {
$results = '*Error occurred while adding the post';
}
// Return the String
die($results);
}
add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );
add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );
我已经编写了这个非常简单的 ajax 函数，它不起作用：
$(document).ready(function(){
msform_init(); //validation function which I'm not showing but it's working
$('#myform').submit(function(event){
event.preventDefault();
apfaddpost(); // which is my below ajax function
})
})
function apfaddpost() {
jQuery.ajax({
type: 'POST',
url: apfajax.ajaxurl,
action: 'apf_addpost', //where I should send data and trigger the php
data: $('#myform').serialize(),
success: function(data, textStatus, XMLHttpRequest) {
var id = '#apf-response';
jQuery(id).html('');
jQuery(id).append(data);
resetvalues();
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
很明显我错了，但我看不到错误。我想我正在序列化数据并非常糟糕地调用该操作，但我不知道如何解决它。正如你所看到的，我不是专家。提前谢谢。
我的目标是序列化许多输入值，而无需写入所有键：值。我不知道这是否是一种好的做法，但经过多次尝试后我已经修复了：
function apfaddpost() {
var formData = $('#msform').serialize(); //serialized
jQuery.ajax({
type: 'POST',
url: apfajax.ajaxurl,
data: formData + '&action=apf_addpost', //this was the problem
success: function(data, textStatus, XMLHttpRequest) {
var id = '#apf-response';
jQuery(id).html('');
jQuery(id).append(data);
resetvalues();
},
error: function(MLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
}
如果有更好的方法，请分享它们，我是初学者，我并不真正意识到潜在的问题。谢谢。
wordpress做事的方式有时会令人困惑。
尝试按以下方式编写 JavaScript：
(function($){
# assuming you have a lot of code before this line.
msform_init();
$('#myform').submit(function(event){
event.preventDefault();
apfaddpost(); // which is my below ajax function
});
function apfaddpost() {
$.post(apfajax.ajaxurl, {
action: 'apf_addpost', //where I should send data and trigger the php
title: $('#title').val(),
description: $('#description').val()
}, function(response) {
var id = '#apf-response';
$(id).html('');
$(id).append(response);
resetvalues();
});
}
})(jQuery);