Javascript:ajax

Ajax:get

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxDemo.aspx.cs"
  2.     Inherits="CZBK.ItcastProject.WebApp._2015_6_2.AjaxDemo" %>
  3.  
  4. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <script src="../Js/jquery-1.7.1.js"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $("#btnGetDate").click(function () {
  13.                 //开始通过AJAX向服务器发送请求.
  14.                 var xhr;
  15.                 if (XMLHttpRequest) {//表示用户使用的高版本IE，谷歌，狐火等浏览器
  16.                     xhr = new XMLHttpRequest();
  17.                 } else {// 低IE
  18.                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
  19.                 }
  20.                 xhr.open("get", "GetDate.ashx?name=zhangsan&age=12", true);
  21.                 xhr.send();//开始发送
  22.                 //回调函数:当服务器将数据返回给浏览器后，自动调用该方法。
  23.                 xhr.onreadystatechange = function () {
  24.                     if (xhr.readyState == 4) {//表示服务端已经将数据完整返回，并且浏览器全部接受完毕。
  25.                         if (xhr.status == 200) {//判断响应状态码是否为200.
  26.                             alert(xhr.responseText);
  27.                         }
  28.                     }
  29.                 }
  30.             });
  31.         });
  32.     </script>
  33. </head>
  34. <body>
  35.     <form id="form1"  runat="server">
  36.     <div>
  37.     <input type="button" value="获取服务端时间" id="btnGetDate" />
  38.     </div>
  39.     </form>
  40. </body>
  41. </html>

Ajax:post

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPostDemo.aspx.cs" Inherits="CZBK.ItcastProject.WebApp._2015_6_2.AjaxPostDemo" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <script src="../Js/jquery-1.7.1.js"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $("#btnPost").click(function () {
  13.                 var xhr;
  14.                 if (XMLHttpRequest) {
  15.                     xhr = new XMLHttpRequest();
  16.                 } else {
  17.                     xhr = new ActiveXObject("Microsoft.XMLHTTP");
  18.                 }
  19.                 xhr.open("post", "GetDate.ashx", true);
  20.                 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  21.                 xhr.send("name=zhangsan&pwd=123");
  22.                 xhr.onreadystatechange = function () {
  23.                     if (xhr.readyState == 4) {
  24.                         if (xhr.status == 200) {
  25.                             alert(xhr.responseText);
  26.                         }
  27.                     }
  28.                   }
  29.             });
  30.         });
  31.     </script>
  32. </head>
  33. <body>
  34.     <form id="form1" runat="server" >
  35.     <div>
  36.     <input type="button" value="获取数据" id="btnPost" />
  37.  
  38.     </div>
  39.     </form>
  40. </body>
  41. </html>

**服务器端可以自动判断Get/Post请求，来接受参数

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5.  
  6. namespace CZBK.ItcastProject.WebApp._2015_6_2
  7. {
  8.     /// <summary>
  9.     /// GetDate 的摘要说明
  10.     /// </summary>
  11.     public class GetDate : IHttpHandler
  12.     {
  13.         public void ProcessRequest(HttpContext context)
  14.         {
  15.             context.Response.ContentType = "text/plain";
  16.             context.Response.Write(context.Request["name"]);
  17.             //context.Request.Form[""] POST
  18.             //context.Request.QueryString GET
  19.             //context.Request[""]  服务器端自动判断 Post/Get
  20.         }
  21.  
  22.         public bool IsReusable
  23.         {
  24.             get
  25.             {
  26.                 return false;
  27.             }
  28.         }
  29.     }
  30. }

Jquery:ajax

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjax.aspx.cs" Inherits="CZBK.ItcastProject.WebApp._2015_6_2.JqueryAjax" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  8.     <title></title>
  9.     <script src="../Js/jquery-1.7.1.js"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             $("#btnGet").click(function(){
  13.                 $.get("GetDate.ashx", { "name": "lisi", "pwd": "123" }, function (data) {
  14.                     alert(data)
  15.                 });
  16.  
  17.             });
  18.  
  19.             $("#btnPost").click(function () {
  20.                 $.post("ShowDate.aspx", { "name": "lisi", "pwd": "123" }, function (data) {
  21.                     alert(data)
  22.                 })
  23.             });
  24.  
  25.             $("#btnAjax").click(function () {
  26.                 $.ajax({
  27.                     type: "POST",
  28.                     url: "GetDate.ashx",
  29.                     data: "name=John&location=Boston",
  30.                     success: function (msg) {
  31.                         alert("Data Saved: " + msg);
  32.                     }
  33.                 });
  34.  
  35.             });
  36.         });
  37.     </script>
  38. </head>
  39. <body>
  40.     <form id="form1" runat="server">
  41.     <div>
  42.     <input type="button" value="GET获取数据" id="btnGet" />
  43.         <input type="button" value="POST获取数据" id="btnPost" />
  44.         <input type="button" value="AJAX获取数据" id="btnAjax" />
  45.     </div>
  46.     </form>
  47. </body>
  48. </html>

