• Spring mvc,jQuery和JSON数据交互


    一、实验环境的搭建

    1、Spring mvc jar。

    导入spring mvc运行所需jar包。导入如下(有多余)

     

    2、json的支持jar

     

    3、加入jQuery。

    选用jquery-3.0.0.min.js,放在WebRoot/JS文件夹

     

    导入jQuery到jsp页面如下

     

    4、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_3_0.xsd" id="WebApp_ID" version="3.0">

      <display-name>springmvcjson</display-name>

      <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.xml</param-value>

      </init-param>

      <load-on-startup>1</load-on-startup>

      </servlet>

      <servlet-mapping>

      <servlet-name>springmvc</servlet-name>

      <url-pattern>*.action</url-pattern>

      </servlet-mapping>

      <welcome-file-list>

        <welcome-file>index.html</welcome-file>

        <welcome-file>index.htm</welcome-file>

        <welcome-file>index.jsp</welcome-file>

        <welcome-file>default.html</welcome-file>

        <welcome-file>default.htm</welcome-file>

        <welcome-file>default.jsp</welcome-file>

      </welcome-file-list>

    </web-app>

    5、springmvc.xml

    classpath下

    <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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"

             xsi:schemaLocation="http://www.springframework.org/schema/beans

                       http://www.springframework.org/schema/beans/spring-beans-3.2.xsd

                       http://www.springframework.org/schema/mvc

                       http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd

                       http://www.springframework.org/schema/context

                       http://www.springframework.org/schema/context/spring-context-3.2.xsd

                       http://www.springframework.org/schema/aop

                       http://www.springframework.org/schema/aop/spring-aop-3.2.xsd

                       http://www.springframework.org/schema/tx

                       http://www.springframework.org/schema/tx/spring-tx-3.2.xsd ">

            

             <!-- <bean name="/test01.action" class="com.xzw.json.controller.JsonTest"></bean> -->

             <!-- View -->

             <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"></bean>

            

            

             <!-- 注解映射和适配器 -->

             <mvc:annotation-driven ></mvc:annotation-driven>

            

      

      

             <!-- 组件扫描 -->

             <context:component-scan base-package="com.xzw.json.controller"></context:component-scan>

            

             <!-- 使用@Autowired、@Required等注解

             如不必设置<bean class="org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor "/>和

             <bean class="org.springframework.beans.factory.annotation.RequiredAnnotationBeanPostProcessor"/>等等

             -->

             <context:annotation-config /> 

            

    </beans>

    二、实验例子编写

    1、请求和返回都是JSON

    a).程序发起

    index.jsp的一个按钮

    b).js函数

     

    function requestByJson() {

             $.ajax({

                       type : 'post',

                       url : '${pageContext.request.contextPath}/jsonsource.action',

                       //设置contentType类型为json

                       contentType : 'application/json;charset=utf-8',

                       //json数据

                       data : '{"username":"reader001","password":"psw001"}',

                       //请求成功后的回调函数

                       success : function(data) {

                                alert(data.username);

                       }

             });

    }

    c).Controller/Mapping

    @RequestMapping("/jsonsource")

    //@RequestBody 将json对象转成java对象

    //@ResponseBody 表示返回的是json对象

    public @ResponseBody User jsonSource(@RequestBody User user){

            

             return user;

    }

    d).测试结果

    查看浏览器的开发者工具信息

    request

     

    response

     

    PS:User类有3个属性,id,username,password。

    回调函数使用alert(data.username);

     

    2、请求是key/value值,返回JSON

    a).程序发起

     

    b).js函数

    //请求是key-value的值,返回的是json

    function resquestByKV() {

             $.ajax({

                       type : 'post',

                       url : '${pageContext.request.contextPath}/kvsource.action',

                       data : 'username=kvuser&password=kvpsw',

                       success : function(data) {

                                alert(data.username);

                       }

             });

    }

    c).Controller/Mapping

     

    参数没有@RequestBody。

    d).测试结果

    参考1。

    三、提交表单数据,返回json结果。

    1、实验准备和预测

    设计两个form,将form1的数据提交后,做一定的处理后返回到form2。处理结果依据controller。

     

    2、将数据作为json发出

    a).JS函数

     

    b).Controller

     

    c).结果

     

    实验过程,发现如果要传递json数据(java程序传出),由于json的字符串要在双引号中,要达到双引号的效果,引号较混乱。

    3、将数据作为key/value的形式发出。

    a).JS函数

     

    b).Controller

     

    c).结果

     

    四、Spring mvc和ajax中文乱码问题

    1、返回的java对象

    如果是java对象作为json对象返回的话,不需要设置过滤器,spring的配置文件也没有设置字符编码,中文正常返回。估计是json的支持包或spring有编码的设置。

    2、返回字符串

    例子请求的是这个方法

     

    a).设置filter字符编码

    spring的字符过滤器org.springframework.web.filter.CharacterEncodingFilter

    无效,是乱码。显示如下

     

    b).解决方法一、@ResponseBody

    加上produces。如produces="application/json; charset=utf-8"。

     

    设置后没有乱码

     

    c).解决方法二、mvc:annotation-driven

    这个方法是针对所有。

    在mvc:annotation-driven加上下面的StringHttpMessageConverter

    主要是text/html;charset=UTF-8就可以,其他都不可以。避免乱码。

    <mvc:annotation-driven>

    <mvc:message-converters register-defaults="true">

             <bean class="org.springframework.http.converter.StringHttpMessageConverter">

                       <property name="supportedMediaTypes"> 

        <list> 

             <!--application/json和text/plain无法解决返回字符串的乱码  -->

             <!-- <value>application/json;charset=UTF-8</value> 

              <value>text/plain;charset=UTF-8</value>

              -->

             <value>text/html;charset=UTF-8</value>

        </list> 

    </property>

             </bean>

    </mvc:message-converters>

    </mvc:annotation-driven>

    发现:再去掉注解中的参数produces="application/json; charset=utf-8",然后测试。supportedMediaTypes加入text/html;charset=UTF-8能解决乱码。且java对象的json返回也没有出现乱码问题。

  • 相关阅读:
    HTTP Header 详解
    面试题----网页/应用访问慢突然变慢,如何定位问题
    PHP实现斐波那契数列
    常见的HTTP返回状态值
    通过实例理解单列索引、多列索引以及最左前缀原则
    Btree索引和Hash索引
    遍历和删除文件夹
    面试题之----禁掉cookie的session使用方案
    面试题之----写个函数来解决多线程同时读写一个文件的问题
    heredoc
  • 原文地址:https://www.cnblogs.com/jway1101/p/5833852.html
Copyright © 2020-2023  润新知