码迷,mamicode.com
首页 > Web开发 > 详细

Jquery Ajax调用aspx页面实例

时间:2014-11-16 23:04:01      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   sp   for   

目前,我会的几种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;

 

Jquery Ajax调用aspx页面实例

标签:style   blog   http   io   color   ar   os   sp   for   

原文地址:http://www.cnblogs.com/renzaijianghu/p/4102578.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!