JSON数据交互案例

2024年4月30日 互联网

 

 

JSON是近几年才流行的一种新的数据格式，他与XML非常相似，都是用于存储数据的；但JSON相对于XML来说，解析速度更快，占用空间更小。

  1. 创建项目并导入相关JAR包。使用Eclipse创建一个Web项目，然后将SpringMVC相关的JAR包、JSON转换包添加到项目的lib目录中，并发布到类路径下。添加后的lib目录如图。

  2. 在web.xml中，对SpringMVC的前端控制器信息进行配置，如文件所示。 
    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xmlns="http://xmlns.jcp.org/xml/ns/javaee"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"id="WebApp_ID" version="3.1"><display-name>7_5</display-name><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:springmvc-config.xml</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springmvc</servlet-name><url-pattern>/</url-pattern></servlet-mapping><!-- 	<servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.js</url-pattern></servlet-mapping><servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.css</url-pattern></servlet-mapping> --></web-app>

     

  3. 在src目录下，创建SpringMVC的核心配置文件springmvc-config.xml，编辑后的代码如文件所示。 
    <beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx"xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd"><context:component-scan base-package="com.itheima.controller" /><mvc:annotation-driven /><mvc:resources location="/js/" mapping="/js/**" /><!-- <mvc:default-servlet-handler /> -->	<beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="prefix" value="/WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean><!-- 	<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping" /><bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"><property name="messageConverters"><list><bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" /></list></property></bean> --></beans>

     

  4. 在src目录下创建一个com.itheima.po包，并在保中创建一个User类，该类用于封装User类型的请求参数，编辑后如文件所示。 
    package com.itheima.po;public class User {private String username;private String password;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User [username=" + username + ", password=" + password + "]";}
}

     

  5. 在WebContent目录下，创建页面文件index.jsp来测试JSON数据交互，编辑后如文件所示。 
    <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>测试JSON交互</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<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 : JSON.stringify({username:username,password:password}),contentType : "application/json;charset=UTF-8",dataType : "json",success : function(data){if(data !=null){alert("您输入的用户名为："+data.username+"密码为："+data.password);}}})
}
</script>
</head>
<body><form>用户名：<input type="text" name="username" id="username" /><br>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password" id="password" /><br><input type="button" value="测试JSON交互" onclick=" testJson()" /></form>
</body>
</html>

     

  6. 在src目录下创建一个com.itheima.controller包，在该包下创建一个用于用户操作的控制器类UserController，编辑后的代码如文件所示。 
    package com.itheima.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;import com.itheima.po.User;@Controller
public class UserController {@RequestMapping("/testJson")@ResponseBodypublic User testJson(@RequestBody User user) {System.out.println(user);return user;}@RequestMapping(value="/user/{id}",method=RequestMethod.GET)@ResponseBodypublic User selectUser(@PathVariable("id") String id) {System.out.println("id="+id);User user=new User();if(id.equals("1234")) {user.setUsername("tom");}return user;}
}

     

  7. 将项目发布到Tomcat服务器中并启动，在浏览器中访问地址http://localhost:8080/7_5/index.jsp,其效果如图所示。

最新文章