asp.net 12 AJAX的更多相关文章

  1. asp.net的ajax以及json

    asp.net的ajax以及json 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.net mvc的,当时asp.net mvc用的是razor引擎,所 ...

  2. ASP.NET jquery ajax传递参数

    第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...

  3. asp 按钮 调用ajax时 会出现返回错误，尽量使用html按钮进行调用

    asp 按钮 调用ajax时 会出现返回错误,尽量使用html按钮进行调用

  4. [转]asp.net的ajax以及json

    本文转自:http://www.cnblogs.com/ensleep/p/3319756.html 来现在这家公司以前,从未接触过webform,以前在学校做的项目是php,java以及asp.ne ...

  5. Asp.Net MVC Ajax

    将ASP.NET MVC中的form提交改为ajax提交 在ASP.NET MVC视图中通过 @using (Html.BeginForm()) 产生的是form表单提交代码,可以用javascrip ...

  6. Jquery+asp.net实现Ajax方式文件下载实例代码

    如果文件中,需要下载一个文件,一般用超级链接的方式即可. 但是如果是图片,浏览器会默认打开图片浏览,不是实现下载. 考虑可以使用jquery ajax提交form请求的方式. jquery downl ...

  7. 系列文章--ASP.NET之AJAX入门教程

    ASP.NET AJAX入门系列将会写关于ASP.NET AJAX一些控件的使用方法以及基础知识,其中部分文章为原创,也有一些文章是直接翻译自官方文档,本部分内容会不断更新. 目录 ASP.NET A ...

  8. ASP.NET 5 - $.ajax post JSON.stringify(para) is null

    JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...

  9. ASP.NET中Ajax的用法

    在ASP.NET中应用Ajax的格式如下: 前台代码(用JQuery库) $.ajax({ type: "POST", async: true, url: "../Aja ...

随机推荐

  1. python查找鞍点

    问题:对于给定5X5的整数矩阵,设计算法查找出所有的鞍点的信息(包括鞍点的值和行.列坐标,坐标从1开始). 提示:鞍点的特点:列上最小,行上最大. 思路:求出每一行的最大值,将行号.列号.值存入列表中 ...

  2. 一百一十七：CMS系统之注册页面对接短信验证码

    from flask import Blueprint, requestfrom exts import alidayufrom utils import restfulfrom utils.capt ...

  3. [CDH] New project for ML pipeline

    启动后台服务: [CDH] Cloudera's Distribution including Apache Hadoop 这里只介绍一些基本的流程,具体操作还是需要实践代码. 一.开发环境配置 JD ...

  4. mysql 高性能日记之索引（持续更新）

    本文仅限于自己读写的笔记,需要具有一定 mysql(inodb,myisam 引擎)基础的高端玩家,不感兴趣的玩家们就不用在意了 Inodb 引擎 1,每个新建索引,都需要考虑清楚看是否是必须的,很多 ...

  5. Delphi通过ADO读写数据库

    ADO是一种程序对象,用于表示用户数据库中的数据结构和所包含的数据. ADO (ActiveX Data Objects,ActiveX数据对象)是Microsoft提出的应用程序接口(API)用以实 ...

  6. Go项目实战：打造高并发日志采集系统（一）

    项目结构 本系列文章意在记录如何搭建一个高可用的日志采集系统,实际项目中会有多个日志文件分布在服务器各个文件夹,这些日志记录了不同的功能.随着业务的增多,日志文件也再增多,企业中常常需要实现一个独立的 ...

  7. (转载)悟透JavaScript

    引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个 ...

  8. XLSX.js 导出Excel demo

    GitHub:https://github.com/SheetJS/js-xlsx 一个js操作Excel的工具,如下代码,很方便的就将json数据导出为Excel文件. 使用示例: //json 数 ...

  9. jQuery,javascript获得网页的高度和宽度【收藏】

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...

  10. MySQL安装Write configuration file 提示：configuration file template my.ini Error code-1

    在安装MySQL的时候, 在最后安装时,最后一步出现Write configuration file没成功勾选,并提示:configuration file template D:\mysql\my- ...