无对象属性通过AJAX发送表单

时间:2016-07-26 作者:middlelady

我正在使用带有+表单的使用模式窗口来更改个人资料头像。如下所示(functions.php):

add_action(\'change_avatar\', \'edit_avatar_function\');
function edit_avatar_function($uid, $pid) { 
    $av = get_user_meta($uid, \'avatar_\' . \'project\', true);
    $avatar = wp_get_attachment_image_src( $av, \'thumb300\' );
    ?>
<div id="avatar-modal" class="modal fade" role="dialog">
    <div class="modal-dialog browse-panel">
        <div class="box_title">
          <?php _e(\'Edit your Avatar\', \'KleeiaDev\') ?>
        </div>
        <div class="box_content top-15 text-center" id="my-media">
            <form id="change-avatar" action="#" method="post" enctype="multipart/form-data">
                <p class="top-20">
                    <input id="input-avatar" data-buttonText="<?php _e(\'Upload an image (300x300px)\',\'KleeiaDev\'); ?>" type="file" name="avatar" style="display:inline-block!important" class="filestyle avatar" data-icon="false" data-input="false"/>
                    <input id="pid" type="hidden" name="pid" value="<?php echo $pid ?>"/>
                    <input id="uid" type="hidden" name="uid" value="<?php echo $uid ?>"/>
                </p>
            </form>
            <p class="top-20">
                <button id="upload-avatar" type="button" class="submit_light full_width"><?php _e(\'Update Cover image\',\'KleeiaDev\') ?></button>
            </p>
        </div>
   </div>
</div>
我称之为模态<?php do_action(\'change_avatar\', $myuid ); ?> 在我的页面中,我通过AJAX发送信息,将操作排队,如下所示(functions.php)

add_action(\'wp_ajax_update_avatar_function\', \'update_avatar_function\', 10, 2 );
function update_avatar_function(){
    $pid = $_POST[\'pid\'];
    $uid = $_POST[\'uid\'];
    $avatar = $_POST[\'avatar\'];

    //perform update user meta and other stuff

    //send me back uid and pid to check if they\'re correct
    $response = array(\'uid\'=>$uid,\'pid\'=>$pid);
    echo json_encode($response);
    die();
}

add_action( \'wp_enqueue_scripts\', \'add_frontend_ajax_javascript_file\', 10, 2 );
function add_frontend_ajax_javascript_file()
{
   wp_localize_script( \'ajax-script\', \'ajaxobject\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );
}
最新我使用jQuery/AJAX:

var updatebuttonav = $(\'#upload-avatar\');
updatebuttonav.on(\'click\', function() {
    event.preventDefault();
    update_avatar();
});
function update_avatar()
{
    var form_data = new FormData($(\'form#change-avatar\')[0]);
    form_data.append(\'pid\', $(\'#pid\').val()), //no sending value
    form_data.append(\'uid\', $(\'#uid\').val()), //no sending value
    form_data.append(\'avatar\', $(\'#input-avatar\')[0].files[0]), //no sending file
    form_data.append(\'action\', \'update_avatar_function\'),
    console.log(form_data); //here is printing No Properties
    jQuery.ajax({
        method: \'post\',
        url : ajaxurl,
        dataType: \'json\',
        data: form_data,
        processData: false,
        beforeSend:function(data){
            //other functions
        },
        success:function(data) {
            alert(data.uid + data.pid);  
        },
        error: function(data){
            console.log(data);
        }
    });
    //alert("a");
}
好吧,我在我的console.log 那个No Object Properties 并发送值。此外json response is Nan. 我在我的网站的其他部分使用这种方法,我不明白为什么在这里它不起作用。有没有可能通过do_action 是否看不到表单?我错过什么了吗?任何建议都将不胜感激!

注意:我没有使用wp_ajax_nopriv 因为用户在登录时我当然需要它。

2 个回复
最合适的回答,由SO网友:czerspalace 整理而成

您可以尝试使用new FormData() 而不是new FormData($(\'form#change-avatar\')[0]). 此外,之后processData:false 您应该添加contentType: false 因为jQuery将设置它incorrectly otherwise, 对于url,而不是ajaxurl 您应该使用ajaxobject.ajaxurl, 自使用wp_localize_script, 第二个参数是javascript对象名

SO网友:scott

首先,我要确保update_avatar() 函数可以读取表单数据。也许函数需要接受一个对象?就像形式甚至事件。。。

其次,我认为您需要在数据中指定一个“操作”。这是处理所发送数据的ajax函数的名称。换句话说,ajax调用的目标。在您的情况下,它将是:

action: \'update_avatar_function\'

看见the Codex 了解更多信息。

(您可以对示例数据进行硬编码,以确保ajax正常工作,然后发送表单数据。)