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://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;
时间: 2024-10-23 15:36:31

Jquery Ajax调用aspx页面实例的相关文章

jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是"application/json", (3)data传递的数据必须是严格的json数据,如"{'a':'aa','b':'bb'}",而且参数必须和静态方法的参数一 一对应 (4)aspx的后台方法返回的数据默认形式是"{'d':'返回的内容'}",所

Jquery Ajax调用aspx页面方法

原文:Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进行处理: 3)文艺玩法:通过WCF进行处理. 第一种和第三种方法不在本文介绍范围之内,下面重点介绍第二种方法. 说明 在我们的印象里 asp.net的Web服务是以.asmx来结尾的,而我们现在的asp.net也能实现Web服务,这是因为默认Web.

Jquery ajax调用后台aspx后台文件方法(不是ashx)

在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

jQuery Ajax: $.post请求实例

jQuery Ajax: $.post请求实例 leyangjun.html页面 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-2.0.0.min.js"></scri

jQuery Ajax向某个页面传值并取得返回的数组

本案例讲诉通过Ajax向某个PHP页面传值,并将得到的数组通过json_encode()函数处理,然后返回给ajax,下面是在实际案例摘取的部分代码: PHP页面 public function showChatName(){ $chat = A('Article','Event'); $res = $chat->selectName(I('get.channel')); echo json_encode($res); } 数组$res经过json_encode处理后的输出形式 {"cha

jquery ajax调用返回json格式数据处理

Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: false }).responseText; 返回json数组取条数用result.length <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"

JQuery ajax调用asp.net的webMethod

在vs2010中,用JQuery ajax调用asp.net 2.0的  webMethod 方法时,怎么都调不出来,原来和3.5 有点出入. 3.5中,无需特殊设置,可以直接用$.ajax调用在aspx.cs中,访问级别public,静态的,标记为[webmethod]的方法. aspx.cs: using System.Web.Services; [WebMethod] public static string PollCount() { …… return getResultHTML(ds

Jquery(Ajax) 调用 SharePoint 2013 Search Rest API 并使用Josn反回结果并简单显示

Jquery(Ajax) 调用 SharePoint 2013 Search Rest API 并使用Josn反回结果并简单显示 2013年01月05日 21:51:43 天涯海角 阅读数 4970 文章标签: Josn反回结果并简单显示JqueryAjaxPostQuerySearch Rest APISharePoint 2013 更多 分类专栏: SharePoint JavaScript 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明.