Jquery Ajax调用aspx页面实例

浏览数：47 / 时间：2015年06月09日

目前，我会的几种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://cdn.renzaijianghu.com/Static/Script/jquery-1.9.1.js"></script>
    <script src="http://cdn.renzaijianghu.com/Static/Script/Json2.js"></script>
    <script src="../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 = 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;

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class style 代码 src html com log 数据 http class style 代码 src html com log 数据 http

相关文章

随机文章

您可能还喜欢

您可能还喜欢