首页 > 代码库 > Jquery Ajax调用aspx页面实例

Jquery Ajax调用aspx页面实例

目前,我会的几种asp.net界面与后台代码交互方式有几种:

1、webform+服务器控件交互;

2、webform+jquery+ajax+一般处理程序交互;

3、webform+jquery+ajax+Webservice/WCF交互;

4、MVC;

5、webform+jquery+ajax直接交互;

其中第1种交互是入门级,发展级为第2与第3,交互方式类似,也是我常用的开发方式。第4种最近几年才出现,玩过,用于项目比较少。

现在记录一下第5种交互方式。

第一步:准备页面代码;

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title></head><body>    <form id="form1" runat="server">        <div>            <asp:Button ID="btn" runat="server" Text="验证用户" />            <asp:Button ID="btn1" runat="server" Text="验证用户1" />        </div>    </form>    <script src=http://www.mamicode.com/"http://cdn.renzaijianghu.com/Static/Script/jquery-1.9.1.js"></script>    <script src=http://www.mamicode.com/"http://cdn.renzaijianghu.com/Static/Script/Json2.js"></script>    <script src=http://www.mamicode.com/"../Static/Script/Core.js"></script>    <script>        $(function () {            //调用不含参方法            $("#btn").click(function () {                var url = JHSoft.currentURL + "/GetStr";                $.ajax({                    type: "post", //要用post方式                      async: false,                    url: url,//方法所在页面和方法名                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    success: function (data) {                        alert(data.d);//返回的数据用data.d获取内容                    },                    error: function (err) {                        alert(err);                    }                });            });            //调用含参方法            $("#btn1").click(function () {                var url = JHSoft.currentURL + "/GetData";                var data = http://www.mamicode.com/new Object();                data["str"] = "我是";                data["str2"] = "XXX";                $.ajax({                    type: "post", //要用post方式                                     url: url,//方法所在页面和方法名                    contentType: "application/json; charset=utf-8",                    dataType: "json",                    data: JSON2.stringify(data), //Json序列化                    success: function (data) {                        alert(data.d);//返回的数据用data.d获取内容                    },                    error: function (err) {                        alert(err);                    }                });            });        });    </script></body></html>

第二步:准备.cs后台代码;

using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web;using System.Web.Services;  //引用命名空间namespace JHSoft.Ed2k.UILogic{    public class TorrentDownload : System.Web.UI.Page    {        protected void PageLoad(object sender, EventArgs e)        {        }                [WebMethod]         //必须加标记及声明static        public static string GetStr()        {                      return "HelloWorld!";        }               [WebMethod]        public static string GetData(string str, string str2)        {            return str + str2;        }    }}

第三步:Core.js代码

var JHSoft = JHSoft || {};//当前页面JHSoft.currentURL = document.URL;

 

Jquery Ajax调用aspx页面实例