zoukankan      html  css  js  c++  java
  • ajax 基础

    一般处理程序(数据接口):ashx

    跨语言传递数据:
    xml:
    结构不清晰
    代码量比较大
    查找起来比较费事
    非面向对象结构

    json:
    结构清晰
    代码量相对较小
    面向对象的处理解析方式,查找数据很简单

    键值对
    {"key1":"value","key2":"value"}

     完整格式:

     1  $.ajax({
     2             url: "", //服务器路径
     3             data: { }, //传递的参数,可为空,可多个
     4             type: "post", //传递参数的方式,可POST可GET,一般用POST
     5             dataType: "json", //数据传递的格式,有Json和xml两种
     6             success: function (data) { //成功返回数据执行这里,排第2
     7                 
     8             },
     9             beforeSend: function () { //一触发ajax就执行,无任何延迟,排第1
    10                
    11             },
    12             complete: function () { //所有的方法都执行完毕后再来执行这里,排最后(不管成功失败都会执行)
    13                 
    14             },
    15             error: function () { //服务器路径错误,或是服务器内部错误,走这里报错,此位置与success只会走一个
    16             
    17             }
    18         });

    练习:

    连接数据库验证用户名是否存在

     1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
     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="jquery-1.7.2.min.js"></script>
    10 </head>
    11 <body>
    12     <form id="form1" runat="server">
    13     <div>
    14         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    15         <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    16     </div>
    17     </form>
    18 </body>
    19 </html>
    20 <script type="text/javascript">
    21     var txt = document.getElementById("TextBox1");
    22     txt.onkeyup = function () {
    23         var c = txt.value;
    24 
    25         $.ajax({
    26             url:"ajax/Handler.ashx",//要将此次请求提交到哪个服务去
    27             data: {"aaa":c},//给服务端带的数据,可以没有,也可以多个
    28             type:"post",//传递的方式
    29             dataType: "json",//数据传递的格式
    30             success: function (bbb) {
    31                 document.getElementById("Label1").innerHTML = bbb.lb;
    32                 if (bbb.lb1 == "1") {
    33                     document.getElementById("Label1").style.color = "green";
    34                 }
    35                 else {
    36                     document.getElementById("Label1").style.color = "red";
    37                 }
    38             }
    39         });
    40     }
    41 </script>
     1 <%@ WebHandler Language="C#" Class="Handler" %>
     2 
     3 using System;
     4 using System.Web;
     5 using System.Data.SqlClient;
     6 
     7 public class Handler : IHttpHandler {
     8     
     9     public void ProcessRequest (HttpContext context) {
    10         string s = context.Request["aaa"];
    11         string lb ;
    12         WindowsFormsApplication1.App_Code.Users us = new WindowsFormsApplication1.App_Code.UsersData().Select(s);
    13         if (us != null)
    14         {
    15             lb = "{"lb":"该用户名已存在!","lb1":"0"}";
    16         }
    17         else
    18         {
    19             lb = "{"lb":"恭喜!用户名可用!","lb1":"1"}";
    20         }
    21 
    22         context.Response.Write(lb);
    23         context.Response.End();
    24         
    25         
    26     }
    27  
    28     public bool IsReusable {
    29         get {
    30             return false;
    31         }
    32     }
    33 
    34 }

  • 相关阅读:
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 47 全排列 II(二)
    Java实现 LeetCode 47 全排列 II(二)
  • 原文地址:https://www.cnblogs.com/maxin991025-/p/6286762.html
Copyright © 2011-2022 走看看