通过AJAX在前端编辑用户元数据

时间:2018-01-22 作者:Aus-tn

Code below has been updated to reflect answer, and is now a working example;

<原始问题:下面是我的代码。我根据以下引用构建了它,但当它运行时,我没有收到控制台错误,也没有收到error\\u日志中的错误。表单提交时不会覆盖任何内容,页面重新加载时会丢失内容。提前感谢您的帮助

Javascript (js/custom.js)

$(document).ready(function () {
// AJAX
$( \'#um_form\' ).submit( function() {
    // Grab our post meta value
    var um_val = $( \'#um_form #um_key\' ).val();
    $.post(my_ajax_obj, { 
       _ajax_nonce: my_ajax_obj.nonce,     //nonce
        action: "my_tag_count",            //action
        \'custom_meta\': um_val,       
    });
    // Stop form from submitting
    return false;   
} );
//required post-load event
$( document.body ).trigger( \'post-load\' );
}); // end document ready

Functions.php

//AJAX
$ajax_url = admin_url( \'admin-ajax.php\' );        // Localized AJAX URL
// Register Our Script for Localization
wp_register_script(
    \'custom\',                             // Our Custom Handle
    "/wp-content/themes/myTheme/js/custom.js",  // Script URL, this 
script is located for me in `theme-name/scripts/um-modifications.js`
    array( \'jquery\' ),                              // Dependant Array
    \'1.0\',                                          // Script Version ( 
Arbitrary )
    true                                            // Enqueue in Footer
);
// Localize Our Script so we can use `ajax_url`
wp_localize_script( \'custom\', \'my_ajax_obj\', $ajax_url );
wp_enqueue_script( \'custom\' );
}

function my_action() {
// Ensure we have the data we need to continue
if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) {
    // If we don\'t - return custom error message and exit
    header( \'HTTP/1.1 400 Empty POST Values\' );
    echo \'Could Not Verify POST Values.\';
    exit;
}

$user_id = get_current_user_id();
//collect & sanitize
$um_val = sanitize_text_field( $_POST[\'custom_meta\'] );
//update info
update_user_meta( $user_id, \'custom_meta\', $um_val );

exit;
}

//add AJAX for logged in users only
add_action( \'wp_ajax_my_tag_count\', \'my_action\' );

User-profile.php (custom page type)

<?php    
$user_id = get_current_user_id();
//collect data for rendering
$test1 = get_user_meta( $user_id, \'custom_meta\', true);
?>
<form id="um_form" method="POST">
    <label for="um_key">
        User Meta Value:
        <input type="text" name="um_key" id="um_key" value="<?php echo $test1;?>" style="width:100%;" />
    </label>
        <input type="submit" value="Submit" />
    </form>

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

这个wp_ajax_ 是ajax操作的前缀。你的行动是my_tag_count 所以它应该是:

add_action( \'wp_ajax_my_tag_count\', \'my_action\' );

您试图在ajax请求中访问错误的url,因为您设置了

wp_localize_script( \'custom\', \'my_ajax_obj\', $ajax_url );

所以请求url应该是my_ajax_obj 它不是一个物体它没有ajax_url 在里面。因此在请求url中仅使用my_ajax_obj.

Another things

添加到get_user_meta 第三个参数为true,以获取单个值而不是数组。

$test1 = get_user_meta( $user_id, \'custom_meta\', true );

您不需要初始化use meta update,如果存在,它将更新,如果没有,它将添加。所以你只需要这个。

$user_id = get_current_user_id();

$um_val = sanitize_text_field( $_POST[\'custom_meta\'] );

update_user_meta( $user_id, \'custom_meta\', $um_val );

结束