文章目录
- 前言
- 一、准备
- 二、单个值
- 1.前端
- 2.后端
- 3. 结果
- 三、对象
- 1.前端
- 2.后端
- 3. 结果
- 四、JSON对象
- 1.前端
- 2.后端
- 3. 结果
- 五、JSON数组
- 1.前端
- 2.后端
- 3. 结果
- 总结
前言
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，通过在后端与服务器进行少量数据交换，AJAX 可以使网页应用快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。在实践中，虽然数据交换格式常用的是 JSON 而不是 XML，但 AJAX 这个名字仍然被广泛使用。
一、准备
<mvc:view-controller path="hello-ajax" view-name="params/ajax"/>
<a href="/hello-ajax">Hello Ajax</a><br>
二、单个值
1.前端
<%--
Created by IntelliJ IDEA.
User: 张军国001
Date: 2024/5/2
Time: 21:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ajax</title>
</head>
<body>
<button onclick="btn1()">单个值</button><br>
<button onclick="btn2()">对象</button><br>
<button onclick="btn3()">对象数组</button><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function (){
console.log("hello ajax")
})
function btn1(){
var name="张三";
$.get('${pageContext.request.contextPath}/ajax01?name='+name, function(result) {
console.log(result); // 打印返回的数据
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error: ' + textStatus, errorThrown);
});
}
}
</script>
</body>
</html>
2.后端
package org.example.springmvc.params.controller;
import com.alibaba.fastjson2.JSONArray;
import org.example.springmvc.params.entity.User;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* Create by zjg on 2024/5/2
*/
@RestController
public class AjaxController {
@RequestMapping("/ajax01")
public String ajax01(String name){
System.out.println(name);
return name;
}
}
3. 结果
张三
三、对象
1.前端
function btn2(){
var data={'id': 1, 'name': '张三' ,'birth':'2024-05-02','relatives':{'k1':'v1','k2':'v2'}};
$.post('${pageContext.request.contextPath}/ajax02', data, function(result) {
console.log(result); // 打印返回的数据
}).fail(function(jqXHR, textStatus, errorThrown) {
console.error('Error: ' + textStatus, errorThrown);
});
}
2.后端
@RequestMapping("/ajax02")
public User ajax02(User user){
System.out.println(user);
return user;
}
3. 结果
User(id=1, name=张三, birth=Thu May 02 00:00:00 CST 2024, alias=null, hobbies=null, relatives={k1=v1, k2=v2}, role=null, friends=null)
四、JSON对象
1.前端
function btn3(){
var data={'id': 1, 'name': '张三' ,'birth':'2024-05-02','relatives':{'k1':'v1','k2':'v2'}};
$.ajax({
url: '${pageContext.request.contextPath}/ajax03', // 请求的URL
type: 'POST', // 请求类型（GET、POST等）
contentType: 'application/json',
dataType: 'json', // 预期服务器返回的数据类型（json、xml、html等）
data: JSON.stringify(data),
success: function(result, textStatus, jqXHR) {// 请求成功时执行的函数
console.log(result); // 打印返回的数据
},
error: function(jqXHR, textStatus, errorThrown) { // 请求失败时执行的函数
console.error('Error: ' + textStatus, errorThrown);
}
});
}
2.后端
@RequestMapping("/ajax03")
public JSONObject ajax03(@RequestBody JSONObject jsonObject){
System.out.println(jsonObject);
return jsonObject;
}
3. 结果
{"id":1,"name":"张三","birth":"2024-05-02","relatives":{"k1":"v1","k2":"v2"}}
五、JSON数组
1.前端
function btn4(){
var data=[{ 'id': 1, 'name': '张三' ,'birth':'2024-05-02'},
{ 'id': 2, 'name': '李四' ,'birth':'2024-05-02'}];
$.ajax({
url: '${pageContext.request.contextPath}/ajax04', // 请求的URL
type: 'POST', // 请求类型（GET、POST等）
contentType: 'application/json',
dataType: 'json', // 预期服务器返回的数据类型（json、xml、html等）
data: JSON.stringify(data),
success: function(result, textStatus, jqXHR) {// 请求成功时执行的函数
console.log(result); // 打印返回的数据
},
error: function(jqXHR, textStatus, errorThrown) { // 请求失败时执行的函数
console.error('Error: ' + textStatus, errorThrown);
}
});
}
2.后端
@RequestMapping("/ajax04")
public JSONArray ajax04(@RequestBody JSONArray jsonArray){
System.out.println(jsonArray);
return jsonArray;
}
3. 结果
[{"id":1,"name":"张三","birth":"2024-05-02"},{"id":2,"name":"李四","birth":"2024-05-02"}]
总结
回到顶部
