文章目录
- 前言
- 一、准备
- 二、单个值
- 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: 张军国001Date: 2024/5/2Time: 21:04To 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', // 请求的URLtype: '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', // 请求的URLtype: '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"}]
总结
回到顶部
