Ajax请求动态查询回显数据

最新推荐文章于 2024-05-05 16:51:56 发布

zkm-dakn

最新推荐文章于 2024-05-05 16:51:56 发布

阅读量3k

点赞数 2

分类专栏： java web 文章标签： ajax 服务器 p2p

本文链接：https://blog.csdn.net/m0_53342945/article/details/121919699

版权

java web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.同步和异步

例：普通B/S模式（同步） AJAX技术（异步）

同步：提交请求-->等待服务器处理-->处理完毕返回--> 这个期间客户端浏览器不能干任何事

异步：请求通过时间触发-->服务器处理（这时浏览器任然可以作其他事情）-->处理完毕

同步是指：发送方发出数后，等待收方发回响应以后才发下一个数据包的通讯方式

异步是指：发送方发出数据后，不等待收方发回响应，接着发送下个数据包的通讯方式

通俗点说：

异步传输：你传你的，我干我的事，传完给我说一声

同步传输：你现在传输，我需要亲眼看着你传完我在做别的事

2.什么是ajax

允许浏览器与服务器通信而无序刷新当前页面的技术都被叫做ajax

3.ajax的工作原理

AJAX采用异步交互过程，ajax在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理——等待——处理——等待缺点。

用户的浏览器在执行任务时即卸载了AJAX引擎，Ajax引擎用javascript语言编写，通常藏在一个隐藏的框架中。它负责编译用户界面及与服务器之间的交互。

Ajax引擎允许用户与应用软件之间的交互过程异步进行，独立于用户与网络服务器之间的交流。现在，可以用javascript调用Ajax引擎来代替产生一个HTTP的用户动作，内存中的数据编辑，页面导航，数据校验这些不需要重新载入整个页面的需求可以给Ajax来执行。

4.AjAX得实现方式基于jquery来实现

Jquery对js的一种封装使我们操作dom元素更加简单。

（1） $.get(url,data,callback,type);

1.url:请求服务器的地址

2.data:请求时携带的参数格式是key/value {key:value，key:value}

3.callback:服务器响应成功后调用的函数。 function(msg){} msg:服务器响应的内容

4.type:服务器响应的数据格式。 text文本类型 json 对象类型 xml （这个不怎么会用）

(2) $.post(url,data,callback,type) 和get方式一样

(3) $.ajax

$.ajax({
url: 请求路径,
data: 携带的数据
type: 请求方式
success: 服务器响应成功后触发的函数，
dataType: 服务器响应的数据类型
});

5.json对象

JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。 JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。

规则如下:

1）映射用冒号（“：”）表示。名称:值

2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2

3）映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}

4）并列数据的集合（数组）用方括号(“[]”)表示。 [ {名称1:值,名称2:值2}, {名称1:值,名称2:值2} ]

5 元素值可具有的类型：string, number, object, array, true, false, null

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/30
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <%--①引入jquery得插件--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
  </head>
  <body>
      <button onclick="ck()">点击我</button>
  </body>

<script>
     //表示一个json对象 {k:v,k:v} 简单
     // var p={"n":"刘一凡","a":17};
     // alert(p.n+"----->"+p.a);
     //集合json对象
     // var students=[
     //   {"name":"刘健","age":20},
     //   {"name":"王飞","age":18},
     //   {"name":"王一同","age":38}
     // ];
     // alert(students[0].name);

     // var p={
     //   "programmers":
     //           [
     //             {"firstName": "Brett", "email": "brett@newInstance.com" },
     //             {"firstName": "Jason", "email": "jason@servlets.com" }
     //           ]
     //
     // }
     //
     // alert(p.programmers[0].email);

     var people ={
       "programmers": [
         { "firstName": "Brett", "email": "brett@newInstance.com" },
         { "firstName": "Jason",  "email": "jason@servlets.com" },
         { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
       ],
       "authors": [
         { "firstName": "Isaac",  "genre": "science fiction" },
         { "firstName": "Tad", "genre": "fantasy" },
         { "firstName": "Frank",  "genre": "christian fiction" }
       ],
       "musicians": [
         { "firstName": "Eric",  "instrument": "guitar" },
         { "firstName": "Sergei", "instrument": "piano" }
       ]};
     window.alert(people.programmers[1].firstName);
     window.alert(people.musicians[1].instrument);

     function ck(){
          /*$.get("${pageContext.request.contextPath}/ajax01",function(result){ //
               //拿到结果使用
               alert(result);
          });*/
       /*$.post("${pageContext.request.contextPath}/ajax01",{"uname":"范龙飞","age":18},function(result){ //
         //拿到结果使用
         alert(result);
       });*/
       $.ajax({
           url: "${pageContext.request.contextPath}/ajax01",
           data: "uname=刘哥&age=19",
           type: "POST",
           success: function (result) {
                alert(result)
           }
       })
     }
</script>
</html>

服务端响应的数据格式为json

练习题：

zkm-dakn

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax请求动态查询回显数据

1.同步和异步例：普通B/S模式（同步） AJAX技术（异步）同步：提交请求-->等待服务器处理-->处理完毕返回--> 这个期间客户端浏览器不能干任何事异步：请求通过时间触发-->服务器处理（这时浏览器任然可以作其他事情）-->处理完毕同步是指：发送方发出数后，等待收方发回响应以后才发下一个数据包的通讯方式异步是指：发送方发出数据后，不等待收方发回响应，接着发送下...
复制链接

扫一扫