jquery - ajax代码,不知道它有什么问题

时间:2013-05-12 08:54:38

标签: jquery ajax

是否有人可以告诉我这段代码有什么问题?

我在页面上有4个或5个链接,使用ajax_load函数加载。当我在它们之间点击时,这一直有效。我在ajax_load函数中有2个console.log警报,当点击链接时,它会始终显示在谷歌浏览器中。

当我点击我的“提交”按钮时会出现问题,该按钮调用我的form_submit函数。它始终有效 - 我在控制台日志中获得了成功的消息 - 但是当我回到链接时,大多数时候只出现第一个控制台日志消息。 (在处理'form_submit'之前,出现了2条消息。)

它没有达到:

  if (current_url_method != url + method) {   
    console.log('You got to the url + method part. But sometimes I dont get this far.'); 
    current_url_method = url + method; 

无论如何,如果有人能告诉我什么是错的,我将不胜感激。这是:

$(document).on("ready", function(){

//I want to load content into the '.page-content' class, with ajax

 console.log('load ajax when document starts. This always works.'); 
  var ajax_loaded = (function(response) {        

    $(".page-content")

     .html($(response).filter(".page-content"));       

    $(".page-content .ajax").on("click",ajax_load);  



   });

//use the ajax function below for submitting forms

var form_submit = (function(e) {
  console.log('form_submit is working. This always works.');         
  e.preventDefault();               

  var url = $(this).attr("action");       
  var method = $(this).attr("method");      


  var data = {}                 
  $(this).find("input, textarea, select").each(function(i){
    var name = $(this).attr("name");      
    var value = $(this).val();          

    data[name] =value;              

  }); 

  $.ajax({                    
    "url": url,                 
    "type": method,                
    "data": data,               
    "success": ajax_loaded,
    "error": function () {alert("bad");}    
  });

});

//the function below is called by links that are described 
//with the class 'ajax', or are in the div 'menu' 

var history = [];                 

var current_url_method;               

var ajax_load = (function(e) {  


console.log('load ajax on clicks. This always works.');         
  e.preventDefault();               


  history.push(this);               
  var url =$(this).attr("href");          
  var method = $(this).attr("data-method");   

  if (current_url_method != url + method) {   
    console.log('You got to the url + method part. But sometimes I dont get this far.'); 
    current_url_method = url + method;      

$.ajax({                  
  url: url,               
  type: method,  
  async: false,                       
  success: ajax_loaded       
});
   }

});


//monitor for clicks from menu div, or with
//the ajax class, or the 'submit button'.
//why the trigger?

$("#menu a").on("click",ajax_load);
$(".ajax").on("click",ajax_load);
$("#menu a.main").trigger("click");
$(".search-box form").on("submit", form_submit);


});

2 个答案:

答案 0 :(得分:1)

我怀疑问题是关闭。尝试:

var ajax_loaded = function(response) { 
    $(".page-content") .html($(response).filter(".page-content")); 
    $(".page-content .ajax").on("click",ajax_load); 
};

答案 1 :(得分:1)

日志消息仅在以下条件中显示:

if (current_url_method != url + method) {   

如果单击与前一个链接具有相同URL +方法的链接,则该条件不会为真,您将不会收到日志消息。但是之后的AJAX调用仍然会发生。

如果您希望始终记录日志消息,请从console.log()块中取出if()来电。但是,current_url_method变量似乎没有任何理由;它唯一用于决定是否记录此消息。