1. 最原始的ajax请求方式

(1). get请求

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="ajax_AjaxDemo" %>

<!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>

    <script src="../js/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnGetDate").click(function () {

                //开始通过AJAX向服务器发送请求.

                var xhr;

                if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器

                    xhr = new XMLHttpRequest();

                } else {// 低IE

                    xhr = new ActiveXObject("Microsoft.XMLHTTP");

                }

                xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);

                xhr.send();//开始发送

                //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。

                xhr.onreadystatechange = function () {

                    if (xhr.readyState == ) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。

                        if (xhr.status == ) {//判断响应状态码是否为200.

                            alert(xhr.responseText);

                        }

                    }

                }

            });

        });

    </script>

</head>

<body>

    <form id="form1"  runat="server">

    <div>

    <input type="button" value="获取服务端时间" id="btnGetDate" />

    </div>

    </form>

</body>

</html>

(2). post请求

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxPostDemo.aspx.cs" Inherits="ajax_AjaxPostDemo" %>

<!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>

    <script src="../js/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnPost").click(function () {

                var xhr;

                if (XMLHttpRequest) {

                    xhr = new XMLHttpRequest();

                } else {

                    xhr = new ActiveXObject("Microsoft.XMLHTTP");

                }

                xhr.open("post", "GetDate.ashx", true);

                //                      表示想服务端发送的请求都放在请求报文体中，并且以下面的形式发送出去

                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

                xhr.send("name=zhangsan&pwd=123");

                xhr.onreadystatechange = function () {

                    if (xhr.readyState == ) {

                        if (xhr.status == ) {

                            alert(xhr.responseText);

                        }

                    }

                }

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server" >

    <div>

    <input type="button" value="获取数据" id="btnPost" />

    </div>

    </form>

</body>

</html>

(3). 请求的公共ashx文件

<%@ WebHandler Language="C#" Class="GetDate" %>

using System;

using System.Web;

 public class GetDate : IHttpHandler

    {

        public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            //                       context.requrest该方法会自动判断请求的方式是get还是post

            context.Response.Write(context.Request["name"]);

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

(4) .通过Jquery请求Ajax的方式

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryAjax.aspx.cs" Inherits="ajax_JqueryAjax" %>

<!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>

    <script src="../js/jquery-1.7.1.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#btnGet").click(function () {                            //回调函数

                $.get("GetDate.ashx", { "name": "lisi", "pwd": "" }, function (data) {

                    alert(data)

                });

            });

            $("#btnPost").click(function () {

                $.post("GetDate.ashx", { "name": "lisi", "pwd": "" }, function (data) {

                    alert(data)

                })

            });

            $("#btnAjax").click(function () {

                $.ajax({

                    type: "POST",   //请求类型

                    url: "GetDate.ashx",   //请求地址

                    data: "name=John&location=Boston",   //请求参数

                    success: function (msg) {     //回调函数

                        alert("Data Saved: " + msg);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

    <input type="button" value="GET获取数据" id="btnGet" />

        <input type="button" value="POST获取数据" id="btnPost" />

        <input type="button" value="AJAX获取数据" id="btnAjax" />

    </div>

    </form>

</body>

</html>

(5). serializeArray方法的使用

//将对象转成json对象传递给后端

$("button").click(function(){

        var par =$("form表单id的值").serializeArray();

        });

Ajax_请求get，post案例的更多相关文章

  1. Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  2. postman发送json请求，使用案例

    介绍:  postman是一个很好的http模拟器,,可以发送get.post.put等各种请求,是测试服务接口相当好的工具. postman发送json请求,使用案例 发送json的具体步骤: 1. ...

  3. asp.net——Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  4. Spring框架系列(5) - 深入浅出SpringMVC请求流程和案例

    前文我们介绍了Spring框架和Spring框架中最为重要的两个技术点(IOC和AOP),那我们如何更好的构建上层的应用呢(比如web 应用),这便是SpringMVC:Spring MVC是Spri ...

  5. ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  6. Flask web开发 处理POST请求（登录案例）

    本文我们以一个登录例子来说明Flask对 post请求的处理机制. 1.创建应用目录,如 mkdir   example cd example 2.在应用目录下创建  run.py文件,内容如下 fr ...

  7. jQuery实例之ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  8. 接口测试中三种传参请求（Map、request、Integer）解析

    注册企业接口传入的是一个request,查询企业接口传入的是一个integer:根据名称和国家名称模糊匹配接口传入的是一个Map:针对三种不同的传参我怎么作接口测试呢? 1 package com.w ...

  9. 第4章 TCP/IP通信案例:访问Internet上的Web服务器

    第4章 TCP/IP通信案例:访问Internet上的Web服务器 4.2 部署代理服务器 书中为了演示访问Internet上的Web服务器的全过程,使用了squid代理服务器程序模拟了一个代理服务器 ...

随机推荐

  1. @Entity 和 @Table

    Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库.这些普通Java对象被称作Entity Bean.除了是用Java Persis ...

  2. SVN更新无数次后仍显示Out of date

    理器相集成的TortoiseSVN更是方便. 但有时候在提交修改后的文件时,却莫名其妙的出现out of date错误,导致工程无法commit,即使将新文件删了重新update,然后再在旧文件上作修 ...

  3. 在见证了1000多家公司的兴衰灭亡之后，YC创始合伙人总结了创业公司的6个不死法则（转）

    今天,我想先说一下个人消息.在 YC 工作了 11 年之后,我明年想去休假.我希望把精力放在一些项目上,说实话,我有点累了. YC 是这世界上我最喜欢的事情之一,但它也很费精力. 11 年不间断的耗费 ...

  4. DevExpress GridControl使用方法总结2

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 (1).gridView.AddN ...

  5. Merge git repo into branch of another repo

    git 两个repo merge You can't merge a repository into a branch. You can merge a branch from another rep ...

  6. 20180307-Xen、KVM、VMware、hyper-v等虚拟化技术的比较

    xen和kvm,是开源免费的虚拟化软件. vmware是付费的虚拟化软件. hyper-v比较特别,是微软windows 2008 R2附带的虚拟化组件,如果你买了足够的授权,hyper-v(包括hy ...

  7. Codeforces Round #481 (Div. 3)题解

    成功掉到灰,真的心太累了,orz!!!!,不是很懂那些国外大佬为什么每次都是20多分钟AK的,QAQ A. Remove Duplicates time limit per test 1 second ...

  8. 大R玩家体验时空猎人折扣平台多角度分析

    <时空猎人>讲述了时空裂隙的出现,导致大批魔物入侵阿达拉大陆.玩家可扮演狼人.机械师.异能者.冰魄等职业,与这片大陆的人们保卫家园. 游戏拥有宠物.等战斗培养元素,还引入竞技场.攻城战等P ...

  9. 一道cf水题

    题意:输入数字n表示字符串中元素个数,字符串中只含有RGB三个字符,现在要求任意两个相同的字符他们的下标之差能整除3. 思路:任意两个相同的字符的下标能整除3,也就是任意三个为一组的字符串当中的字符不 ...

  10. 转载：Systemd 服务配置文件

    目录 一.开机启动 二.启动服务 三.停止服务 四.读懂配置文件 五. [Unit] 区块:启动顺序与依赖关系. 六.[Service] 区块:启动行为 6.1 启动命令 6.2 启动类型 6.3 重 ...