欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

程序员文章站 2022-05-13 22:01:22
asp.net方案与数据库交互的两种方式。1.aspx文件基于事件响应机制的前后端数据交互 2.HTML+ashx通过ajax技术进行前后端数据交互 ......

一个html页面只能显示html代码信息,不能与数据库进行数据的交互。asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术

 

一、创建数据库

  这里以sql server数据库为例,打开ssms,创建一个数据库,注意数据库的保存路径,后面要将数据库复制到visual studio的工程项目中。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  打开visual studio,创建一个基于.net framework的空项目(不创建.net core项目)。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 

  在右侧的solution explorer(解决方案管理器)下只显示出这么几个文件。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  右键项目,选择add-add asp.net folder-app_data。这个文件夹就是存放数据库的文件夹,注意它的名字不能改变,只能是app_data。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  在ssms中将数据库分离。找到刚才创建的数据库的路径,复制。如果出现权限的错误不能复制,右键数据库-属性-安全,更改权限为完全控制。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 

  将authenticated user的权限更改为完全控制。如果权限还是错误,将其他用户的权限也更改为完全控制。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 

  复制mdf和ldf文件,在visual studio的app_data文件夹下粘贴。(如果有ndf数据库文件,一起复制)。打开app_data文件夹下的数据库,如果visual studio的版本和sql server的版本不兼容,则会出现这个错误。当前visual studio的版本是2017,sql server的版本也是2017。在别人的电脑上用低版本的sql server创建数据库,然后复制到我们自己的电脑上即可。这里更换一个低版本的数据库。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  双击数据库,在server explorer管理器中,右键table,创建一个新的数据表,添加相应字段值,为用户名添加主键。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 

 

  二、aspx文件实现前后端数据交互

  右键项目,添加一个webform,后缀名为.aspx。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  aspx文件的语法与普通的html文件不同,它使用的控件名字前会加上asp,如:asp:button。aspx文件涉及很多方面的知识,具体信息请查看:。将一个普通个html文件的代码直接复制到aspx文件中,是可以运行的。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  打开web.config文件,在<configuration></configuration>标签内添加数据库连接信息。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

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)到设计视图时,代码视图会自动地添加相应代码;同样,在代码视图中写上代码,在布局视图中会出现相应的控件。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  aspx文件的后端代码分成了两部分,一个是*.aspx.cs文件,一个是*.aspx.designer.cs文件。两个文件其实是同一个类,用partial关键字分成了两个分部类。在.*aspx.designer.cs文件中,包含的是每一个控件的字段声明。在asp.net中,webform里每一种控件都是一个类,具体的添加的控件是相应类的一个个实例。比如button是一个类,拖拽一个button到布局视图中,这个button就是button类的一个实例。如果再拖拽一个button,则第二个拖拽的button是第二个实例,两个button名字不同。在*.aspx.cs文件中存放的是相应控件的事件响应函数。这样就实现了字段与响应函数的分离,结构更合理。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  添加控件,设计一个增删改查的页面。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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文件页面设计代码

 

  下面进行增删改查的设置。

  ①增

  双击“确认添加”按钮,编写事件响应函数。事件响应函数的意思是,当点击这个按钮时,会发生什么事情,发生的这个事情就写在事件响应函数里。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  添加两个命名空间。

1 using system.data;
2 using system.data.sqlclient;

  为了调试方便,引入system.windows.forms命名空间,并在solution explorer(解决方案管理器)中右键reference添加相应的引用。这是为了使用messagebox.show()方法弹出提示框。

   两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  在webform1类的开头添加字段,包含数据库连接字符串的信息。字段名connectionstring是任取的,后面会用到。system.configurationmanager.connectionstring["connectionstring"].tostring()中,connectionstring是之前在web.config文件中设置的。

1         //数据库连接字符串
2         string connectionstring = system.configuration.configurationmanager.connectionstrings["connectionstring"].tostring();

  这是添加之后的后端代码。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  编写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();

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

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

     两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    4°设置好了cmd.commandtext的内容后,要让cmd对象执行它所包含的操作。常用的函数有3个,它们都执行cmd的内容,但返回值不同,适用于不同的场合。可以根据这些特点进行执行成功与否的判断、数据的展示、注册登录的设计等。

    ①cmd.executenonquery()

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    executenonquery()在执行完cmd命令后返回受影响的行数。注意这里受影响的行数不包括查询出来的行数,比如insert、delete、update一条信息后,受影响的行数是1,但select一条信息后,受影响的行数是0.

    ②cmd.executereader()

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    executereader()在执行完cmd命令后会返回一个datareader对象,提供了hasrows等属性和read()等方法。hasrows判断datareader对象所对应的,executereader()所执行的cmd命令后返回的结果集中有无行数。如果cmd命令执行后返回的结果集不空,则hasrows为true,否则为false。read()方法提供了datareader对象逐行访问结果集的方式。

    ③cmd.executescalar()

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    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 }

    运行后查看结果:

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    打开数据库,可以看到数据已经被写入。

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  下面进行删改查,大体框架都是一样的,只是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()的返回值。

  运行结果:

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  上面已经实现了数据的增删改查,但是没有进行相应的安全设置。很多情况下会出现错误,比如添加信息时用户名重复、查询数据时用户名并不存在、cmd命令中sql语句书写错误等等。这些问题的出现都是由于cmd.executenonquery()、cmd.executereader()、cmd.executescalar()导致的,即不能正确执行cmd命令所对应的sql语句。所以应该在代码中使用c#的try-catch语法进行相应的安全设置。

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  下面进行相应的设置。

  ①增

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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查看错误信息,但这里不能这样设置。没有找到解决方法。

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  ②查

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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的设置后,当发生错误时就会被捕捉到,弹出对话框,输出“执行命令时发出现错误!”。

   两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

 

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

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  下面首先编写添加信息的ashx文件及ajax。

  右键项目,添加generichandler(一般处理程序)。

   两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  这是ashx文件的初始内容。isrusable属性设置这个ashx文件能否被多个请求访问,我没有这样试过,这个例子里就不进行更改了。processrequest()是主要写代码的地方,参数context是从前台传过来的参数,包含前台传入的信息。在processrequest()中使用context.request["variable"]就可以获取从前台传过来的变量名为variable的值;同样地,context.response.write("...")就可以将一些信息写到前台。context.response.contenttype="text/plain"是返回信息的编码方式。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  这里有个小提示,如果创建完ashx文件后想要更改它的文件名,需要在3个地方进行修改。①解决方案资源管理器右键重命名ashx文件 ②ashx文件中更改类名 ③右键ashx文件-view markup,进行更改。

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

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

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

  下面实现的功能是:获取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             });

     查看运行结果:

    两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    上面的一个流程就是在前台获取值,传入后台进行处理操作,再将结果返回前台。这个原理清楚后,我们就可以进行数据库的访问操作了。对数据库的访问和在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 }

 

    ②删

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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         }
两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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 }

 

    ③改

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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         }
两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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 }

 

    ④查

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
 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是表示状

                    
                
(0)
打赏 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax) 微信扫一扫

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
验证码: 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)