Jquery Ajax取值和绑定写入数据库

Posted 2020-07-31 iDennis

 

1、解决IE兼容性显示问题

<meta http-equiv="X-UA-Compatible" content="IE=edge,11" />

2、绑定Jquery，取 ”工号“ 对应的控件ID   #DetailsView1_txtStaffNo,执行input写入方法，当工号输入到6位长度执行Ajax方法调用数据取回 ”姓名“，

返回的值绑定回 #DetailsView1_txtStaffName 和 #txt_staffname_hidden两个地方。

<script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $(‘#DetailsView1_txtStaffNo‘).on(‘input‘, function () {
                var staffno = $(this).val();
                var stringStaffName;
                if (staffno.length == 6) {

                    $.ajax({
                        type: "POST",
                        url: "Sign.ashx",
                        data: { staffNo: staffno }, //要传递的数据 
                        success: function (response) {
                            if (response == "isNotExist") {
                                alert("姓名和工号不存在，请重新输入，谢谢！");
                            }
                            else if (response == "isNotMatc6hInt") {
                                alert("工号不允许为非数字，且只能6位工号，请重新输入，谢谢！");
                            }
                            else {
                                $(‘#DetailsView1_txtStaffName‘).val(response);
                                $(‘#txt_staffname_hidden‘).val(response);
                            }
                        }
                    });
                }
            });
        });
    
    </script>

3、Ajax方法：

<%@ WebHandler Language="C#" Class="Sign" %>

using System;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Text.RegularExpressions;

public class Sign : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        String strStaffNo = context.Request.Params["staffNo"];
        SQLHelper sqlhelper = new SQLHelper();
        String strStaffName = "";
        try
        {
            if (strStaffNo !=null && strStaffNo !="")
            {
                bool b = Regex.IsMatch(strStaffNo.Trim(), "^\\d{6}$");
                if (!b)
                {
                    context.Response.Write("isNotMatc6hInt");
                    return;
                }
                System.Web.UI.WebControls.SqlDataSource sql = new System.Web.UI.WebControls.SqlDataSource();
                sql.DataSourceMode = System.Web.UI.WebControls.SqlDataSourceMode.DataSet;
                DataSet ResultSet = new DataSet();
                // SELECT [StaffNo], [ChineseName] FROM [VHMS_StaffNameSection]  where staffno = ‘123456‘ and ( ChineseName = N‘黄‘ or EnglishName = ‘HUANG‘)
                ResultSet = sqlhelper.RunQuery_getStaffName("SELECT [StaffNo], [ChineseName] FROM [StaffNameSection]  where staffno = ‘" + strStaffNo.Trim() + "‘");

                if (ResultSet.Tables[0].Rows.Count == 0)
                {
                    context.Response.Write("isNotExist");
                    return;
                }
                else
                {
                    strStaffName = ResultSet.Tables[0].Rows[0]["ChineseName"].ToString();
                    context.Response.Write(strStaffName);
                }
            }
            else
            {
                context.Response.Write("isNotMatc6hInt");
                return;
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

4、SQLHelper方法：

using System;
using System.Collections.Generic;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

/// <summary>
///SQLHelper 的摘要说明
/// </summary>

public class SQLHelper
{
    public DataSet RunQuery_getStaffName(string QueryString)
    {
        System.Data.SqlClient.SqlConnection DBConnection = null;
        DBConnection = new System.Data.SqlClient.SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["webConnectionString_Dept"].ToString());
        DBConnection.Open();
        SqlDataAdapter DBAdapter = default(SqlDataAdapter);
        DataSet ResultsDataSet = new DataSet();

        try
        {
            DBAdapter = new SqlDataAdapter(QueryString, DBConnection);
            DBAdapter.Fill(ResultsDataSet);
            DBConnection.Close();
        }
        catch (Exception ex)
        {
            if (DBConnection.State == ConnectionState.Open)
            {
                DBConnection.Close();
            }
        }
        return ResultsDataSet;
    }
}

<connectionStrings>
<add name="webConnectionString_Dept" connectionString="Data Source=数据库服务器;Initial Catalog=库名;Persist Security Info=True;User ID=用户名;Password=密码"
 providerName="System.Data.SqlClient" />
</connectionStrings>

5、数据写入方法：

    protected void DetailsView1_ItemInserted(object sender, DetailsViewInsertedEventArgs e)
    {
        Response.Write("<script languge=‘javascript‘>alert(‘成功提交,谢谢！‘);window.location.href=‘index.html‘</script>");
    }

    protected void DetailsView1_ItemInserting(object sender, DetailsViewInsertEventArgs e)
    {
        string staffName = this.txt_staffname_hidden.Value.Trim();
        
        TextBox txtStaffNo = (TextBox)this.DetailsView1.FindControl("txtStaffNo");
        TextBox txtStaffName = (TextBox)this.DetailsView1.FindControl("txtStaffName");
        //txtStaffName.Text = staffName;
        lblstringStaffName.Text = staffName;
    }