使用JQuery将元素值传递给Ajax

时间:2014-12-20 10:14:01

标签: jquery ajax wordpress

我正在尝试将从锚标记传递到ajax。

这是我的HTML

<section>
    <div class="nav-section">
        <nav>
            <ul>
                <li><a href="#" class="section" value="news">News</a></li>
                <li><a href="#" class="section" value="highlights">Highlights</a></li>
            </ul>
        </nav>
    </div>
</section>

我使用此脚本检索并发送到ajax。这是我遇到麻烦的地方。我可以使用alert(value)提醒值,但是当我这样传递时:post_id: value,不会发送任何数据。

脚本

jQuery(function($){
    $('.section').click(function () {
        var value = $('.section').attr('value');
        jQuery.ajax({
            url: ajaxurl,
                data: {
                    'action':'ajax_action',
                    'type':'post',
                    'post_id': value
                },
                success:function(data) {
                    console.log(data);
                },
                error: function(errorThrown){
                    console.log(errorThrown);
                }
        });     
    });  
});

当我var_dump id时,我得到一个空值。该功能正在运行但没有数据。 完成所有这些后,我想使用该值在wordpress中检索get_template_part,并将其传递给html。

functions.php中的AJAX

function ajax_action_stuff() {
    $post_id = $_POST['post_id']; 
    var_dump($post_id);
    echo $post_id;
    die(); // 
}

3 个答案:

答案 0 :(得分:1)

您应该使用this来定位点击的元素。这样,您只能获得属性value的值,其属性被点击。

var value = $(this).attr('value');

答案 1 :(得分:1)

试试这个

  var value = $(this).attr('value');

答案 2 :(得分:1)

试试这个

jQuery(function($){
        $('.section').click(function () {
            var value = $(this).attr('value');
            jQuery.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {'action':'ajax_action','type':'post','post_id': value },
                success:function(data) {
                    console.log(data);
                },
                error: function(errorThrown){
                    console.log(errorThrown);
                }
            });     
        });  
    });