SpringMVC 处理AJAX请求"/>
SpringMVC 处理AJAX请求
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;"})@ResponseBodypublic 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;"})@ResponseBodypublic 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;}@Overridepublic 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")@ResponseBodypublic 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;}
运行结果，点击提交显示内容
点击展示饮料列表
案例展示完成
更多推荐
SpringMVC 处理AJAX请求
发布评论