javascript - 使用前端表单/输入框和 ajax 更新帖子元，无需重新加载页面

Question

我能够在没有ajax的情况下更新帖子元，并使用下面的代码重新加载页面。

global $post;
if( isset($_POST['submit_meta']) ) {
    if( ! empty($_POST['change_meta']) ) {
       update_post_meta($post->ID, 'shorturl', $_POST['change_meta']);
    }
}
echo $_POST[ 'change_meta' ];


<form method="post" action="" id="shortform">
<input style="/*display:none;*/" id="shortUrlInfo2" type="text" name="change_meta" value="<?php echo get_post_meta( get_the_ID(), 'shorturl', true ); ?>">
<input id="btn_url" type="submit" name="submit_meta" value="Confirm" />
</form>

但是我如何使用ajax更新相同的帖子元(自定义字段)？我尽力使用各种来源来解决问题，但找不到解决方案。

我什至在插件中尝试过wordpress ajax，但无法真正理解。

这就是我尝试过的事情。

add_action( 'wp_ajax_update_custom_fields', 'update_custom_fields' );
add_action( 'wp_ajax_nopriv_update_custom_fields', 'update_custom_fields' );

function update_custom_fields() {
    $post_id = $_POST[ 'post_id' ];
    $meta1 = $_POST[ 'meta1' ];
    $meta2 = $_POST[ 'meta2' ];

    update_post_meta( $post_id, 'meta1', $meta1 );
    update_post_meta( $post_id, 'meta2', $meta2 );

    die('Updated');
}

add_action('wp_footer', 'pp_script');

function pp_script() {
    wp_enqueue_script('jquery');
?>

<script>
jQuery(document).ready( function($) {
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
    var spinner = '<?php echo admin_url( 'images/spin.gif' ); ?>';
    $('.pp input').click( function() {
        var p = $(this).parent('p');
        p.find('.response').html('<img src="'+spinner+'" />');
        $.post(ajaxurl, {
            'action': 'update_custom_fields',
            'post_id': p.find('input[name="post_id"]').val(),
            'meta1': p.find('input[name="meta1"]').val(),
            'meta2': p.find('input[name="meta2"]').val()
        }, function( response ) {

            p.find('.response').html(response);

        }, 'text');
    });
});
</script><?php
}

所以我需要一些在最佳方向的光线才能让它正确。另外，我们是否需要在html输入框中使用表单或按钮？或者只是输入框？

这个 html 可以吗？

<input style="/*display:none;*/" name="post_id" type='text' id='post_id' value='7' />
<input style="/*display:none;*/" name="meta1" type='text' id='meta1' value='' /> 
<input style="/*display:none;*/" name="meta2" type='text' id='meta2' value='' /> 
<input type="button" id="meta1submit" value="meta1submit" />

Answer 1

分步调试您的问题:

您的 AJAX 调用正在进行吗？

• 如果没有
  • 检查 JavaScript 错误(如果有)。
  • 检查您的函数是否正确 Hook 。
• 如果是
  • 检查您是否在 JavaScript 中获取了要发布的正确元素值。
  • 在 PHP 函数中打印 $_POST 值，以验证您是否获得了正确的值。

您可以使用 type='hidden'，而不是 style="display:none;" 来输入元素。

您正在使用类名称来访问 jQuery 中的元素，而应该使用元素的 ID。

出于安全原因，始终在表单中使用随机数。