兩種方法實現asp.net方案的前后端數據交互（aspx文件、html+ashx+ajax）

本文轉載自查看原文 2018-09-30 23:56 11668 asp.net/ 數據庫/ WebGIS

一個HTML頁面只能顯示HTML代碼信息，不能與數據庫進行數據的交互。asp.net方案提供了網頁與數據庫交互的方法，這里舉出兩種：①aspx文件 ②ashx文件+ajax技術

一、創建數據庫

　　這里以SQL Server數據庫為例，打開SSMS，創建一個數據庫，注意數據庫的保存路徑，后面要將數據庫復制到Visual Studio的工程項目中。

　　創建數據庫

　　打開Visual Studio，創建一個基於.NET Framework的空項目（不創建.NET Core項目）。

　　創建一個基於.NET Framework的空項目

　　在右側的Solution Explorer（解決方案管理器）下只顯示出這么幾個文件。

　　解決方案文件夾下的內容

　　右鍵項目，選擇Add-Add ASP.NET Folder-App_Data。這個文件夾就是存放數據庫的文件夾，注意它的名字不能改變，只能是App_Data。

　　添加App_Data文件夾

　　在SSMS中將數據庫分離。找到剛才創建的數據庫的路徑，復制。如果出現權限的錯誤不能復制，右鍵數據庫-屬性-安全，更改權限為完全控制。

　　復制數據庫

　　將Authenticated User的權限更改為完全控制。如果權限還是錯誤，將其他用戶的權限也更改為完全控制。

　　更改數據庫屬性1

　　復制mdf和ldf文件，在Visual Studio的App_Data文件夾下粘貼。（如果有ndf數據庫文件，一起復制）。打開App_Data文件夾下的數據庫，如果Visual Studio的版本和SQL Server的版本不兼容，則會出現這個錯誤。當前Visual Studio的版本是2017，SQL Server的版本也是2017。在別人的電腦上用低版本的SQL Server創建數據庫，然后復制到我們自己的電腦上即可。這里更換一個低版本的數據庫。

　　數據庫與Visual Studio的版本不兼容

　　雙擊數據庫，在Server Explorer管理器中，右鍵Table，創建一個新的數據表，添加相應字段值，為用戶名添加主鍵。

　　創建新表

　　創建新表2

　　二、aspx文件實現前后端數據交互

　　右鍵項目，添加一個WebForm，后綴名為.aspx。

　　添加一個WebForm

　　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文件中，是可以運行的。

　　 aspx文件

　　打開Web.config文件，在<configuration></configuration>標簽內添加數據庫連接信息。

　　在Webconfig文件中添加數據庫連接信息

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文件的后端代碼分成了兩部分，一個是*.aspx.cs文件，一個是*.aspx.designer.cs文件。兩個文件其實是同一個類，用partial關鍵字分成了兩個分部類。在.*aspx.designer.cs文件中，包含的是每一個控件的字段聲明。在asp.net中，WebForm里每一種控件都是一個類，具體的添加的控件是相應類的一個個實例。比如Button是一個類，拖拽一個Button到布局視圖中，這個Button就是Button類的一個實例。如果再拖拽一個Button，則第二個拖拽的Button是第二個實例，兩個Button名字不同。在*.aspx.cs文件中存放的是相應控件的事件響應函數。這樣就實現了字段與響應函數的分離，結構更合理。

　　 aspx文件的后端代碼

　　添加控件，設計一個增刪改查的頁面。

　　 aspx文件頁面設計

　　 aspx文件頁面設計代碼　

 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 &nbsp;
21         <asp:Label ID="Label2" runat="server" Text="密碼："></asp:Label>
22         <asp:TextBox ID="tbxInsertPassword" runat="server"></asp:TextBox>
23 &nbsp;
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 &nbsp;
32         <asp:Label ID="Label6" runat="server" Text="密碼："></asp:Label>
33         <asp:TextBox ID="tbxDeletePassword" runat="server"></asp:TextBox>
34 &nbsp;
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 &nbsp;
43         <asp:Label ID="Label5" runat="server" Text="密碼："></asp:Label>
44         <asp:TextBox ID="tbxUpdatePassword" runat="server"></asp:TextBox>
45 &nbsp;
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 &nbsp;
54         <asp:Label ID="Label8" runat="server" Text="密碼："></asp:Label>
55         <asp:TextBox ID="tbxSelectPassword" runat="server"></asp:TextBox>
56 &nbsp;
57         <asp:Button ID="btnSelect" runat="server" Text="確認查詢" />
58     </form>
59 </body>
60 </html>

aspx文件頁面設計代碼

　　下面進行增刪改查的設置。

