Javascript 使用相同的AJAX函数两次_Javascript_Jquery_Html_Ajax

Javascript 使用相同的AJAX函数两次

javascript jquery html ajax

Javascript 使用相同的AJAX函数两次,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我是AJAX和JS的初学者，所以请耐心听我说我有一个AJAX，可以在两个事件中工作：当页面加载时当按钮点击时此AJAX有一个url，其中包含一些用于分页的变量： url: "http://localhost/myurl/" + keyword + "/" + limit + "/" + offset 加载页面时，这个AJAX工作正常，但是当用户单击按钮时，我不知道如何再次调用/使用它。我把.click函数放在AJAX-it-self中，所以基本上我需要调用父函数。这是一段代码，用于向

我是AJAX和JS的初学者，所以请耐心听我说

我有一个AJAX，可以在两个事件中工作：

当页面加载时

当按钮点击时

此AJAX有一个

url

，其中包含一些用于分页的变量：

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

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

我把

.click

函数放在AJAX-it-self中，所以基本上我需要调用父函数。这是一段代码，用于向您显示我要执行的操作：

$.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

注意：这将在$（文档）.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)
                 }
             });
            }

您的加载ajax：

注意：这将在$（document.ready（）之外

注意：这将在$（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)
                 }
             });
            }

您的加载ajax：

注意：这将在$（document.ready（）之外

将其添加到事件处理程序中，并在pageload上触发事件：

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

将其添加到事件处理程序中，并在pageload上触发事件：

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

将.ajax文件放入$（document）.ready（）中像这样：

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

将.ajax文件放入$（document）.ready（）中像这样：

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

您可以在方法中提取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

您可以在方法中提取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

正如Shivan所说：创建一个函数，并在页面加载和单击某些内容时调用它。像这样：

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

function MyAJAXFunction() {
    // AJAX call here
}

$(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();

});

正如Shivan所说：创建一个函数，并在页面加载和单击某些内容时调用它。像这样：

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

function MyAJAXFunction() {
    // AJAX call here
}

$(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();

});

据我所知，您希望在用户单击按钮时启动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)
              }
             });
);
});

Ajax请求 $（“#callAjaxRequestButton”）。单击（函数（）{ $.ajax({ 键入：“POST”， url:“http://localhost/myurl/“+关键字+”/“+限制+”/“+偏移量，数据：{a:some_value}，成功：功能（数据）{ console.log（数据） } }); ); });

据我所知，您希望在用户单击按钮时启动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)
              }
             });
);
});

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

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

function MyAJAXFunction() {
    // AJAX call here
}

$(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();

});

这不是一个完美的解决方案，但应该会让你更接近你想去的地方。这里需要考虑的是：

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

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

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

function MyAJAXFunction() {
    // AJAX call here
}

$(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();

});

这不是一个完美的解决方案，但应该会让你更接近你想去的地方。这里需要考虑的是：

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

您可以将

click（）中的函数提取为新的Javascript函数。重新使用click（）
和$（document）上的新函数。ready（）
只需定义一个具有所需参数的函数并调用即可。您可以将click（）
中的函数提取为新的Javascript函数。重新使用click（）
和$（document）上的新函数。ready（）
只需定义一个带有所需参数的函数并调用即可。感谢您的帮助。对不起，我不太懂你的代码。如果我使用您的代码，是否意味着只要单击一个按钮，$.ajax就可以工作？我在页面加载中也需要它。它在这两种情况下都能工作，因为脚本将处理程序添加到click事件中（因此它被追加，这意味着当您单击元素时，会触发事件并执行ajax调用），但在追加之后也会触发，并且触发将在页面加载时发生。@BlazeTama它的触发单击事件。所以Ajax在页面加载时也会被调用。谢谢你的帮助。现在可以工作了：D但是，分页有问题，请在这里查看：谢谢您的帮助。对不起，我不太懂你的代码。如果我使用您的代码，是否意味着只要单击一个按钮，$.ajax就可以工作？我在页面加载中也需要它。它在这两种情况下都能工作，因为脚本将处理程序添加到click事件中（因此它被追加，这意味着当您单击元素时，会触发事件并执行ajax调用），但在追加之后也会触发，并且触发将在页面加载时发生。@BlazeTama它的触发单击事件。所以Ajax在页面加载时也会被调用。谢谢你的帮助。现在可以工作了：D但是，分页有问题，请在这里查看：谢谢。在页面上怎么样？谢谢。在页面上加载怎么样？