javascript - 如何使用 jQuery load 获取电子商务网站的产品

Question

我正在尝试为基于 asp.net Web 表单构建的电子商务网站创建 AJAX 功能。在此 AJAX 功能中，我必须从数据库加载产品并显示在我的页面中。

我正在使用 jQuery Load 方法进行 AJAX 调用。我知道如何使用 .load() 方法，但我对它如何从数据库获取产品有点困惑。

这里的主要问题是我必须传递 2 个参数来过滤产品。它们是“产品关键字”和“产品类别”。因此，请指导我通过 jQuery 加载方法创建此功能。

谢谢

Answer 1

您当然可以使用 jQuery Load 方法从数据库中获取您的产品。为此你从第 1 页到第 2 页从 jQuery Load 进行 AJAX 调用。

第 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”将是 page2 中的一个 div，jQuery 加载将获取其内容。在 load() 函数的第二个参数中，我传递关键字和类别。

您可以在这里想象“keywordInput”可以是一个文本框，而“categorySelect”可以是一个选择控件。用户在文本框中添加关键字并选择类别，然后可以按提交按钮。按钮的点击事件是jQuer Load代码将被写入的地方。

第 2 页:在页面中添加一个div“productData”:

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

在此 .cs 页面上的 Page_load 事件中，您调用一个函数并将其命名为“FetchProduct”。

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

在FetchProduct()中，您使用Request.Form获取参数关键字和参数类别值，然后从数据库获取产品并将它们显示在productData div中。下面的代码解释了这一点:

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 将显示产品，但由于第 1 页通过 jQuery Load 调用第 2 页，因此它们也将显示在第 1 页上。

我建议你看看 - 这个 jQuery Load方法教程，解释了在网站中使用 .load() 方法的一些好方法。