【Java和前端案例】使用Ajax发送一个异步请求，响应封装的J
2021-03-14 本文已影响0人
itlu
1. 后端封装处理Java对象转JSON字符串的工具方法
- 这里使用的
fast-json进行转换，需要导入依赖:
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>
- 编写工具类处理JSON
/**
* 返回一个Json字符串
*
* @param code
* @param msg
* @param map
* @return
*/
public static String getJsonString(int code,
String msg,
Map<String, Object> map) {
JSONObject json = new JSONObject();
json.put("code", code);
json.put("msg", msg);
if (map != null) {
// 遍历map拿出其中的 key 和 value 设置到json中
for (String key : map.keySet()) {
json.put(key, map.get(key));
}
}
// 将json对象转换为 json 字符串
return json.toJSONString();
}
/**
* 方法重载设置 code 和 msg
* @param code
* @param msg
* @return
*/
public static String getJsonString(int code, String msg) {
return getJsonString(code, msg, null);
}
/**
* 方法重载设置 code
* @param code
* @return
*/
public static String getJsonString(int code) {
return getJsonString(code, null, null);
}
2. 后端Java编写处理Ajax请求的Controller
- 返回一个字符串需要使用
@ResponseBody注解:
/**
* 发布异步请求
*
* @param name
* @param age
* @return
*/
@PostMapping("/ajax")
@ResponseBody
public String sendAjax(String name, int age) {
System.out.println(name);
System.out.println(age);
Map<String, Object> map = new HashMap<>();
map.put("name", name);
map.put("age", age);
return NewsUtils.getJsonString(0, "成功!", map);
}
3. 前端发送一个ajax请求
<body>
<p>
<input type="submit" value="发送" onclick="send()">
</p>
<!-- 引入Jquery资源 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script>
function send() {
$.post(
// 请求路径
"/circle/alpha/ajax",
{
"name": "张三",
"age": 23
},
function (data) {
console.log(data);
console.log(typeof data);
// 将字符串转换为 JS 对象
data = $.parseJSON(data);
console.log(typeof data);
console.log(data.msg);
console.log(data.code);
console.log(data.age);
console.log(data.name);
}
)
}
</script>
- 响应结果输出:
响应结果输出
