Ajax或OnClick（）加载

Question

我对Ajax和JQuery完全陌生。我试图找出加载基于用户点击的一些结果而不加载新页面的最佳方式。

首先，我能够在页面的左侧自己实现ajax搜索功能。

我现在要做的是根据用户点击页面右侧的内容加载一些细节。这将显示他们从搜索中选择的食物的详细信息。

我应该为这个还是jQuery再次使用Ajax？有人可以告诉我如何做到这一点？我希望能够传递您在我网站上的html搜索结果中可以看到的id，并在点击时加载它。

以下是用户可以点击的搜索返回结果示例。类是项目id

<div class="foodRow"><span class="102">APPLE JUC,CND OR BTLD,UNSWTND,W/ ADDED VIT C</span></div> 

这里是我的地盘，你可以看看，看看我的意思。

http://challengeyourdiet.com/dev/usda/ 

这里是我现在工作的相关代码。

阿贾克斯

<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/jquery.watermark.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 
    function ajax_delay(str){ 
     setTimeout("str",2000); 
    } 
$("#faq_search_input").watermark("Begin Typing to Search"); 
$("#faq_search_input").keyup(function() 
{ 
    var faq_search_input = $(this).val(); 
    var dataString = 'keyword='+ faq_search_input; 
      if(faq_search_input.length>2) 
      { 
       $.ajax({ 
       type: "GET", 
       url: "ajax-search.php", 
       data: dataString, 
       beforeSend: function() { 
         $('input#faq_search_input').addClass('loading'); 
       }, 
       success: function(server_response) 
       { 
        window.setTimeout(function() { 
        $('#searchresultdata').html(server_response).show(); 
        $('span#faq_category_title').html(faq_search_input); 
         if ($('input#faq_search_input').hasClass("loading")) { 
           $("input#faq_search_input").removeClass("loading"); 
         } 
       }, 1200); 
      } 
}); 
}return false; 
}); 
}); 
</script> 

HTML

<div class="innerLeft"> 
    <div class="prod-subcontent"> 
     <div class="prod-lcol fl-left"> 
      <div class="prod-content"> 
       <div class="faqsearch"> 
       <div class="faqsearchinputbox"> 
        <input name="query" type="text" id="faq_search_input" /> 
        </div> 
       </div> 
       <div id="searchresultdata" class="faq-articles"> </div> 
      </div> 
     </div> 
     <div class="breaker"> </div> 
     </div> 
    </div> <!-- end innerLeft --> 
    <div class="innerRight"> 
    <div class="prod-subsubhead"> 
    <h4 class="faq_title"> <strong>Food Details For : </strong> <span id="faq_category_title">Keyword </span> </h4> 
    </div> 
    <div id="searchresults" class="faq-articles"> </div> 
    </div> <!-- end innerRight --> 
    <div class="breaker"> </div> 

感谢您的帮助！

Answer 1

首先，你应该'升级'到更新版本的jQuery，1.3.2是非常旧的，最新版本（与旧IE支持）是1.11.0。

$('#searchresultdata').on('click', '.foodRow', function(e){ 
    e.preventDefault(); 
    var articleId = $(this).find('span').attr('class'); 
    $('#searchresults').empty() 
         .load('/url-to-article-page.aspx?id=' +articleId+ ' #selector-to-refine-data-to-load'); 
}) 

我会解释答案来帮助你。我们随时关注发生在#searchresultdata的事件，这些事件源自.foodRow点击。如果是这样，我们将你在该元素的内部跨度上定义的类作为要作为参数传递的id，清除当前内容并尝试调用指定的页面并获取HTML，然后仅检索页面的那部分由选择器指定。我假设你有一个你可以浏览的文章页面。

相关链接：

• jQuery Delegated events
• jQuery load page fragments

不要打扰这里做你的，如果检查，只是removeClass()，如果类是不存在的话，就不会删除或者抛出一个错误。

if ($('input#faq_search_input').hasClass("loading")) { 
    $("input#faq_search_input").removeClass("loading"); 
} 

一些建议：

• 升级你的jQuery库到最新版本，上面将无法正常工作，没有它
• 不要使用此类来传递的ID为您的文章，而是使用data attributes。结果应该看起来像<span data-id="107">...</span>，然后你可以使用$(this).find('span').data('id');。 Apaprt，其中，numbers only are invalid class names。
• 忘掉水印插件，而不是设置placeholder attribute和使用placeholder plugin
• 我不明白为什么你有setTimeout S，未使用的第一个和一个在AJAX成功仅仅是延迟显示你收到它们后的结果为1.2秒。

希望有帮助。