使用相同的AJAX函数两次

时间:2013-08-02 10:05:03

标签: javascript jquery html ajax

我是AJAX& amp; JS所以请耐心等待。

我有一个适用于2个事件的AJAX:

  1. 加载页面时
  2. 点击按钮时
  3. 这个AJAX有一个url,其中包含一些分页变量:

    url: "http://localhost/myurl/" + keyword + "/" + limit + "/" + offset
    

    这个AJAX在页面加载时工作正常,但我不知道如何在用户点击按钮时再次调用/使用它。

    我将.click函数放在AJAX中,所以基本上我需要回忆一下父母。这是一个代码,向您展示我想要做的事情:

    $.ajax({
            url: "example" + limit + offset
            type: "GET",
            error : function(jq, st, err) {
                alert(st + " : " + err);
            },
            success: function(result){
            $("#btnLoad").click(function(){
                        //recall this AJAX again here
                                                offset = (page - 1) * limit;
                        page++;
                    });
            }
            });
    

    我知道复制粘贴代码可能有用,但我不想这样做,因为AJAX很长。

    感谢任何帮助,谢谢:D

7 个答案:

答案 0 :(得分:7)

在事件处理程序中添加它,并在页面加载时触发事件:

$("#btnLoad").on('click', function() {
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        ....
    });
}).trigger('click');

答案 1 :(得分:3)

您可以抽象出AJAX调用。像这样:

$(document).ready(function(){
  //this is called when the page is loaded

  //variable that hold your offset and limit in the scope of the this function
  var limit = 10,
      offset = 0,
      page = 1;

  function ajaxCall(){
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        error : function(jq, st, err) {
            alert(st + " : " + err);
        },
        success: function(result){
          offset = (page - 1) * limit;
          page++;
        });
  };

  //register event for click on button
  $("#btnLoad").on('click', ajaxCall);


  //do the initial ajax call
  ajaxCall();

});

这不是一个完美的解决方案,但应该让你更接近你想要的地方。 这里要考虑的事情是:

  • 当用户在成功回调更新偏移量和页面之前第二次点击按钮时会发生什么?

答案 2 :(得分:2)

注意:这将在$(document).ready()

点击你的ajax:

$("#my_btn").on("click",my_click_ajax)

        function my_click_ajax(){
                $.ajax({
                 type: 'POST',
                 url: 'your_url',
                 data: {a:some_value},
                 success: function(data) {
                        alert(data)
                 }
             });
            }

你的onload ajax:

注意:这将在$(文件).ready()

之外
window.onload=my_onload_ajax();
    function my_onload_ajax(){
         $.ajax({
                     type: 'POST',
                     url: 'your_url',
                     data: {a:some_value},
                     success: function(data) {
                            alert(data)
                     }
                 });
    }

答案 3 :(得分:2)

您可以在方法中提取您的ajax调用:

// here you should to define 'limit' and 'offset' variables with init values
$("#btnLoad").on('click', method); 

var method = function() {
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        ....
    });
}

method(); // call method on page load

答案 4 :(得分:1)

将你的.ajax文件放入$(document).ready() 像这样:

$(document).ready(function(){
   $('#yourid').click(function(){
   //some code here...
});
});

答案 5 :(得分:1)

像Shivan所说:创建一个函数,并在页面加载和点击某些内容时调用它。像这样:

$(function(){
    MyAJAXFunction();
    $(".button").click(function(){
        MyAJAXFunction();
    });
});

function MyAJAXFunction() {
    // AJAX call here
}

答案 6 :(得分:1)

据我了解,您希望在用户单击按钮时触发ajax。 如果你在ajax调用之外创建一个函数会更好。 然后在成功时调用该函数。

div id="callAjaxRequestButton">Ajax Request</div>

$( "#callAjaxRequestButton" ).click(function() {  
                $.ajax({
                 type: 'POST',
                 url: "http://localhost/myurl/" + keyword + "/" + limit + "/" + offset,
                 data: {a:some_value},
              success: function(data) {
                    console.log(data)
              }
             });
);
});