AJAX
AJAX概念
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
简而言之：局部刷新。
AJAX简介
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
Google Suggest 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。
Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入
关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
AJAX定义和用法
JSON
什么是 JSON
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
JSON 语法规则
JSON 语法是 JavaScript 对象表示法语法的子集。
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
Springmvc 处理ajax请求
概要
处理AJAX请求
返回JSON数据
架包支持
项目中需要增加的jar包：
jackson-all-1.8.10.jar
fastjson-1.2.47.jar（阿里巴巴）
在控制器中增加方法
使用注解：@ResponseBody，@RequestBody
该注解设置返回值为JSON类型
案例展示
1.使用原生的Str返回
跳转至sendjson.jsp页面
@RequestMapping("/tosendjson.action")
public String toSendJson() {
logger.info("控制器跳转至：sendjson");
return "sendjson";
}sendjson.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>AJAX</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
<script>
function myFun() {
//jquery获得文本框值得写法
var name = $("#name").val();
//使用AJAX完成参数传递，请求
$.ajax({
type: "post",
url: "receive.action",
data: name,
contentType: 'application/json;charset=utf-8',
success: function (data) {
console.log(data);
//将页面中的标题标签更新
$("#h1").html(data);
}
});
}
</script>
</head>
<body>
<p><input type="text" id="name" name="name" placeholder="请输入姓名"></p>
<p>
<button type="button" onclick="myFun()">提交</button>
</p>
<h1 id="h1"></h1>
</body>
</html>
receive.action控制单元
/*
* 中文乱码问题得到解决
* 原理: 手动给对应的Accept返回制定格式编码数据。
* 发现produces设置多个Accept只有第一个的charset是有用的,
*/
@RequestMapping(value = "/receive.action", produces = {"text/html;charset=UTF-8;", "application/json;"})
@ResponseBody
public String receive(@RequestBody String name) {
logger.info(name);
String str = "welcome欢迎" + name;
logger.info(str);
return str;
}运行结果，点击提交显示内容
2.使用对象返回，Json自动解析
跳转至sendjson2.jsp页面
@RequestMapping("/tosendjson2")
public String toSendJson2() {
logger.info("控制器跳转至：sendjson2");
return "sendjson2";
}sendjson2.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>sendjson2</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
<script>
var user = {
name: "张",
age: 22,
tel: 13333333333
}
function myFun() {
console.log(user);
//将User对象转化为JSON类型的字符串
var userStr = JSON.stringify(user);
console.log(userStr);
$.ajax({
type: "post",
url: "receive2.action",//请求服务器地址
data: userStr,
contentType: 'application/json;charset=utf-8',
success: function (username) {
console.log(username);
$("#h1").html(username);
}
});
}
</script>
</head>
<body>
<pre>
var user={
name:"张",
age:22,
tel:13279560363
}
</pre>
<h3>点击按钮，从页面中的js获取User对象，将该对象用JSON.stringify(user)方法将用户转化为字符串，然后送给后台</h3>
<button onclick="myFun()">确定</button>
<h1 id="h1"></h1>
</body>
</html>
receive2.action控制单元
@RequestMapping(value = "/receive2", produces = {"text/html;charset=UTF-8;", "application/json;"})
@ResponseBody
public String receive2(@RequestBody User user) {
logger.info(user.getName());
String str = "你好：" + user.getName();
return str;
}运行结果，点击确定显示内容
3.集合列表展式
产品类
package com.springmvc.po;
import java.util.Date;
/**
* @Author : Eeerosss
* @create 2022/9/1 17:08
*/
public class Product {
private int pid;
private String pname;
private String type;
private double price;
private Date pdate;
public Product(int pid, String pname, String type, double price, Date pdate) {
this.pid = pid;
this.pname = pname;
this.type = type;
this.price = price;
this.pdate = pdate;
}
@Override
public String toString() {
return "Product{" +
"pid=" + pid +
", pname='" + pname + '\'' +
", type='" + type + '\'' +
", price=" + price +
", pdate=" + pdate +
'}';
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getPname() {
return pname;
}
public void setPname(String pname) {
this.pname = pname;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public Date getPdate() {
return pdate;
}
public void setPdate(Date pdate) {
this.pdate = pdate;
}
}
跳转至sendjson5.jsp页面
@RequestMapping("/tosendjson5")
public String toSendJson5() {
logger.info("控制器跳转至：sendjson5");
return "sendjson5";
}
sendjson5.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>sendjson2</title>
<script src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js"></script>
<script>
function myFun() {
$.ajax({
type: "post",
url: "receive5.action",//请求服务器地址
contentType: 'application/json;charset=utf-8',
success: function (list) {
console.log(list);
//创建字符串，等待接收所有信息
var html = "<tr><th>编号</th><th>产品名称</th><th>产品类型</th><th>产品价格</th><th>生产日期</th></tr>";
$.each(list, function (i, item) {
html += "<tr><td>" + item.pid + "</td><td>" + item.pname + "</td><td>" + item.type + "</td><td>" + item.price + "元</td><td>" + new Date(item.pdate).toLocaleString() + "</td></tr>";
});
console.log(html);
$("#t").html(html);
}
});
}
</script>
</head>
<body>
<button onclick="myFun()">点击展示饮料列表</button>
<h1>饮料产品列表</h1>
<div>
<table id="t" border="1px" width="800px" style="border-collapse: collapse;text-align: center">
</table>
</div>
</body>
</html>
receive5.action控制单元
@RequestMapping("/receive5")
@ResponseBody
public List<Product> receive5(){
List<Product> list=new ArrayList<>();
list.add(new Product(1,"可口可乐","碳酸饮料",3, new Date()));
list.add(new Product(2,"茉莉蜜茶","茶饮料",3,new Date()));
list.add(new Product(3,"农夫山泉","矿泉水",2,new Date()));
list.add(new Product(4,"百事可乐","碳酸饮料",3,new Date()));
list.add(new Product(5,"冰红茶","茶饮料",3,new Date()));
list.add(new Product(6,"红牛","功能饮料",5,new Date()));
return list;
}
运行结果，点击提交显示内容
点击展示饮料列表
案例展示完成
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
