2013-08-02 2 views
1

Im начинающий в AJAX & JS поэтому, пожалуйста, несите меня.использовать ту же функцию AJAX 2 раза

У меня есть AJAX, который будет работать в 2-х событий:

  1. Когда страница загружается
  2. Когда кнопка нажата

Это 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

+3

вы можете извлечь функцию внутри 'click()', чтобы быть новой функцией Javascript. Повторно используйте новую функцию в 'click()' и '$ (document) .ready()' – Raptor

+0

Просто просто определите функцию с требуемыми аргументами и вызовите ее. – hallaji

ответ

7

Добавьте его в обработчик события, и вызвать событие на PageLoad:

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

Спасибо за помощь. Извините, я действительно не понимаю ваш код. Если я использую ваш код, означает ли это, что $ .ajax просто будет работать, когда я нажму кнопку? Мне это нужно и на загрузке страницы. –

+1

Он будет работать в обоих случаях, потому что сценарий добавляет обработчик к событию клика (поэтому он добавляется, а это означает, что при нажатии на элемент запускается событие и выполняется вызов ajax), но он также запускается сразу после он добавляется, и запуск будет происходить при загрузке страницы. –

+0

@BlazeTama Свой триггерный клик. Поэтому Ajax также вызывается при загрузке страницы. – GoodSp33d

2

Примечание: это будет внутри $ (документ) .ready()

ваш Аякса по щелчку:

$("#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:

Примечание: это будет за пределами $ (document) .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) 
        } 
       }); 
    } 
+0

Спасибо. Как насчет на pageload? –

+0

всего в секунду ... обновление !!! –

+0

@BlazeTama: обновлено !!! –

1

положить файл .ajax в $ (документ) .ready() так:

$(document).ready(function(){ 
    $('#yourid').click(function(){ 
    //some code here... 
}); 
}); 
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 
1

Как сказал Шиван: создайте функцию и вызовите ее, когда страница загружается и когда что-то щелкает. Например:

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

function MyAJAXFunction() { 
    // AJAX call here 
} 
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) 
       } 
      }); 
); 
}); 
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(); 

}); 

Это не идеальное решение, но должно быть ближе к тому месту, где вы хотите быть. вещи, чтобы рассмотреть здесь:

  • , что происходит, когда пользователь нажимает на кнопку второй раз до того, как обратный вызов обновила смещение и страницы?
Смежные вопросы