Question

我已经按照一些关于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);
        }

    });
}

很明显，我错了，但我看不出错误。我想我正在序列化数据并调用动作非常糟糕，但我不知道如何修复它。你可以看到我不是专家。提前谢谢。

Answer 1

我的目标是在不写所有键的情况下序列化许多输入值：值。我不知道这是不是一个好习惯，但经过多次这样的尝试后我已经修好了：

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);
        }
});

}

如果有更好的方法请分享，我是初学者，我并不是真的意识到潜在的问题。感谢。

Answer 2

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);

使用AJAX序列化数据并在Wordpress中调用操作

2 个答案: