兩種方法實現asp.net方案的先後端數據交互（aspx文件、html+ashx+ajax）
一個HTML頁面只能顯示HTML代碼信息，不能與數據庫進行數據的交互。asp.net方案提供了網頁與數據庫交互的方法，這裏舉出兩種：①aspx文件 ②ashx文件+ajax技術html
1、建立數據庫前端
這裏以SQL Server數據庫爲例，打開SSMS，建立一個數據庫，注意數據庫的保存路徑，後面要將數據庫複製到Visual Studio的工程項目中。jquery
打開Visual Studio，建立一個基於.NET Framework的空項目（不建立.NET Core項目）。web
在右側的Solution Explorer（解決方案管理器）下只顯示出這麼幾個文件。ajax
右鍵項目，選擇Add-Add ASP.NET Folder-App_Data。這個文件夾就是存放數據庫的文件夾，注意它的名字不能改變，只能是App_Data。數據庫
在SSMS中將數據庫分離。找到剛纔建立的數據庫的路徑，複製。若是出現權限的錯誤不能複製，右鍵數據庫-屬性-安全，更改權限爲徹底控制。編程
將Authenticated User的權限更改成徹底控制。若是權限仍是錯誤，將其餘用戶的權限也更改成徹底控制。後端
複製mdf和ldf文件，在Visual Studio的App_Data文件夾下粘貼。（若是有ndf數據庫文件，一塊兒複製）。打開App_Data文件夾下的數據庫，若是Visual Studio的版本和SQL Server的版本不兼容，則會出現這個錯誤。當前Visual Studio的版本是2017，SQL Server的版本也是2017。在別人的電腦上用低版本的SQL Server建立數據庫，而後複製到咱們本身的電腦上便可。這裏更換一個低版本的數據庫。緩存
雙擊數據庫，在Server Explorer管理器中，右鍵Table，建立一個新的數據表，添加相應字段值，爲用戶名添加主鍵。安全
2、aspx文件實現先後端數據交互
右鍵項目，添加一個WebForm，後綴名爲.aspx。
aspx文件的語法與普通的HTML文件不一樣，它使用的控件名字前會加上asp，如：asp:Button。aspx文件涉及不少方面的知識，具體信息請查看：https://app.pluralsight.com/player?author=dan-wahlin&name=webforms-01&mode=live&clip=0&course=aspdotnet-webforms4-intro。將一個普通個HTML文件的代碼直接複製到aspx文件中，是能夠運行的。
打開Web.config文件，在<configuration></configuration>標籤內添加數據庫鏈接信息。
1 <!-- 數據庫鏈接--> 2 <connectionStrings> 3 <add name="connectionString" 4 connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\data1.mdf;Integrated Security=True" 5 providerName="System.Data.SqlClient"/> 6 </connectionStrings>
其中，在<add>標籤內須要填寫3個信息：①name，爲這個數據庫鏈接起個名字，能夠任取，後面會用到 ②connectionString，數據庫鏈接的相關屬性設置：Data Source=(LocalDB)\MSSQLLocalDB，若是使用的是SQL Server數據庫，則不用更改；AttachDbFileName=|DataDirectory|\data1.mdf，這裏要將最後的數據庫主文件（.mdf），更改成本身的數據庫；Integrated Security=True，不用更改。 ③providerName="System.Data.SqlClient"，若是使用的是SQL Server數據庫，則不用更改。
aspx文件採用了微軟可視化編程的機制，基於事件編程，和WinForm、WPF一致，先後端代碼分離，且前端代碼能夠在代碼視圖與設計視圖以前切換。從工具箱中拖拽一個控件（如Button）到設計視圖時，代碼視圖會自動地添加相應代碼；一樣，在代碼視圖中寫上代碼，在佈局視圖中會出現相應的控件。
aspx文件的後端代碼分紅了兩部分，一個是*.aspx.cs文件，一個是*.aspx.designer.cs文件。兩個文件實際上是同一個類，用partial關鍵字分紅了兩個分部類。在.*aspx.designer.cs文件中，包含的是每個控件的字段聲明。在asp.net中，WebForm裏每一種控件都是一個類，具體的添加的控件是相應類的一個個實例。好比Button是一個類，拖拽一個Button到佈局視圖中，這個Button就是Button類的一個實例。若是再拖拽一個Button，則第二個拖拽的Button是第二個實例，兩個Button名字不一樣。在*.aspx.cs文件中存放的是相應控件的事件響應函數。這樣就實現了字段與響應函數的分離，結構更合理。
添加控件，設計一個增刪改查的頁面。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="先後端數據交互.WebForm1" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7 <title></title> 8 </head> 9 <body> 10 <form id="form1" runat="server"> 11 <asp:Button ID="btnAll" runat="server" Text="點擊按鈕查看全部數據" /> 12 <br /> 13 <asp:GridView ID="GridView1" runat="server"> 14 </asp:GridView> 15 <br /> 16 <br /> 17 增<br /> 18 <asp:Label ID="Label1" runat="server" Text="用戶名："></asp:Label> 19 <asp:TextBox ID="tbxInsertUser" runat="server"></asp:TextBox> 20 21 <asp:Label ID="Label2" runat="server" Text="密碼："></asp:Label> 22 <asp:TextBox ID="tbxInsertPassword" runat="server"></asp:TextBox> 23 24 <asp:Button ID="btnInsert" runat="server" Text="確認添加" /> 25 <br /> 26 <br /> 27 <br /> 28 刪<br /> 29 <asp:Label ID="Label3" runat="server" Text="用戶名："></asp:Label> 30 <asp:TextBox ID="tbxDeleteUser" runat="server"></asp:TextBox> 31 32 <asp:Label ID="Label6" runat="server" Text="密碼："></asp:Label> 33 <asp:TextBox ID="tbxDeletePassword" runat="server"></asp:TextBox> 34 35 <asp:Button ID="btnDelete" runat="server" Text="確認刪除" /> 36 <br /> 37 <br /> 38 <br /> 39 改<br /> 40 <asp:Label ID="Label4" runat="server" Text="用戶名："></asp:Label> 41 <asp:TextBox ID="tbxUpdateUser" runat="server"></asp:TextBox> 42 43 <asp:Label ID="Label5" runat="server" Text="密碼："></asp:Label> 44 <asp:TextBox ID="tbxUpdatePassword" runat="server"></asp:TextBox> 45 46 <asp:Button ID="btnUpdate" runat="server" Text="確認修改" /> 47 <br /> 48 <br /> 49 <br /> 50 查<br /> 51 <asp:Label ID="Label7" runat="server" Text="用戶名："></asp:Label> 52 <asp:TextBox ID="tbxSelectUser" runat="server"></asp:TextBox> 53 54 <asp:Label ID="Label8" runat="server" Text="密碼："></asp:Label> 55 <asp:TextBox ID="tbxSelectPassword" runat="server"></asp:TextBox> 56 57 <asp:Button ID="btnSelect" runat="server" Text="確認查詢" /> 58 </form> 59 </body> 60 </html>
下面進行增刪改查的設置。
①增
雙擊「確認添加」按鈕，編寫事件響應函數。事件響應函數的意思是，當點擊這個按鈕時，會發生什麼事情，發生的這個事情就寫在事件響應函數裏。
添加兩個命名空間。
1 using System.Data; 2 using System.Data.SqlClient;
爲了調試方便，引入System.Windows.Forms命名空間，並在Solution Explorer（解決方案管理器）中右鍵Reference添加相應的引用。這是爲了使用MessageBox.Show()方法彈出提示框。
在WebForm1類的開頭添加字段，包含數據庫鏈接字符串的信息。字段名connectionString是任取的，後面會用到。System.ConfigurationManager.ConnectionString["connectionString"].ToString()中，connectionString是以前在Web.config文件中設置的。
1 //數據庫鏈接字符串 2 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();
這是添加以後的後端代碼。
編寫btnInsert_Click()響應函數。
1°添加表示帳戶名和密碼的變量，tbxInsertUser、tbxInsertPassword是本身設置的文本框的ID名字。
string user = tbxInsertUser.Text; string password = tbxInsertPassword.Text;
2°SqlConnection是提供鏈接到SQL Server數據庫方法的類，這裏實例化爲conn，在構造函數中傳入剛纔添加的connectionString字段（數據庫鏈接字符串），表示咱們想鏈接的是這個數據庫。conn.Open()打開這個鏈接，conn.Close()關閉鏈接。這裏SqlConnection的構造函數還有其餘的重載形式，但這樣寫更清楚一點。
1 SqlConnection conn = new SqlConnection(connectionString); 2 conn.Open(); 3 4 5 conn.Close();
3°建立SqlCommand對象，它存儲咱們想對數據庫進行的操做。cmd.Connection設置鏈接的數據庫，cmd.CommandText是咱們書寫的SQL語句，即咱們想對數據庫進行的操做。一樣地，也能夠將這兩個內容寫在SqlCommand的構造函數中。除了SQL語句，SqlCommand對象也能夠保存Stored Procedure（存儲過程）。這裏將在文本框中輸入的信息添加到數據庫中。SQL Server中添加信息的SQL語句爲：INSERT INTO 用戶表(用戶，密碼) VALUES('user','password')。SQL語句不區分大小寫，寫成小寫也能夠。表的名字不用加引號，字段的名字也不用加引號，若是表的名字和字段名字都是中文，直接寫就能夠。VALUES()中相應的值要添加引號。上面這條語句的意思是，對用戶表的用戶和密碼字段進行信息的添加，添加的值爲user和password的值。若是想對錶中全部字段進行值的添加，則在表名後不用寫上具體的字段名，在VALUES()中按表中字段的順序進行添加。
1 SqlCommand cmd = new SqlCommand(); 2 cmd.Connection = conn; 3 cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')";
4°設置好了cmd.CommandText的內容後，要讓cmd對象執行它所包含的操做。經常使用的函數有3個，它們都執行cmd的內容，但返回值不一樣，適用於不一樣的場合。能夠根據這些特色進行執行成功與否的判斷、數據的展現、註冊登陸的設計等。
①cmd.ExecuteNonQuery()
ExecuteNonQuery()在執行完cmd命令後返回受影響的行數。注意這裏受影響的行數不包括查詢出來的行數，好比INSERT、DELETE、UPDATE一條信息後，受影響的行數是1，但SELECT一條信息後，受影響的行數是0.
②cmd.ExecuteReader()
ExecuteReader()在執行完cmd命令後會返回一個DataReader對象，提供了HasRows等屬性和Read()等方法。HasRows判斷DataReader對象所對應的，ExecuteReader()所執行的cmd命令後返回的結果集中有無行數。若是cmd命令執行後返回的結果集不空，則HasRows爲true，不然爲false。Read()方法提供了DataReader對象逐行訪問結果集的方式。
③cmd.ExecuteScalar()
ExecuteScalar()在執行完cmd命令後返回結果集第一行第一列的那個值，是object類型。
在這裏進行相應的設置，若是是作一個註冊功能，還須要進行用戶是否存在的檢查，這裏就不進行檢查了。
1 if (cmd.ExecuteNonQuery() != 0) 2 { 3 MessageBox.Show("添加信息成功！\n用戶名：" + user + "\n密碼：" + password); 4 } 5else 6 { 7 MessageBox.Show("添加信息失敗！"); 8 }
所有代碼以下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 8 using System.Data; 9 using System.Data.SqlClient; 10 11 using System.Windows.Forms; 12 13 namespace 先後端數據交互 14 { 15 public partial class WebForm1 : System.Web.UI.Page 16 { 17 //數據庫鏈接字符串 18 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString(); 19 20 protected void Page_Load(object sender, EventArgs e) 21 { 22 23 } 24 25 protected void btnInsert_Click(object sender, EventArgs e) 26 { 27 string user = tbxInsertUser.Text; 28 string password = tbxInsertPassword.Text; 29 30 SqlConnection conn = new SqlConnection(connectionString); 31 conn.Open(); 32 33 SqlCommand cmd = new SqlCommand(); 34 cmd.Connection = conn; 35 cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')"; 36 37 if (cmd.ExecuteNonQuery() != 0) 38 { 39 MessageBox.Show("添加信息成功！\n用戶名：" + user + "\n密碼：" + password); 40 } 41 else 42 { 43 MessageBox.Show("添加信息失敗！"); 44 } 45 46 conn.Close(); 47 } 48 } 49 }
運行後查看結果：
打開數據庫，能夠看到數據已經被寫入。
下面進行刪改查，大致框架都是同樣的，只是SQL語句和執行的cmd的3種方法不一樣。
②刪
1 protected void btnDelete_Click(object sender, EventArgs e) 2 { 3 string user = tbxDeleteUser.Text; 4 string password = tbxDeletePassword.Text; 5 6 SqlConnection conn = new SqlConnection(connectionString); 7 conn.Open(); 8 9 SqlCommand cmd = new SqlCommand(); 10 cmd.Connection = conn; 11 cmd.CommandText = "DELETE FROM 用戶表 WHERE 用戶名='" + user + "' AND 密碼='" + password + "'"; 12 13 if (cmd.ExecuteNonQuery() != 0) 14 { 15 MessageBox.Show("刪除信息成功！\n用戶名：" + user + "\n密碼：" + password); 16 } 17 else 18 { 19 MessageBox.Show("數據不存在！"); 20 } 21 22 conn.Close(); 23 }
這裏要注意SQL Server中刪除操做的SQL語句：DELETE FROM 用戶表 WHERE 用戶名='user' AND 密碼='password'，這裏WHERE必定不能少，否則會刪掉表中所有數據。
③改
1 protected void btnUpdate_Click(object sender, EventArgs e) 2 { 3 string user = tbxUpdateUser.Text; 4 string password = tbxUpdatePassword.Text; 5 6 SqlConnection conn = new SqlConnection(connectionString); 7 conn.Open(); 8 9 SqlCommand cmd = new SqlCommand(); 10 cmd.Connection = conn; 11 cmd.CommandText = "UPDATE 用戶表 SET 密碼='" + password + "' WHERE 用戶名='" + user + "'"; 12 13 if (cmd.ExecuteNonQuery() != 0) 14 { 15 MessageBox.Show("更新信息成功！\n用戶名：" + user + "\n密碼：" + password); 16 } 17 else 18 { 19 MessageBox.Show("更新失敗！"); 20 } 21 22 conn.Close(); 23 }
SQL Server中更新操做的SQL語句：UPDATE 用戶表 SET 密碼='user' WHERE 用戶名='password'.
④查
1 protected void btnSelect_Click(object sender, EventArgs e) 2 { 3 string user = tbxSelectUser.Text; 4 5 SqlConnection conn = new SqlConnection(connectionString); 6 conn.Open(); 7 8 SqlCommand cmd = new SqlCommand(); 9 cmd.Connection = conn; 10 cmd.CommandText = "SELECT 密碼 FROM 用戶表 WHERE 用戶名='" + user + "'"; 11 12 tbxSelectPassword.Text = cmd.ExecuteScalar().ToString(); 13 14 conn.Close(); 15 }
SQL Server中查詢操做的SQL語句：SELECT 密碼 FROM 用戶表 WHERE 用戶名='user'，這裏查詢的是用戶表中用戶名是user的那條記錄的密碼字段值。SELECT * FROM 用戶表 WHERE 用戶名='user’則查詢出用戶名是user的這條記錄的全部字段值。這裏執行cmd.ExecuteScalar()返回結果集的第一行第一列的值，將結果ToString()轉換成字符串賦值給相應的textbox，在頁面中顯示。
⑤在GridView中顯示數據
1 protected void btnAll_Click(object sender, EventArgs e) 2 { 3 SqlConnection conn = new SqlConnection(connectionString); 4 conn.Open(); 5 6 SqlCommand cmd = new SqlCommand(); 7 cmd.Connection = conn; 8 cmd.CommandText = "SELECT * FROM 用戶表"; 9 10 SqlDataReader dr = cmd.ExecuteReader(); 11 if (dr.HasRows) 12 { 13 GridView1.DataSource = dr; //設置數據源 14 GridView1.DataBind(); //進行數據綁定 15 } 16 else 17 { 18 MessageBox.Show("表中沒有數據！"); 19 } 20 21 conn.Close(); 22 }
這裏建立了SqlDataReader對象，並做爲GridView的數據源。這裏注意SqlDataReader對象不能使用實例化的方式建立，即不能這樣建立：SqlDataReader dr=new SqlDataReader()，而只能是接收cmd.ExecuteReader()的返回值。
運行結果：
上面已經實現了數據的增刪改查，可是沒有進行相應的安全設置。不少狀況下會出現錯誤，好比添加信息時用戶名重複、查詢數據時用戶名並不存在、cmd命令中SQL語句書寫錯誤等等。這些問題的出現都是因爲cmd.ExecuteNonQuery()、cmd.ExecuteReader()、cmd.ExecuteScalar()致使的，即不能正確執行cmd命令所對應的SQL語句。因此應該在代碼中使用C#的try-catch語法進行相應的安全設置。
下面進行相應的設置。
①增
1 protected void btnInsert_Click(object sender, EventArgs e) 2 { 3 string user = tbxInsertUser.Text; 4 string password = tbxInsertPassword.Text; 5 6 SqlConnection conn = new SqlConnection(connectionString); 7 conn.Open(); 8 9 SqlCommand cmd = new SqlCommand(); 10 cmd.Connection = conn; 11 //cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')"; 12 cmd.CommandText = "SELECT * FROM 用戶表s WHERE 用戶名='" + user + "'"; 13 try 14 { 15 if (cmd.ExecuteScalar() != null) 16 { 17 MessageBox.Show("用戶已存在"); 18 } 19 else 20 { 21 cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')"; 22 if (cmd.ExecuteNonQuery() != 0) 23 { 24 MessageBox.Show("添加信息成功！\n用戶名：" + user + "\n密碼：" + password); 25 } 26 else 27 { 28 MessageBox.Show("添加信息失敗！"); 29 } 30 } 31 } 32 catch (Exception) 33 { 34 MessageBox.Show("執行命令時發生錯誤！\n"); 35 } 36 37 conn.Close(); 38 }
通常狀況下catch()裏能夠增長變量Exception e，而後在花括號中輸出e.Message查看錯誤信息，但這裏不能這樣設置。沒有找到解決方法。
②查
1 protected void btnSelect_Click(object sender, EventArgs e) 2 { 3 string user = tbxSelectUser.Text; 4 5 SqlConnection conn = new SqlConnection(connectionString); 6 conn.Open(); 7 8 SqlCommand cmd = new SqlCommand(); 9 cmd.Connection = conn; 10 cmd.CommandText = "SELECT 密碼 FROM 用戶表 WHERE 用戶名='" + user + "'"; 11 12 try 13 { 14 tbxSelectPassword.Text = cmd.ExecuteScalar().ToString(); 15 } 16 catch(Exception) 17 { 18 MessageBox.Show("執行命令時出現錯誤！\n"); 19 } 20 21 conn.Close(); 22 }
進行try-catch的設置後，當發生錯誤時就會被捕捉到，彈出對話框，輸出「執行命令時發出現錯誤！」。
3、ashx文件+ajax技術實現HTML頁面的先後端數據交互
使用aspx文件的機制須要使用asp.net提供的控件，對某些應用（好比WebGIS應用）很不方便，因此大多數狀況下，編寫HTML文件和ashx文件，經過ajax技術實現HTML文件和ashx文件的交互，即先後端的交互。能夠類比成HTML是aspx的前臺，ashx是aspx的後臺，而ajax起到了aspx事件驅動的機制。
ashx是Generic Handler（通常處理程序）文件的後綴名，後臺對數據庫的操做都是寫在ashx裏面的。通常狀況下，一個ashx文件處理一個數據庫鏈接操做請求。
ajax(Asynchronous Javascript And XML)，是一種技術，在不少場合中使用。這裏ajax爲先後端的HTML與ashx搭建起了通訊的橋樑。
使用ajax技術須要引入jQuery，下載後放置在asp.net的工程項目中，在HTML<head>標籤內引用便可。
右鍵建立一個HTML頁面，並進行頁面的設計。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>ashx+ajax實現數據的增刪改查</title> 6 7 <!-- jQuery的引入 --> 8 <script src="jquery-3.0.0.min.js"></script> 9 10 <script> 11 function Insert() { 12 13 } 14 function Delete() { 15 16 } 17 function Update() { 18 19 } 20 function Select() { 21 22 } 23 </script> 24 </head> 25 26 <body> 27 <h5>增</h5> 28 <label>用戶名：</label><input id="iptInsertUser" /> <label>密碼：</label><input id="iptInsertPassword" /> <button id="btnInsert" onclick="Insert()">確認添加</button> 29 30 <h5>刪</h5> 31 <label>用戶名：</label><input id="iptDeleteUser" /> <label>密碼：</label><input id="iptDeletePassword" /> <button id="btnDelete" onclick="Delete()">確認刪除</button> 32 33 <h5>改</h5> 34 <label>用戶名：</label><input id="iptUpdateUser" /> <label>密碼：</label><input id="iptUpdatePassword" /> <button id="btnUpdate" onclick="Update()">確認更新</button> 35 36 <h5>查</h5> 37 <label>用戶名：</label><input id="iptSelectUser" /> <label>密碼：</label><input id="iptSelectPassword" /> <button id="btnSelect" onclick="Select()">確認查詢</button> 38 </body> 39 </html>
下面首先編寫添加信息的ashx文件及ajax。
右鍵項目，添加GenericHandler（通常處理程序）。
這是ashx文件的初始內容。IsRusable屬性設置這個ashx文件可否被多個請求訪問，我沒有這樣試過，這個例子裏就不進行更改了。ProcessRequest()是主要寫代碼的地方，參數context是從前臺傳過來的參數，包含前臺傳入的信息。在ProcessRequest()中使用context.Request["variable"]就能夠獲取從前臺傳過來的變量名爲variable的值；一樣地，context.Response.Write("...")就能夠將一些信息寫到前臺。context.Response.ContentType="text/plain"是返回信息的編碼方式。
這裏有個小提示，若是建立完ashx文件後想要更改它的文件名，須要在3個地方進行修改。①解決方案資源管理器右鍵重命名ashx文件 ②ashx文件中更改類名 ③右鍵ashx文件-View Markup，進行更改。
在HTML頁面<script>標籤中更改Insert()函數。這就是ajax使用的幾個參數，還有更多參數，這裏以這幾個爲例。
1 function Insert() { 2 $.ajax({ 3 type: "post", //post put get 等等 4 url: "Insert.ashx", 5 data: { //要傳入ashx文件的數據 6 7 }, 8 success: function (data, textStatus) { 9 //鏈接至ashx文件成功時，執行函數 10 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 11 //若是data是字符串，則能夠輸出data的值 12 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 13 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 14 15 }, 16 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 17 //XMLHttpRequest在這個例子裏沒有用到 18 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 19 //errorThrown包含鏈接失敗的信息，能夠輸出查看 20 } 21 }); 22 }
在success{ }中輸出使用alert(data)輸出data的值，就能夠查看從ashx文件中返回的信息。
下面實現的功能是：獲取HTML DOM元素即input輸入框的值，傳入後臺加工後，再返回前臺，輸出顯示。
①獲取HTML DOM元素
1 //jQuery寫法 2 var user = $('#iptInsertUser').val(); 3 var password = $('#iptInsertPassword').val(); 4 //JavaScript原生寫法 5 //var user = document.getElementById('iptInsertUser').value; 6 //var password = document.getElementById('iptInsertPassword').value;
②將獲取到的值傳入ashx文件。這裏"user"和"password"的名字是任取的，在ashx文件中要用到，不必定要和變量名user和password相同。
$.ajax({ type: "post", //post put get 等等 url: "Insert.ashx", data: { //要傳入ashx文件的數據 "user": user, "password":password }, success: function (data, textStatus) { //鏈接至ashx文件成功時，執行函數 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 //若是data是字符串，則能夠輸出data的值 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" }, error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 //XMLHttpRequest在這個例子裏沒有用到 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" //errorThrown包含鏈接失敗的信息，能夠輸出查看 } });
③傳入後臺加工，返回前臺
1 public void ProcessRequest(HttpContext context) 2 { 3 context.Response.ContentType = "text/plain"; 4 //context.Response.Write("Hello World"); 5 6 string user = context.Request["user"]; 7 string password = context.Request["password"]; 8 9 context.Response.Write("用戶名：" + user + "\n密碼：" + password); 10 11 }
④在前臺顯示輸出
1 $.ajax({ 2 type: "post", //post put get 等等 3 url: "Insert.ashx", 4 data: { //要傳入ashx文件的數據 5 "user": user, 6 "password":password 7 }, 8 success: function (data, textStatus) { 9 //鏈接至ashx文件成功時，執行函數 10 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 11 //若是data是字符串，則能夠輸出data的值 12 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 13 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 14 alert(data); 15 }, 16 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 17 //XMLHttpRequest在這個例子裏沒有用到 18 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 19 //errorThrown包含鏈接失敗的信息，能夠輸出查看 20 } 21 });
查看運行結果：
上面的一個流程就是在前臺獲取值，傳入後臺進行處理操做，再將結果返回前臺。這個原理清楚後，咱們就能夠進行數據庫的訪問操做了。對數據庫的訪問和在aspx中方式同樣，請查看上文aspx訪問數據庫的詳細內容。爲了簡潔，下面也不進行try-catch的設置了，請在上文查看相關內容。
①增
前端：
1 function Insert() { 2 //jQuery寫法 3 var user = $('#iptInsertUser').val(); 4 var password = $('#iptInsertPassword').val(); 5 //JavaScript原生寫法 6 //var user = document.getElementById('iptInsertUser').value; 7 //var password = document.getElementById('iptInsertPassword').value; 8 9 $.ajax({ 10 type: "post", //post put get 等等 11 url: "Insert.ashx", 12 data: { //要傳入ashx文件的數據 13 "user": user, 14 "password":password 15 }, 16 success: function (data, textStatus) { 17 //鏈接至ashx文件成功時，執行函數 18 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 19 //若是data是字符串，則能夠輸出data的值 20 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 21 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 22 alert(data); 23 }, 24 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 25 //XMLHttpRequest在這個例子裏沒有用到 26 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 27 //errorThrown包含鏈接失敗的信息，能夠輸出查看 28 alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown); 29 } 30 }); 31 }
後端：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 using System.Data; 7 using System.Data.SqlClient; 8 9 namespace 先後端數據交互 10 { 11 /// <summary> 12 /// Summary description for Insert 13 /// </summary> 14 public class Insert : IHttpHandler 15 { 16 //數據庫鏈接字符串 17 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString(); 18 19 public void ProcessRequest(HttpContext context) 20 { 21 context.Response.ContentType = "text/plain"; 22 //context.Response.Write("Hello World"); 23 24 string user = context.Request["user"]; 25 string password = context.Request["password"]; 26 27 SqlConnection conn = new SqlConnection(connectionString); 28 conn.Open(); 29 30 SqlCommand cmd = new SqlCommand(); 31 cmd.Connection = conn; 32 cmd.CommandText = "INSERT INTO 用戶表 VALUES('" + user + "','" + password + "')"; 33 34 if (cmd.ExecuteNonQuery() != 0) 35 { 36 context.Response.Write("信息添加成功！\n用戶名：" + user + "\n密碼：" + password); 37 } 38 else 39 { 40 context.Response.Write("信息添加失敗.."); 41 } 42 43 conn.Close(); 44 } 45 46 public bool IsReusable 47 { 48 get 49 { 50 return false; 51 } 52 } 53 } 54 }
②刪
1 function Delete() { 2 //jQuery寫法 3 var user = $('#iptDeleteUser').val(); 4 var password = $('#iptDeletePassword').val(); 5 //JavaScript原生寫法 6 //var user = document.getElementById('iptDeleteUser').value; 7 //var password = document.getElementById('iptDeletePassword').value; 8 9 $.ajax({ 10 type: "post", //post put get 等等 11 url: "Delete.ashx", 12 data: { //要傳入ashx文件的數據 13 "user": user, 14 "password": password 15 }, 16 success: function (data, textStatus) { 17 //鏈接至ashx文件成功時，執行函數 18 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 19 //若是data是字符串，則能夠輸出data的值 20 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 21 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 22 alert(data); 23 }, 24 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 25 //XMLHttpRequest在這個例子裏沒有用到 26 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 27 //errorThrown包含鏈接失敗的信息，能夠輸出查看 28 alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown); 29 } 30 }); 31 }
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 using System.Data; 7 using System.Data.SqlClient; 8 9 namespace 先後端數據交互 10 { 11 /// <summary> 12 /// Summary description for Delete 13 /// </summary> 14 public class Delete : IHttpHandler 15 { 16 //數據庫鏈接字符串 17 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString(); 18 19 public void ProcessRequest(HttpContext context) 20 { 21 context.Response.ContentType = "text/plain"; 22 //context.Response.Write("Hello World"); 23 24 string user = context.Request["user"]; 25 string password = context.Request["password"]; 26 27 SqlConnection conn = new SqlConnection(connectionString); 28 conn.Open(); 29 30 SqlCommand cmd = new SqlCommand(); 31 cmd.Connection = conn; 32 cmd.CommandText = "DELETE FROM 用戶表 WHERE 用戶名='" + user + "' AND 密碼='" + password + "'"; 33 34 if (cmd.ExecuteNonQuery() != 0) 35 { 36 context.Response.Write("刪除信息成功！\n用戶名：" + user + "密碼：" + password); 37 } 38 else 39 { 40 context.Response.Write("刪除信息失敗.."); 41 } 42 43 conn.Close(); 44 } 45 46 public bool IsReusable 47 { 48 get 49 { 50 return false; 51 } 52 } 53 } 54 }
③改
1 function Update() { 2 //jQuery寫法 3 var user = $('#iptUpdateUser').val(); 4 var password = $('#iptUpdatePassword').val(); 5 //JavaScript原生寫法 6 //var user = document.getElementById('iptUpdateUser').value; 7 //var password = document.getElementById('iptUpdatePassword').value; 8 9 $.ajax({ 10 type: "post", //post put get 等等 11 url: "Update.ashx", 12 data: { //要傳入ashx文件的數據 13 "user": user, 14 "password": password 15 }, 16 success: function (data, textStatus) { 17 //鏈接至ashx文件成功時，執行函數 18 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 19 //若是data是字符串，則能夠輸出data的值 20 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 21 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 22 alert(data); 23 }, 24 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 25 //XMLHttpRequest在這個例子裏沒有用到 26 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 27 //errorThrown包含鏈接失敗的信息，能夠輸出查看 28 alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown); 29 } 30 }); 31 }
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 using System.Data; 7 using System.Data.SqlClient; 8 9 namespace 先後端數據交互 10 { 11 /// <summary> 12 /// Summary description for Update 13 /// </summary> 14 public class Update : IHttpHandler 15 { 16 //數據庫鏈接字符串 17 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString(); 18 19 public void ProcessRequest(HttpContext context) 20 { 21 context.Response.ContentType = "text/plain"; 22 //context.Response.Write("Hello World"); 23 24 string user = context.Request["user"]; 25 string password = context.Request["password"]; 26 27 SqlConnection conn = new SqlConnection(connectionString); 28 conn.Open(); 29 30 SqlCommand cmd = new SqlCommand(); 31 cmd.Connection = conn; 32 cmd.CommandText="UPDATE 用戶表 SET 密碼='"+password+"' WHERE 用戶名='"+user+"'"; 33 34 if (cmd.ExecuteNonQuery() != 0) 35 { 36 context.Response.Write("信息更新成功！\n用戶名：" + user + "\n密碼：" + password); 37 } 38 else 39 { 40 context.Response.Write("信息更新失敗.."); 41 } 42 conn.Close(); 43 } 44 45 public bool IsReusable 46 { 47 get 48 { 49 return false; 50 } 51 } 52 } 53 }
④查
1 function Select() { 2 //jQuery寫法 3 var user = $('#iptSelectUser').val(); 4 var password = $('#iptSelectPassword').val(); 5 //JavaScript原生寫法 6 //var user = document.getElementById('iptSelectUser').value; 7 //var password = document.getElementById('iptSelectPassword').value; 8 9 $.ajax({ 10 type: "post", //post put get 等等 11 url: "Select.ashx", 12 data: { //要傳入ashx文件的數據 13 "user": user, 14 "password": password 15 }, 16 success: function (data, textStatus) { 17 //鏈接至ashx文件成功時，執行函數 18 //data是從ashx文件返回來的信息，能夠是字符串也能夠是一個對象 19 //若是data是字符串，則能夠輸出data的值 20 //若是data是對象，則能夠將這個對象的各屬性值賦給其餘變量 21 //textStatus是表示狀態的字符串，這裏textStatus的值是"success" 22 alert(data); 23 }, 24 error: function (XMLHttpRequest, textStatus, errorThrown) { //鏈接至ashx文件失敗時，執行函數 25 //XMLHttpRequest在這個例子裏沒有用到 26 //textStatus是表示狀態的字符串，這裏textStatus的值是"error" 27 //errorThrown包含鏈接失敗的信息，能夠輸出查看 28 alert("請求在鏈接過程當中出現錯誤..\n" + errorThrown); 29 } 30 }); 31 }
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 6 using System.Data; 7 using System.Data.SqlClient; 8 9 namespace 先後端數據交互 10 { 11 /// <summary> 12 /// Summary description for Select 13 /// </summary> 14 public class Select : IHttpHandler 15 { 16 //數據庫鏈接字符串 17 string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString(); 18 19 public void ProcessRequest(HttpContext context) 20 { 21 context.Response.ContentType = "text/plain"; 22 //context.Response.Write("Hello World"); 23 24 string user = context.Request["user"]; 25 string password = context.Request["password"]; 26 27 SqlConnection conn = new SqlConnection(connectionString); 28 conn.Open(); 29 30 SqlCommand cmd = new SqlCommand(); 31 cmd.Connection = conn; 32 cmd.CommandText = "SELECT 密碼 FROM 用戶表 WHERE 用戶名='" + user + "'"; 33 34 if (cmd.ExecuteScalar() != null) 35 { 36 password = cmd.ExecuteScalar().ToString(); 37 context.Response.Write("密碼是："+password); 38 } 39 else 40 { 41 context.Response.Write("查詢失敗"); 42 } 43 44 conn.Close(); 45 } 46 47 public bool IsReusable 48 { 49 get 50 { 51 return false; 52 } 53 } 54 } 55 }
ajax中還有兩個經常使用的參數：①cache，設置是否緩存，值是ture或false ②async，設置是否異步，值是true或false。我對這兩個參數不是很理解，若是上面的例子中遇到了問題，能夠更改這兩個屬性的值。兩個參數默認爲true。
例子使用工程文件的分享連接（Visual Studio 2017）：https://pan.baidu.com/s/103szwksgL3DwYHm1Fgxvig
- 1. 【javaWeb】先後端傳遞數據交互的兩種方式
- 2. 先後端數據交互方法
- 3. 一種安全的先後端數據交互方案
- 4. 實現先後端數據交互的方法
- 5. go框架bee先後端數據交互的幾種方式
- 6. 先後端數據交互
- 7. 先後端交互，API數據交互
- 8. 先後端傳值交互方法
- 9. 先後端數據交互的幾個方法
- 10. 一種安全的前後端數據交互方案
- 更多相關文章...
- • Spring實例化Bean的三種方法 - Spring教程
- • Mybatis實現映射器的2種方式 - MyBatis教程
- • SpringBoot中properties文件不能自動提示解決方法
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 【javaWeb】先後端傳遞數據交互的兩種方式
- 2. 先後端數據交互方法
- 3. 一種安全的先後端數據交互方案
- 4. 實現先後端數據交互的方法
- 5. go框架bee先後端數據交互的幾種方式
- 6. 先後端數據交互
- 7. 先後端交互，API數據交互
- 8. 先後端傳值交互方法
- 9. 先後端數據交互的幾個方法
- 10. 一種安全的前後端數據交互方案