Ajax

Posted 尘暮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax相关的知识,希望对你有一定的参考价值。

AJAX即“Asynchronous Javascript And XML”(异步javascript和XML),是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

跨语言传递数据:
xml:
结构不清晰
代码量比较大
查找起来比较费事
非面向对象结构
json:
结构清晰
代码量相对较小
面向对象的处理解析方式,查找数据很简单
键值对
{"key1":"value","key2":"value"}
多个对象的json
[{"key1":"value","key2":"value"},{"key1":"value","key2":"value"},{"key1":"value","key2":"value"}]

模糊查询

复制代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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.2.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .tab {
            text-align: center;
            margin: auto;
            width: 80%;
            margin-top: 10px;
        }

        .hea {
            height: 40px;
            background-color: #4800ff;
            color: white;
        }

        #tb1 {
            margin-left: 200px;
            height: 40px;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="tb1" runat="server"></asp:TextBox>
            <table class="tab">
                <tr class="hea">
                    <td>编号</td>
                    <td>商品名</td>
                    <td>数量</td>
                    <td>进货日期</td>
                    <td>保质期/天</td>
                    <td>进货联系人</td>
                    <td>联系电话</td>
                </tr>
                <tr>
                    <td id="ids"></td>
                    <td id="sna"></td>
                    <td id="shu"></td>
                    <td id="date"></td>
                    <td id="bao"></td>
                    <td id="ren"></td>
                    <td id="tel"></td>
                </tr>
            </table>
           
        </div>
    </form>
</body>
</html>
<script>
    var oTxt1 = document.getElementById("tb1");

    oTxt1.onkeyup = function () {
        var c = oTxt1.value;

        $.ajax({
            url: "ajax/Handler.ashx", //要将此次请求提交到哪个服务端去
            data: { "zhangke": c }, //给服务端带的数据,可以没有,也可以多个
            type: "post", //传递的方式
            dataType: "json", //数据传递的格式
            success: function (aaa) {
                document.getElementById("ids").innerHTML = aaa.ids;
                document.getElementById("sna").innerHTML = aaa.sna;
                document.getElementById("shu").innerHTML = aaa.shu;
                document.getElementById("date").innerHTML = aaa.date;
                document.getElementById("bao").innerHTML = aaa.bao;
                document.getElementById("ren").innerHTML = aaa.ren;
                document.getElementById("tel").innerHTML = aaa.tel;
                
            }
        });

    };
</script>
复制代码
复制代码
  public Goods Selectmohu(string an)
    {
        Goods g = null;
        cmd.CommandText = "select * from Warehouse where Sname like @a";
        cmd.Parameters.Clear();
        cmd.Parameters.AddWithValue("@a","%"+an+"%");
        conn.Open();
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.HasRows)
        {
            while (dr.Read())
            {
               g = new Goods();
                g.Ids = Convert.ToInt32(dr["Ids"]);
                g.Sname = dr["Sname"].ToString();
                g.Number = dr["Number"].ToString();
                g.Date = Convert.ToDateTime(dr["Date"]);
                g.Shelf = Convert.ToInt32(dr["Shelf"]);
                g.Contacts = dr["Contacts"].ToString();
                g.Tel = dr["Tel"].ToString();
              
            }
        }
        conn.Close();
        return g;
    }
复制代码
复制代码
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Collections.Generic;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        string s = context.Request["zhangke"];
        Goods g = new GoodsData().Selectmohu(s);
        string end = "{\\"ids\\":\\"" + g.Ids.ToString() + "\\",\\"sna\\":\\"" + g.Sname + "\\",\\"shu\\":\\"" + g.Number + "\\",\\"date\\":\\"" + g.Date.ToShortDateString() + "\\",\\"bao\\":\\"" + g.Shelf + "\\",\\"ren\\":\\"" + g.Contacts + "\\",\\"tel\\":\\"" + g.Tel + "\\"}";
        context.Response.Write(end);
        context.Response.End();
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

以上是关于Ajax的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段