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. Spring Boot(十三)：spring boot小技巧

    Spring Boot(十三):spring boot小技巧 一.初始化数据 我们在做测试的时候经常需要初始化导入一些数据,如何来处理呢?会有两种选择,一种是使用Jpa,另外一种是Spring JDB ...

  2. 11.2.0.4 sql*loader/oci direct load导致kpodplck wait before retrying ORA-54

    昨天晚上9点多,有个环境开发说特别慢,早上上去看下了,如下: 导致性能的是一个统计的sql执行计划走错了,主要不是因为kpodplck wait before retrying ORA-54,不过这个 ...

  3. 01: Python基本数据类型

    目录: 1.1 列表和元组 1.2 字符串 1.3 字典 1.4 集合 1.1 列表和元组返回顶部 1.列表基本操作 1. 列表赋值 a = [1,2,3,4,5,6,7,8] a[0] = 100 ...

  4. TCP 的那些事儿（下）(转)

    原文地址:http://kb.cnblogs.com/page/209101/ 作者: 陈皓  来源: 酷壳  发布时间: 2014-05-29 00:17  阅读: 18122 次  推荐: 19  ...

  5. 实现 SPA 的三种方式

    什么是SPA? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应 ...

  6. Eclipse使用maven命令安装第三方jar包

    使用原因: 使用maven时,有些第三方jar包是不能从maven远程仓库中下载得到,因此导致在pom.xml中添加jar包依赖时会怎么添加都会报错(Missing artifact ojdbc:oj ...

  7. Python3 tkinter基础 Entry insert delete 点击按钮 向输入框赋值 或 清空

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. Python3 tkinter基础 Canvas coords 移动直线，itemconfig 设置矩形的颜色, delete 删除一条直线

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. HDU 4638 Group（莫队）题解

    题意:n个数,每个数有一个值,每次询问一个区间,问你这个区间能分成连续的几段(比如7 1 2 8 就是两端 1 2 和 7 8) 思路:莫队.因为L.R移动顺序wa了20发...问了一下别人,都是先扩 ...

  10. hihoCoder week17 最近公共祖先·三 lca st表

    记录dfs序列,dfn[tot] 记录第tot次访问的节点 然后查两点在dfs序中出现的第一次 id[u] id[v] 然后  找 dep[k] = min( dep[i] ) {i 属于 [id[u ...