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/

以下是我现在正在使用的相关代码。

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

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

Ajax或OnClick（）加载

1 个答案: