ssm框架中使用json将前端数据传递到后端

主要目录结构
在这里插入图片描述
TestController.java

package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import pojo.Person;

@Controller

public class TestController {
    
    
	@RequestMapping("/testJson")
	@ResponseBody
	public Person testJson(@RequestBody Person user) {
    
    
		System.out.println("pname:"+user.getPname()+"password"+user.getPassword()+"age"+user.getPage());
		return user;
	}
}

Person.java

package pojo;

public class Person {
    
    
	private String pname;
	private String password;
	private Integer page;
	
	public String getPname() {
    
    
		return pname;
	}
	public void setPname(String pname) {
    
    
		this.pname = pname;
	}
	public String getPassword() {
    
    
		return password;
	}
	public void setPassword(String password) {
    
    
		this.password = password;
	}
	public Integer getPage() {
    
    
		return page;
	}
	public void setPage(Integer page) {
    
    
		this.page = page;
	}
	
}

springmvc-servlet.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:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    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-3.0.xsd
   http://www.springframework.org/schema/tx
     http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/context
   http://www.springframework.org/schema/context/spring-context-3.0.xsd
    http://www.springframework.org/schema/mvc
     http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
   "
  >
  <context:component-scan base-package="controller"></context:component-scan>
  
  
   <mvc:annotation-driven/>
  <mvc:resources location="/css/" mapping="/css/**"></mvc:resources>
   <mvc:resources location="/html/" mapping="/html/**"></mvc:resources>
   <mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
   
  <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
       <property name="prefix" value="/WEB-INF/jsp/"/>
       <property name="suffix" value=".jsp"/>
  </bean>
  </beans>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>ch9</display-name>
 <servlet>
      <servlet-name>springmvc</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet
      </servlet-class>
      <!-- 表示启动容器时初始化该servlet   -->
      <load-on-startup>1</load-on-startup>
</servlet>
 <servlet-mapping>
          <servlet-name>springmvc</servlet-name>
          <!-- 表示哪些请求需要交给Spring Web MVC处理，/是用来定义默认servlet映射的。也可以如“*.html”表示拦截所有以html为扩展名的请求 -->
          <url-pattern>/</url-pattern>
      </servlet-mapping>
</web-app>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
   function testJson(){
     
     
	   var pname=$("#pname").val();
	   var password=$("#password").val();
	   var page=$("#page").val();
	   $.ajax({
     
     
		   url:"${pageContext.request.contextPath}/testJson",
		   type:"post",
		   data:JSON.stringify({
     
     pname:pname,password:password,page,page}),
		   contentType:"application/json;charset=utf-8",
		   dataType:"json",
		   success:function(data){
     
     
			   if(data!=null){
     
     
				   alert("输入用户名："+data.pname+",密码："+data.password+",年龄:"+data.page);
			   }
		   }
	   });
   }
</script>
<body>
<form action="">
用户名:<input type="text" name="pname" id="pname"/>
密码:<input type="password" name="password" id="password"/>
年龄:<input type="text" name="page" id="page">
<input type="button" value="测试" onclick="testJson()"/>
</form>
</body>
</html>

运行结果：
在这里插入图片描述

所使用jar包，请添加博主qq:2411512182

ssm框架中使用json将前端数据传递到后端

猜你喜欢