asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

Posted 2020-12-17 江南-烟雨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了asp.net 利用Ajax和Jquery在前台向后台传参数并返回值相关的知识，希望对你有一定的参考价值。

方案一直接调用后台

 1 <script src="js/jquery-1.9.1.js" type="text/javascript"></script>
 2     
 3 <script type="text/javascript">
 4 
 5         $(function () {
 6 
 7             $(‘#txtUserName‘).blur(function () {
 8 
 9                 var username = $(this).val();
10 
11                 $.ajax({
12 
13                     type: "post",
14 
15                     contentType: "application/json",//传值的方式
16 
17                     url: "WebAjaxForMe.aspx/GetValueAjax",//WebAjaxForMe.aspx为目标文件，GetValueAjax为目标文件中的方法
18 
19                     data: "{username:‘" + username + "‘}",//username 为想问后台传的参数（这里的参数可有可无）
20 
21                     success: function (result) {
22 
23                         alert(result.d);//result.d为后台返回的参数
24 
25                     }
26 
27                 })
28 
29             })
30 
31         })
32 
33     </script>
34 
35   //这里是参数的来源
36 
37    <input id="txtUserName" type="text" />

1 [WebMethod]//方法前边必须添加 [WebMethod]       
2 
3 public static string GetValueAjax(string username)//这个方法需要是静态的方法要用到关键字static        
5 {
6    //在这里可以对传进来的参数进行任何操作            
7 　　return username;     
8 }

方案二一般处理程序

 1  <%--引入JQuery--%>
 2      <script src="js/jquery-2.1.1.min.js"></script>
 3 
 4      <%--使用AJAX向一般处理程序传递参数，调用函数--%>
 5      <script type="text/javascript">
 6          $(function () {
 7               <%--当txtYiBan失去焦点的时候触发--%>
 8              $(‘#txtYiBan‘).blur(function () {
 9                  var username = $(this).val();
10                  $.ajax({
11                      type: "GET",
12                      url: "ajaxtest.ashx?json=" + username,//ajaxtest.ashx为目标文件
13                      dataType: "text",
14                      success: function (result) {
15                          alert(result.d);//result.d为后台返回的参数
16                      }
17                  })
18              })
19          })
20     </script>
21 
22 <input id="txtYiBan" type="text" />

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Services;
 6 using System.Web.SessionState;
 7 
 8 namespace aspAjaxTest
 9 {
10     /// <summary>
11     /// ajaxtest 的摘要说明
12     /// </summary>
13     [WebService(Namespace = "http://tempuri.org/")]
14     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
15     public class ajaxtest : IHttpHandler
16     {
17         HttpContext Context;
18         /// <summary>
19         /// 获取传的值,并调用其他的方法
20         /// </summary>
21         /// <param name="context"></param>
22         public void ProcessRequest(HttpContext context)
23         {
24             Context = context;
25             context.Response.Clear();
26             context.Response.ContentType = "text/html; charset=utf-8";
27             //获取传来的值
28             string methodName = GetQueryString("json");
29 
30             //可以调用其他方法------看下文
31         }
32         /// <summary>
33         /// 获取传的值
34         /// </summary>
35         /// <param name="name"></param>
36         /// <returns></returns>
37         string GetQueryString(string name)
38         {
39             //获取传的值
40             return Context.Request.Params[name];
41         }
42 
43         public bool IsReusable
44         {
45             get
46             {
47                 return false;
48             }
49         }
50     }
51 }

在aspx的后台可以用如下的方式来捕获参数：

　　workstateValue = Request.QueryString["workstateValue"];

在一般处理程序中可以用：

　　return Context.Request.Params[name];

JQuery在asp.net中三种ajax传值

1）通过webservice，注意去掉注释[System.Web.Script.Services.ScriptService]这行前的注释

2）通过aspx.cs文件中的静态方法

