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. 为了好好看球，学霸们用深度学习重建整个比赛3D全息图

    http://mp.ofweek.com/vr/a745673021206 周四晚上11点,万众瞩目的世界杯终于开踢了,虽然意大利.荷兰.智利.中国(手动滑稽)等强队没能进入本届世界杯,但C罗梅西谁主 ...

  2. php 获取网站根目录

    方法1(需自行调整根目录): define('BASE_PATH',str_replace('\\','/',realpath(dirname(__FILE__).'/'))."/" ...

  3. 2016 icpc ECfinal && codeforcesgym101194

    一不小心惨变旅游队,不过上海的风景不错 顺带找其他队交流一下集训经验...或许可以成为选拔和集训16级的依据 A.直接模3就可以了,2^(3*n)%7=1 C.Mr. Panda and Strips ...

  4. Introduction to the Standard Directory Layout

    Having a common directory layout would allow for users familiar with one Maven project to immediatel ...

  5. Centos7.3+uwsgi+Nginx部署Django程序

    1. 安装Python,这里我用的是阿里云的centos7.3,自带python2,所以,此步略过,具体安装Python可Google. 2. 安装uwsgi,如果安装失败的话首先,我的Python解 ...

  6. KNN(K-Nearest Neighbor)介绍

    KNN(K-Nearest Neighbor)介绍 原文地址:https://www.cnblogs.com/nucdy/p/6349172.html Wikipedia上的 KNN词条 中有一个比较 ...

  7. 20145308 《网络对抗》 注入shellcode+Return-to-libc攻击 学习总结

    20145308 <网络对抗> 逆向及BOF进阶实践 注入shellcode+Return-to-libc攻击 学习总结 实践目的 注入shellcode 实现Return-to-libc ...

  8. python --- 17. 面向对象成员

    面向对象的成员 能写的所有成员 一.变量 1.实例变量 访问时      对象.变量 2.类变量 访问时     类名.变量 注意: 二.方法 1.实例方法 必须有一个参数(self) 调用时    ...

  9. [idea] - 项目启动报错Process finished with exit code 1

    今天运行项目发现一个bug, "C:\Program Files\Java\jdk1.8.0_191\bin\java.exe" -XX:TieredStopAtLevel=1 - ...

  10. A Simple Note on "P4FPGA: A Rapid Prototyping Framework for P4"

    论文:P4FPGA: A Rapid Prototyping Framework for P4 Github:https://github.com/p4fpga Reference: Han Wang ...