前后端通过Ajax与Json传输数据

最新推荐文章于 2021-08-06 10:06:13 发布

一叶，。

最新推荐文章于 2021-08-06 10:06:13 发布

阅读量262

点赞数

分类专栏： Ajax与Json

本文链接：https://blog.csdn.net/OldCbvc/article/details/110481650

版权

Ajax与Json 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

后端【省略Bean】

	@Controller
public class EmployeeHandler {

	@Autowired
	private EmployeeDao employeeDao;
	
	@Autowired
	private DepartmentDao departmentDao;
	/**
	 * 通过Ajax来进行前后端传输数据，将对象转为Json数据传输
	 * ①加入@ResponseBody【返回值变为对象不是视图了】
	 * ②导入三个jar包
	 * ③开启mvc驱动  springmvc.xml中配置【先要设置mvc命名空间】
	 *  <mvc:annotation-driven></mvc:annotation-driven>
	 * @return
	 */
	@RequestMapping("/testJson")
	@ResponseBody//json注解
	public Collection<Employee> testJson(){
		Collection<Employee> all = employeeDao.getAll();
		//返回值不是view，而是传输的数据
		return all;
	}

前端


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript" src="${pageContext.servletContext.contextPath}/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
      $(function (){
        $("#but").click(function () {
          $.ajax({
            url: "testJson",
            type: "post",
            /* data:{},*/
            dataType: "json",
            success: function (msg) {
              for (var i in msg){
                var emp=msg[i];
                alert("id="+emp.id+",lastName="+emp.lastName
                +",department="+emp.department.departmentName);
              }
            }
          })
        })
      })
    </script>
  </head>
  <body>
  <a href="emps">展示数据</a>
  <input id="but" type="button" value="测试Ajax">

  <a href="testspringmvc">testspringmvc</a>
  </body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

	<!--编码问题 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
	
	<!--post/get/put/delete方法-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

	<!--引用servlet及传递springMVC配置文件-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:config/springMVC.xml</param-value>
        </init-param>   
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>



</web-app>

springMVC.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: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/context http://www.springframework.org/schema/context/spring-context.xsd
                          http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd">
	<!--开启组件扫描-->
    <context:component-scan base-package="com.crud"></context:component-scan>
	<!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/client/"></property>
        <property name="suffix" value=".jsp"></property>
    </bean>

    <!--开启驱动-->
    <mvc:annotation-driven/>
    <!--处理静态资源-->
    <mvc:default-servlet-handler/>


</beans>

一叶，。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前后端通过Ajax与Json传输数据

后端【省略Bean】 @Controllerpublic class EmployeeHandler { @Autowired private EmployeeDao employeeDao; @Autowired private DepartmentDao departmentDao; /** * 通过Ajax来进行前后端传输数据，将对象转为Json数据传输 * @return */ @RequestMapping("/testJson") @ResponseBody/
复制链接

扫一扫

专栏目录