jQuery loadを使用してeコマースWebサイトの製品を取得する方法

Question

asp.net Webフォームを使用して構築されたeコマースWebサイトのAJAX機能を作成しようとしています。このAJAX機能では、データベースから商品を読み込んでページに表示する必要があります。

私はを使用しています。jQuery AJAX呼び出しを行うロードメソッド。 .load（）メソッドの使用方法はわかっていますが、データベースから製品を取得する方法についてはちょっと混乱しています。

ここでの主な問題は、製品をフィルタリングするために2つのパラメータを渡す必要があることです。これらは「商品キーワード」と「商品カテゴリ」です。だから、jQuery Load Methodからこ​​の機能を作成する際に私を案内してください。

あなたは

Answer 1

あなたは確かに、データベースから貴社の製品を取得するためにjQueryのLoadメソッドを使用することができますありがとうございました。このためには、ページごとに1からjQueryの負荷からAJAX呼び出しを行う 2.

ページ1： ID "resultDiv" とdiv要素を追加します。

<div id="resultDiv"></div> 

このdivでは、製品はjQueryロードメソッドからフェッチされ、表示されます。

次に、このような負荷方法のコードを追加します。

$("#resultDiv").load("page2.aspx #productData", { "keyword": "" + $("#keywordInput").val() + "", "category": "" + $("#categorySelect").val() + "" }, function (response, status, xhr) { 
    if (status == "error") 
     alert("Error: " + xhr.status + ": " + xhr.statusText); 
}); 

「productData」はページ2とjQuery負荷でのdivになり、その内容を取得します。 load（）関数の2番目のパラメータでは、キーワードとカテゴリを渡しています。

「keywordInput」はテキストボックスになり、「categorySelect」は選択コントロールになります。ユーザーはテキストボックスにキーワードを追加してカテゴリを選択し、送信ボタンを押すことができます。ボタンのclickイベントは、jQuer Loadコードが書き込まれる場所です。

ページ2： ページでDIV "productData" を追加します。このオン

<div id="productData" runat="server"></div> 

は、あなたがそれが "FetchProduct" &名前の関数を呼び出して、Page_Loadイベント内のページを.CS。 FetchProduct（中

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
     FetchProduct(); 
    } 
} 

）あなたがのRequest.Formを使用してパラメータキーワードおよびパラメータカテゴリ値を取得し、データベースから製品を取得し、productData divの内側にそれらを表示。コードbelwoはこれを説明する：

void FetchProduct() 
{ 
    string keyword = Request.Form["keyword"]; 
    string category = Request.Form["category"]; 

    string information=""; 
    //get products form databaase then add them to information variable and show them inside productData div 
    productData.InnerHtml = information; 
} 

私があなたを示唆している今productDataは製品が表示されますが、2ページ目は、jQueryの負荷を介して1ページによって呼び出されるので、それゆえ、彼らはまた、ページ1

に表示されますこのjQuery Loadメソッドチュートリアルを参照してください。あなたのウェブサイトで.load（）メソッドを使用するいくつかの素晴らしい方法を説明しています。