0

次のような単純なhtmlフォームがあります

  <form action="search.php" method="get">
    <p>Company Name:
       <input type="text" name="name" />
    </p>    
    <p>
      <input type="submit" value = "Search"/>
    </p>
  </form>

十分に単純ですが、問題は私がリダイレクトされることですsearch.php（このフォームページと同じディレクトリにあります）。にリダイレクトせずに、同じページ (フォームの下) に検索結果を表示できるようにしたいと考えていますsearch.php。何を指示してるんですか？

4

4 に答える 4

4

使用するjQuery

次に、 ajax（javascriptからのクライアントサーバーリクエスト）を簡単に呼び出すことができます（ドキュメントを参照）

たとえば、id search-formの検索フォームと、id search-resultsのコンテナがあり、検索結果を表示する場合は、次のことができます。

<script type="text/javascript">
function submit_search() {

    var request_data = $('#search-form').serailize();
    $.post('search.php', request_data, function(data, textStatus, jqXHR){
        $('#search-results').html(data);
        }, 'html');
    }
</script>

<form id="search-form" action="search.php" method="post" onsubmit="submit_searh();return false;">
<input type="text" name="q">
<input type="submit" value="Search!">
</form>

<div id="search-results"></div>
于 2012-06-24T12:42:21.537 に答える
4

同じページにリダイレクトするようにフォームを設定できます

<form action="yourPage.php" method="post">
<p>Company Name:
   <input type="text" name="name" />
</p>    
<p>
  <input type="submit" value = "Search"/>
</p>

次に、このphpページで、フォームに入力されているかどうかを確認します

    if(isset($_POST['a_field_of_your form']){
//treat the values of the form
}

そして、ページのフォームの後に結果を表示します！

このメソッドは、ページがリロードされることを意味します。それを望まない場合は、Ajaxを使用してフォームを送信し、Ajaxリクエストから検索結果を取得する必要があります。

于 2012-06-24T12:44:33.450 に答える
1

このライブラリを使用して、ajaxを介してフォームを送信できます

Ajax送信

例：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
    <script src="http://malsup.github.com/jquery.form.js"></script> 

    <script> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' (is an id of form) and provide a simple callback function 
            $('#myForm').ajaxForm(function(response) { 
                  //handle search results
                alert("Thank you for your search!"); 
            }); 
        }); 
    </script>
于 2012-06-24T12:42:59.933 に答える
0

これは、AJAXを使用して実現できます。javascript（またはjavascriptに使用しているライブラリ）を使用して、フォームの値を使用してAJAXリクエストをsearch.phpに送信します。あなたはあなた自身のためにそれらを集める必要があるでしょう。また、search.phpに、ページ全体ではなく、ページに挿入できるものを返すようにする必要があります。

于 2012-06-24T12:43:46.173 に答える