3）通过aspx文件url

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="asp.net.WebForm1" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml">
 5 <head runat="server">
 6     <title></title>
 7     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 8     <script type="text/javascript">
 9         function Ws() {
10             $.ajax({
11                 type: "POST",
12                 contentType: "application/json; charset=utf-8",
13                 url: "WebService1.asmx/HelloWorld2",
14                 data: "{name:‘xiaoxiao‘}",
15                 dataType: ‘json‘,
16                 success: function (result) {
17                     alert(result.d);
18                 }
19             });
20         }
21         function StaticMethod() {
22             $.ajax({
23                 type: "POST",
24                 contentType: "application/json; charset=utf-8",
25                 url: "aspxpage.aspx/SayHello2",
26                 data: "{name:‘xiaoxiao‘}",
27                 dataType: ‘json‘,
28                 success: function (result) {
29                     alert(result.d);
30                 }
31             });
32 
33         }
34         function FromPage() {
35             $.ajax({
36                 type: "POST",
37                 contentType: "application/json; charset=utf-8",
38                 url: "dataContent.aspx?nowtime=‘" + new Date() + "‘",
39                 data: "{}",
40                 dataType: ‘html‘,
41                 success: function (result) {
42                     alert(result);
43                 }
44             });
45 
46         }
47 
48     </script>
49 </head>
50 <body>
51     <form id="form1" runat="server">
52      
53     <div>
54         <input id="Button1" type="button" value="jquery调用WebService" onclick="Ws()" />
55     </div>
56     <div>
57         <input id="Button2" type="button" value="jquery调用aspx页面静态方法" onclick="StaticMethod()" />
58     </div>
59     <div>
60         <input id="Button3" type="button" value="jquery通过page存储值" onclick="FromPage()" />
61     </div>
62     </form>
63 </body>
64 </html>

前台code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Services;
 6 
 7 namespace asp.net
 8 {
 9     /// <summary>
10     /// WebService1 的摘要说明
11     /// </summary>
12     [WebService(Namespace = "http://tempuri.org/")]
13     [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
14     [System.ComponentModel.ToolboxItem(false)]
15     // 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。
16      [System.Web.Script.Services.ScriptService]
17     public class WebService1 : System.Web.Services.WebService
18     {
19 
20         [WebMethod]
21         public string HelloWorld()
22         {
23             return "Hello World"+System.DateTime.Now.ToLongTimeString();
24         }
25 
26         [WebMethod]
27         public string HelloWorld2(string name)
28         {
29             return "Hello World" + name + System.DateTime.Now.ToLongTimeString();
30         }
31     }
32 }

webservice中code

 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 using System.Web.Services;
 8 
 9 namespace asp.net
10 {
11     public partial class aspx页面代替ws : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15            
16         }
17         [WebMethod] 
18         public static string SayHello()
19         {
20             return "Hello";
21         }
22 
23         [WebMethod]
24         public static string SayHello2(string name)
25         {
26             return "Hello"+name;
27         }
28     }
29 }

aspx.cs中code

 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 using System.IO;
 8 
 9 namespace asp.net
10 {
11     public partial class dataContent : System.Web.UI.Page
12     {
13         protected void Page_Load(object sender, EventArgs e)
14         {
15             Response.Clear();
16             Page.ViewStateMode = ViewStateMode.Disabled;
17             if (Request.QueryString["nowtime"] != null)
18             {
19                 string stime = Request.QueryString["nowtime"].ToString();
20                 Response.Write(stime);
21             }
22             Response.Flush();
23           
24         }
25     }
26 }

用url传值通过aspx页面保存数据

以上是关于asp.net 利用Ajax和Jquery在前台向后台传参数并返回值的主要内容，如果未能解决你的问题，请参考以下文章

Asp.net中ajax调用后台方法

asp.net jquery ajax post 后台页面获取不到值怎么解决？

Asp.net mvc 使用Ajax调用Action 返回数据。

asp.net mvc 使用Ajax调用Action 返回数据

使用 jQuery $.ajax 进行 ASP.NET MVC 验证

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

方案一 直接调用后台

方案二 一般处理程序

JQuery在asp.net中三种ajax传值

方案一直接调用后台

方案二一般处理程序