Question

所以，我在php页面（top.php）中有一个搜索表单，它是我正在处理的网站的一个包含，一个php页面，其中所有mySQL内容都发生，结果存储在一个变量中echoed（dosearch.php），最后是一个php页面，结果通过jQuery（search.php）显示在div中。这是javascript代码：

$(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中。为了使表单提交并在top.php中的search.php中显示结果而没有问题，我将如何使用？如果表单和javascript在search.php中，它可以完美地工作，但我似乎无法将它们分开并使其工作。我做错了什么？

PS。对不起，如果我不够清楚，我在工作，真的很累。：（

Answer 1

<强>分裂：

  <? 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>

Answer 2

你可以让你的search_button重定向到你的search.php并在加载页面时进行工作，而不是在点击事件上进行。

并在搜索页面上使用$_GET['Search']

你的网址应该是这样的

/search.php?Search=1337

如何使用AJAX将不同的页面用于表单输入和结果

2 个答案: