Wordpressの検索結果はモーダル

Question

私は完全なPHP/js初心者です。私は理解できないことに固執しました。

私はこのようなwww.test.com/resultsを呼び出す検索フォームをwww.test.com/pageでページを持っている：

<form method="post" action="https://www.test.com/results"> 
    <input type="text" placeholder="Enter URL:" required=""> 
    <button>Search</button> 
</form> 

フォームは、ユーザが入力したURLを取得するためにそれを渡します。 /resultsの場合は、($url = $_POST['url'];)が解析され、結果が表示されます。

しかし、私は新しいページの代わりに（ブートストラップ）モーダルで検索結果を開くことを望みます。私はこれがAJAXで行うことができることを知っているが、私は完全な初心者であり、それを動作させる最も単純で簡単な解決策を探している。

もう一度申し訳ありませんが、これはあまりにも "初心者"タイプの質問、私はまだ学んでいます。

Answer 1

はい、jQueryとAJAXを使用してフォーム送信を制御できます。

$('#myForm').on('submit', function(event) { 

    $.post('https://www.test.com/results', { URL: "some_url.com" }, function(data) { 
     // Render the results onto your modal anyway you want with data 
     // retrieved from server here 
     $("#my-modal-object").html(data); 
    }).error(function() { 
     // Handle the event when the call to "/results" fails 
     alert("Yikes! Call to /results failed!"); 
    }); 

    // Prevents default browser behaviour which submits the form 
    // then routes to another page, if specified 
    event.preventDefault(); 

}); 

短い説明：

私たちはあなたのフォームオブジェクトに"submit"イベントリスナーを添付してサーバーにPOST AJAX要求を行ったので、次のコード例に似て何かがトリックを行う必要があります終点/results。サーバーは、処理された検索結果をコールバック関数$.postに戻し、モーダルオブジェクトにレンダリングします。また、$.postという2番目の引数（つまり{ URL: "some_url.com" }）をサーバーに渡すデータオブジェクトに変更することもできます。

これは、新しいページに移動するのではなく、検索結果をモーダル要素に表示するのに役立ちます。