第十四章json数据交互前端页面js

爱吃饭团煲

已于 2023-08-29 22:54:03 修改

阅读量40

点赞数

文章标签： json 前端

于 2023-07-05 17:03:54 首次发布

本文链接：https://blog.csdn.net/qq_48174177/article/details/131557932

版权

json的格式

1对象结构

2数组结构

两者的一起使用

在json数据交互时需要用到两个注解

首先spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">        
        <context:component-scan base-package="com.qcby.ssm.controller"></context:component-scan>
        <mvc:annotation-driven></mvc:annotation-driven>
        <!-- 添加js -->
        <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"></property>
        <property name="suffix" value=".jsp"></property>
        </bean>
</beans>

创建java文件


public class User {

	private String username;
	private String password;

index.jsp文件再点击按钮的时候会根据URL；

找到后面的controller

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试json交互</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function testJson(){
	//首先获取用户操作的信息
	//获取用户输入的用户名和密码
	var username = $("#username").val();
	var password = $("#password").val();
	$.ajax({
		url:"${pageContext.request.contextPath}/testJson",
			type:"post",
			// data表示发送的数据
			data:JSON.stringify({username:username,password:password}),
			//定义发送请求的数据格式为json
			contentType:"application/json;charset=utf-8",
			//定义回调响应的数据为json
			dataType:"json",
			success:function (data){
				
				if(data!=null){
					alert(data.username + data.password);
					alert("444")
				}
			}
	});
	
}
</script>
</head>
<body>
	<form>
		用户名：<input type="text" name="username" id="username">
		密码：<input type="password" name="password" id="password">
		<input type="button" value="按钮" onclick="testJson()">
	</form>
</body>
</html>

controller文件

@Controller
public class userController {
	@RequestMapping("/testJson")
    @ResponseBody
	public User testJson(@RequestBody User user) {
		System.out.println(user);
		System.out.println("aaa");
		return user;
	}
	
	@GetMapping("/user/{id}")
	@ResponseBody
	public User selectUser(@PathVariable("id") String id) {
		//查看接收到的数据
		System.out.println(id);
		User user = new User();
		//模拟连接数据库，根据id查询用户数据
		if(id.equals("1234")){
			user.setUsername("sss");
		}
		return user;
	}

解释一下代码首先jsp获取json 然后跳到testJson 然后testJson 通过