使用带有Ajax的前端表单/输入框更新帖子元，而无需重新加载页面

Question

我可以不使用ajax来更新post meta，并使用以下代码重新加载页面。

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更新相同的post meta（自定义字段）？ 我尽力使用各种资源来解决问题，但是找不到解决方案。

我什至在插件中尝试过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错误（如果有）。
  • 检查您的功能是否正确挂接。
• 如是
  • 检查是否在JavaScript中获取了适当的元素值以进行发布。
  • 在PHP函数中打印$ _POST值，以验证您获得了正确的值。

代替style =“ display：none;” 要输入元素，可以使用type ='hidden' 。

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

出于安全原因，请始终以该形式使用随机数。