Question

我是jQuery AJAX的新手。我想建立像Twitter一样的书签系统（收藏夹）。我有很多链接。因此，为每个链接编写AJAX请求没有用。这就是为什么我只想为所有链接使用一个请求脚本。

假设我有链接的链接：

<a href="#" id="1"><i class="icon-star-empty"></i></a>
<a href="#" id="2"><i class="icon-star"></i></a>
<a href="#" id="3"><i class="icon-star-empty"></i></a>

因此，当用户点击其中一个网址时，我想写一些AJAX请求。

if (class="icon-star-empty"){
    ajaxURL = "/insertBoomark"
} else{
    //it means class=icon-start
    ajaxURL = "/deleteBookmark"
}

$.ajax({
  url: ajaxURL,
  type: "POST",
  data: {id : linkID}, // I don't know how to get linkID too :(
  success: if class was icon-star empty then change it to icon-star-empty else change it to icon-star
});

我知道语法不正确。我怎么解决这个问题？请帮忙:(

提前致谢。

Answer 1

$("i").on("click", function() {

    if ( $(this).hasClass("icon-star-empty") ){
        ajaxURL = "/insertBoomark"
    } else{
        //it means class=icon-start
        ajaxURL = "/deleteBookmark"
    }

    var linkID = $(this).parent().prop("id");
    var obj    = $(this);

    $.ajax({
        url: ajaxURL,
        type: "POST",
        data: {id : linkID},
        success: function() {
            obj.hasClass("icon-star") ? obj.removeClass("icon-star").addClass("icon-star-empty") : obj.removeClass("icon-star-empty").addClass("icon-star");
        }
    });
})

Answer 2

您也可以使用href属性，只是阻止来自jquery事件的默认操作。

HTML

<a href="page1" class="icon-star-empty"></a>
<a href="page2" class="icon-star"></a>
<a href="page3" class="icon-star-empty"></a>

的javascript

    $(function(){
        $(document).on('click','a',function(e){
            e.preventDefault(); //prevent default click action
            var $this = $(this);  // keeps "this" accessable
            var ajaxURL = $this.attr('href'); // get the url from the "a" tag
            $.ajax({
                url: ajaxURL,
                type: "POST",
                data: {id : linkID},
                success: function() {
                    if($this.hasClass("icon-star"))
                        $this.removeClass("icon-star").addClass("icon-star-empty");
                    else
                        $this.removeClass("icon-star-empty").addClass("icon-star");
                }
            });
        });
    });

Answer 3

好的，首先，class是javascript中的保留名称。

其次，如果您使用jQuery.click函数进行操作，那么您只需$(this).attr('id')即可获取ID。

此外，对于成功部分，您似乎对javascript的函数语法感到困惑。你究竟想做什么？

Answer 4

$('a').click(function(){
    var _ajaxURL,
    _self = $(this);
    if($(this).hasClass('icon-star-empty')){
        _ajaxUrl = "/insertBookmark";
    }else{
        _ajaxUrl = "/deleteBookmark";
    }
    $.ajax({
        url: _ajaxUrl,
        type: 'POST',
        data: {id : $(this).prop('id')},
        success: {
           //I have no idea what you want to do right here.
        }
    });
});

AJAX请求许多链接

4 个答案: