Ajaxフォームを送信してクエリ文字列を取得し、新しいページに追加してリダイレクトする

Question

ajaxを使用してフォームを送信し、URLにリダイレクトしてそのデータを送信し、URLでクエリ文字列を取得する方法を探しています。基本的には、通常のGETリクエストは、これは私が、私はあなたがGET要求から受け取るような

/list?input1=thisinput&input2=anotherinput 

同じものとしてクエリ文字列を取得したい

$('#searchform').submit(function(event) { 
    $.ajax({ 
    type: "get", 
    url: "/list", 
    data: $("#searchform").serialize(), 
    beforeSend: function() { 
     $(".loader").show(); 
    }, 
    success: function(data) { 
     location.href = "/list"; //redirect to list 
     $("#ajaxcontent").empty(); //try to append data on this div, not sure how 
     $("#ajaxcontent").append(data); 
    } 
    }); 
    event.preventDefault(); 
}); 

を試みたものです。

このすべてでajaxを使用する私の唯一の目的は、プリローダーを表示することです。

私は自分のAjaxリクエストをどのようにしたらよいかを説明するのに役立つほどの親切な人になるでしょうか。私は自分自身を理解できるようにしたいと思う。

これは、フォーム

<form method="GET" action="list" id="searchform" name="searchform"> 

    <input type="text" name="search1"> 
    <input type="text" name="search2"> 
    <input type="text" name="search3"> 
<button type="submit" id="submitz">Submit</button> 
    </form> 

Answer 1

であるここでの問題は、あなたが、\リストとのコミュニケーションの二つの方法を使用していることです。

最初は、\ list（.ajax（）関数を使用）でこのリクエストのcontact \ listにajaxリクエストを送信し、フォームデータを渡してデータを返信します（success関数内） 。

次に、データなしで\ listへの簡単なjavascriptリダイレクトを使用します。

だから、あなたが選択を行う必要があり、次のいずれかのAjaxリクエストを（ちょうどLOCATION.HREF =「/リスト」をドロップし、次に）-keeping

ます（が、あなたは同じページに滞在されますデータはちょうど良いbtwを追加しています）。 \ listから返されたいくつかのコンテンツ、console.log（data）の使用と乱用が必要です。あなたがここに来たものを見る。

単純なリダイレクトのためのajaxリクエストをドロップしますが、ページの変更がかなり高速になるため、ローダーはほとんど見えなくなります。だから、あなたはJSなしで一層良くなるでしょう。テストするには：

$('#searchform').submit(function(event) { 
    $(".loader").show(); 
    location.href = "/list?"+$("#searchform").serialize(); //redirect to list 
    event.preventDefault(); 
});