Ajax 或 OnClick() 加载

Question

我对 Ajax 和 JQuery 完全陌生。我正在尝试找出在不加载新页面的情况下根据用户点击加载某些结果的最佳方法。

首先，我自己在页面左侧实现了一个ajax搜索功能。

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

我应该再次使用 Ajax 还是 jQuery？有人可以告诉我怎么做吗？我希望能够传递您可以在我网站上的 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/

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

Ajax

<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');
})

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

相关链接：

• jQuery Delegated events
• jQuery load page fragments

不要费心在此处进行 if 检查，只需 removeClass()，如果该类不存在，则不会将其删除或引发错误。

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

一些建议：

• 升级你的 jQuery 库到最新版本，没有它上面的就不行了
• 不要使用 class 为您的文章传递 id，而是使用 data attributes。结果应该类似于<span data-id="107">...</span>，然后您可以使用$(this).find('span').data('id');。来自numbers only are invalid class names。
• 忘记水印插件，而是设置placeholder attribute并使用placeholder plugin
• 我不明白为什么你有setTimeouts，第一个没有使用，而 AJAX 成功的那个只是在你收到结果后延迟显示结果 1.2 秒。

希望对您有所帮助。