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. 使用Ajax出现302 Moved Temporarily

    现象:在用ajax发送请求时,各种参数都对,地址也对,一直进error返回parse error. 使用浏览器发现ajax请求的header的响应码处:302 Moved Temporarily 百度 ...

  2. Java连接数据库 #04# Apache Commons DbUtils

    索引 通过一个简单的调用看整体结构 Examples 修改JAVA连接数据库#03#中的代码 DbUtils并非是什么ORM框架,只是对原始的JDBC进行了一些封装,以便我们少写一些重复代码.就“用” ...

  3. python的ws库功能，实时获取服务器ws协议返回的数据

    # -*- coding:utf-8 -*- ''' 模块下载,帮助地址:https://github.com/liris/websocket-client#readme 模块:websocket-c ...

  4. uwsgi 的巨坑

    网上各种找,最后自己猜,猜到了. 必须安装python插件, 网上找的都是不带数字的版本号, 要么找不到要么不行. 我是 3.6.1,尝试加36, 成了. yum install -y uwsgi-p ...

  5. Golang对文件读写操作

    package main import ( "bufio" "fmt" "io" "os" ) //写 func Wri ...

  6. Java 中的多线程你只要看这一篇就够了

    引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个 ...

  7. 推荐 Net C# 逆向反编译四大工具利器

    参考:https://blog.csdn.net/kongwei521/article/details/54927689/

  8. vue.js not detected 解决办法-vue.js devtools 安装

    国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...

  9. Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) Problem E (Codeforces 831E) - 线段树 - 树状数组

    Vasily has a deck of cards consisting of n cards. There is an integer on each of the cards, this int ...

  10. docker 给运行的容器映射本地端口

    1.提交运行中的容器为一个镜像   (这样不会丢失在容器的各种操作) docker commit  tang     tang1 ###  tang(运行容器名称)   tang1(生成镜像名称) 2 ...