Web开发技术---jquery的方式对数据进行查询

nüenüe280

已于 2024-07-10 21:18:01 修改

阅读量165

点赞数 2

文章标签：前端 jquery javascript

于 2024-06-13 20:29:23 首次发布

本文链接：https://blog.csdn.net/weixin_62115318/article/details/139663564

版权

有如下数据库中,有表的结构（不要使用updatepad用jquery的方式）

编写一个页面程序，应用Ajax技术实现如下图所示

代码实现如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Ex.WebForm3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>产品价格查询</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script type="text/javascript">
      $(document).ready(function () {
          $('#<%= btnQuery.ClientID %>').click(function () {
                event.preventDefault();
                var productName = $('#productName').val();
                $.ajax({
                    url: "WebForm3.aspx/GetData",
                    contentType: 'application/json; charset=utf-8',
                    type: 'post',
                    data: JSON.stringify({ productName: productName }),
                    success: function (data) {
                        var price = data.d;
                        if (price != null) {
                            $('#priceResult').text('产品价格：' + price + '');
                        } else {
                            $('#priceResult').text('未找到产品价格');
                        }
                    },
                    error: function () {
                        $('#priceResult').text('<p>请求失败</p>');
                    }
                });
            });
        });
  </script>
    <style type="text/css">
        .container {
            background-color: blue;
            color: white;
            padding: 10px;
        }
        .nav {
            background-color: gray;
            color: white;
            padding: 10px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        #queryButton {
            height: 22px;
            margin-left: 122px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
            <h2>我的 ASP.NET 应用程序</h2>
        </div>
        <div class="nav">
            <a href="WebForm3.aspx">主页</a> | <a href="WebForm3.aspx">关于</a>
        </div>
        <div class="form-group">
            <label for="productName" style="color: black;">产品名称:</label>
            <input type="text" id="productName" runat="server" />
        </div>
        <div id="priceResult"> </div>
        <div class="form-group">
            <asp:Button ID="btnQuery" runat="server" Text="查询" OnClick="btnQuery_Click" style="margin-left: 131px" />
        </div>
    </form>
</body>
</html>

using System;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;

namespace Ex
{
    public partial class WebForm3 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        private readonly string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;

        private SqlCommand CreateCommand(string sql, params SqlParameter[] parameters)
        {
            SqlConnection connection = new SqlConnection(connectionString);
            SqlCommand command = new SqlCommand(sql, connection);
            foreach (var param in parameters)
            {
                command.Parameters.Add(param);
            }
            return command;
        }

        [WebMethod]
        public static object GetData(string productName)
        {

            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
            {
                conn.Open();
                using (SqlCommand cmd = new SqlCommand("SELECT Price FROM Products WHERE Name = @productName", conn))
                {
                    cmd.Parameters.AddWithValue("@productName", productName);
                    object result = cmd.ExecuteScalar();
                    if (result != null)
                        return result.ToString();
                    else
                        return "Product not found.";
                }
            }
        }

        protected void btnQuery_Click(object sender, EventArgs e)
        {

        }
    }
}