使用带有ajax的前端表单/输入框更新post meta而不重新加载页面

时间:2015-06-05 12:31:09

标签: javascript php jquery ajax wordpress

我可以在没有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更新相同的帖子元(自定义字段)?我尽力使用各种来源做到正确,但无法找到解决方案。

我甚至在插件中尝试过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" />

1 个答案:

答案 0 :(得分:0)

按步骤调试您的问题:

你的AJAX电话是否正在发生?

  • 如果不是
    • 检查是否存在JavaScript错误。
    • 检查您的功能是否正确连接。
  • 如果是
    • 检查您是否在JavaScript中获取正确的元素值以发布。
    • 在PHP函数中打印$ _POST值,以验证您是否获得了正确的值。

输入元素不是 style =“display:none;”,而是使用 type ='hidden'

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

出于安全原因,请始终在表单中使用nonce。