如何使用使用AJAX

问题描述：

的形式输入不同的页面和结果，因此，我有一个PHP网页搜索表单（top.php），这是一个包括对网站我的工作，一个PHP的页面，所有的mySQL的东西发生，结果存储在一个变量和回显（dosearch.php），最后一个PHP页面，结果通过jQuery（search.php）显示在div中。这是JavaScript代码：如何使用使用AJAX

$(document).ready(function(){ 
    $('#search_button').click(function(e) { 
     e.preventDefault(); 
     var searchVal = $('#search_term').attr('value'); 
     var categoryVal = $('#category').attr('value'); 
     $.ajax({ 
      type: 'POST', 
      url: 'dosearch.php', 
      data: "search_term=" + searchVal + "&category=" + categoryVal, 
      beforeSend: function() { 
       $('#results_cont').html(''); 
       $('#loader').html('<img src="layout/ajax-loader.gif" alt="Searching..." />'); 
       if(!searchVal[0]) { 
        $('#loader').html(''); 
        $('#results_cont').html('No input...');  
        return false; 
       } 
      }, 
      success: function(response) { 
       $('#loader').html(''); 
       $('#results_cont').html(response); 
      } 
     }); 
    }); 
});

的#search_term和#category字段是top.php，其他的div（#loader和#results_cont）是search.php中。我将如何通过以使表单提交并显示search.php中的结果从top.php中没有问题？它完美的工作，如果窗体和JavaScript在search.php，但我似乎无法分开这些，并使其工作。我究竟做错了什么？

PS。对不起，如果我不够清楚，在工作中，真的很累。 :(

答

分裂：

<? include('functions-or-classes.php'); ?> 

    <!DOCTYPE html> 
    <html> 
     <head> 
     <title></title> 

     <? include('js-script.php'); ?> 

     </head> 
     <body> 

     <? include('results-div.php'); ?> 

      <? include('search-form.php'); ?> 

     </body> 
    </html>

你应该尊重这个命令，然后你可以将代码拆分成不同的部分并将它包含到你的主php文件中;

PS：peraphs你的代码应该是这样的：

<!DOCTYPE html> 
<html> 
    <head> 
    <title></title> 
    <script> 
$(function() { 
    $('#search-form').submit(function(e) { 
     e.preventDefault(); 
     var searchVal = $('#search_term').val(); 
     var query = $(this).serialize(); // search_term=lorem&category=foo 
     if (!searchVal) { 
      $('#results_cont').html('No input...'); 
     } else { 
      $('#results_cont').html('<div id="loader">'+ 
       '<img src="layout/ajax-loader.gif" alt="" /><div>'); 
      $.ajax({ 
       type: 'POST', 
       url: 'dosearch.php', 
       data: query, 
       success: function(response) { 
        $('#results_cont').html(response); 
       } 
      }); 
     } 
    }); 
}); 
    </script> 
    </head> 
    <body> 
    <form id="search-form"> 
     <input type="text" id="search_term" name="search_term" /> 
     <select id="category" name="category"> 
     <option value="foo">foo</option> 
     <option value="bar">bar</option> 
     </select> 
     <input type="submit" name="search_button" /> 
    </form> 
    <div id="results_cont"></div> 
    </body> 
</html>

答

，你可以让你的search_button重定向到您的search.php的做工作时的页面，而不是被装载做它的点击事件。

和搜索页面

上使用$_GET['Search']和您的网址应该是这样的

/search.php?Search=1337

是啊，但是如果他已经在结果页面上？那不是说整个页面会重新加载吗？ – 2011-02-10 13:56:11

是的，但是真的有问题吗？ – Kimtho6 2011-02-10 13:57:06

相关推荐