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. 一线互联网常见的 14 个 Java 面试题，你颤抖了吗程序员

    跳槽不算频繁,但参加过不少面试(电话面试.face to face 面试),面过大 / 小公司.互联网 / 传统软件公司,面糊过(眼高手低,缺乏实战经验,挂掉),也面过人,所幸未因失败而气馁,在此过程 ...

  2. Net中应用 Redis 扩展类

    GIt地址:https://gitee.com/loogn/stackexchange-redis-typedextensions 1.stackexchange 类调用 using System; ...

  3. redhat7.4+shell离线安装docker

    首先要准备离线安装包 1.docker官网下载 2.docker-compose gitbub官网下载 3.我的docker-compose install-docker.sh #!/bin/sh u ...

  4. python简说（二十）操作excel

    一.pip install xlrdpip install xlwtpip install xlutils 二.写excel import xlwtbook = xlwt.Workbook() #新建 ...

  5. Jbarcode 条形码生成工具

    一.准备jar包 https://sourceforge.net/projects/jbcode/?source=typ_redirect 二.编写工具类 package com.example.de ...

  6. 【python38--面向对象继承】

    一.继承 1.语法:class DerivedClassName(BaseClassName):子类继承父类 >>> class Parent: def hello(self): p ...

  7. Flask学习【第3篇】：蓝图、基于DBUtils实现数据库连接池、上下文管理等

    小知识 子类继承父类的三种方式 class Dog(Animal): #子类 派生类 def __init__(self,name,breed, life_value,aggr): # Animal. ...

  8. Restful framework【第十一篇】url路由控制

    基本使用 -url控制 -传统的url配置 url(r'^books/$', views.BookView.as_view()), url(r'^books/(?P<pk>\d+)$', ...

  9. 【安装】Matlab7.0简介及安装

    一.简介 Matlab下载官方版是美国MathWorks公司出品的商业数学软件,Matlab7.0下载官方版用于算法开发.数据可视化.数据分析以及数值计算的高级技术计算语言和交互式环境,主要包括MAT ...

  10. MySQL删除数据库时无响应解决办法

    删除远程主机上MySQL中的一个数据库时,远程主机一直在响应,无法正常删除. 这个问题的解决办法如下:在远程主机上登录MySQL,执行show full processlist;观察state和inf ...