　　①增

　　雙擊“確認添加”按鈕，編寫事件響應函數。事件響應函數的意思是，當點擊這個按鈕時，會發生什么事情，發生的這個事情就寫在事件響應函數里。

　　雙擊確認添加按鈕，進入后台代碼編寫事件響應函數

　　編寫事件響應函數

　　添加兩個命名空間。

1 using System.Data;
2 using System.Data.SqlClient;

　　為了調試方便，引入System.Windows.Forms命名空間，並在Solution Explorer（解決方案管理器）中右鍵Reference添加相應的引用。這是為了使用MessageBox.Show()方法彈出提示框。

　　添加System.Windows.Forms引用

　　在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();

　　　　 SqlConnection類

　　　　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 + "')";

　　　　 SqlCommand

　　　　4°設置好了cmd.CommandText的內容后，要讓cmd對象執行它所包含的操作。常用的函數有3個，它們都執行cmd的內容，但返回值不同，適用於不同的場合。可以根據這些特點進行執行成功與否的判斷、數據的展示、注冊登錄的設計等。

　　　　①cmd.ExecuteNonQuery()

　　　　 ExecuteNonQuery

　　　　ExecuteNonQuery()在執行完cmd命令后返回受影響的行數。注意這里受影響的行數不包括查詢出來的行數，比如INSERT、DELETE、UPDATE一條信息后，受影響的行數是1，但SELECT一條信息后，受影響的行數是0.

　　　　②cmd.ExecuteReader()

　　　　 ExecuteReader

　　　　 SqlDataReader

　　　　ExecuteReader()在執行完cmd命令后會返回一個DataReader對象，提供了HasRows等屬性和Read()等方法。HasRows判斷DataReader對象所對應的，ExecuteReader()所執行的cmd命令后返回的結果集中有無行數。如果cmd命令執行后返回的結果集不空，則HasRows為true，否則為false。Read()方法提供了DataReader對象逐行訪問結果集的方式。

　　　　③cmd.ExecuteScalar()

　　　　 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

　　　　錯誤2

　　　　錯誤3

　　下面進行相應的設置。

　　①增

 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查看錯誤信息，但這里不能這樣設置。沒有找到解決方法。

　　　　不能設置Exception e

　　②查

 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的設置后，當發生錯誤時就會被捕捉到，彈出對話框，輸出“執行命令時發出現錯誤！”。

　　執行命令時出現錯誤

三、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>

　　 HTML頁面設計

　　下面首先編寫添加信息的ashx文件及ajax。

　　右鍵項目，添加GenericHandler（一般處理程序）。

　　添加GenericHandler

　　這是ashx文件的初始內容。IsRusable屬性設置這個ashx文件能否被多個請求訪問，我沒有這樣試過，這個例子里就不進行更改了。ProcessRequest()是主要寫代碼的地方，參數context是從前台傳過來的參數，包含前台傳入的信息。在ProcessRequest()中使用context.Request["variable"]就可以獲取從前台傳過來的變量名為variable的值；同樣地，context.Response.Write("...")就可以將一些信息寫到前台。context.Response.ContentType="text/plain"是返回信息的編碼方式。

　　 Insert.ashx

　　這里有個小提示，如果創建完ashx文件后想要更改它的文件名，需要在3個地方進行修改。①解決方案資源管理器右鍵重命名ashx文件 ②ashx文件中更改類名 ③右鍵ashx文件-View Markup，進行更改。

　　 ashx文件的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文件中返回的信息。

　　輸出Hello World

　　彈出框顯示HelloWorld

　　下面實現的功能是：獲取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             });

　　　　查看運行結果：

　　　　前后台交互結果1

　　　　上面的一個流程就是在前台獲取值，傳入后台進行處理操作，再將結果返回前台。這個原理清楚后，我們就可以進行數據庫的訪問操作了。對數據庫的訪問和在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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Echarts 使用asp.net +ashx+ajax 實現餅圖、柱形圖后台交互 ASP.NET前台html頁面AJAX提交數據后台ashx頁面接收數據 asp、asp.net、.aspx、.ascx、.ashx的簡單說明 Asp.Net WebForm 完美登錄的兩種方法 ASP.NET中GridView控件刪除數據的兩種方法 Jquery ajax與asp.net MVC前后端各種交互 ASP.NET Core 1.0中實現文件上傳的兩種方式（提交表單和采用AJAX） ASP.NET使用EasyUI-DataGrid + ashx + JQuery Ajax：實現數據的增刪查改，查詢和分頁！ ASP.net與SQLite數據庫通過js和ashx交互（連接和操作） ASP.NET -- WebForm -- .aspx與.aspx.cs文件