spring mvc 与前端ajax通信

  1. 解决ajax跨域操作
  2. ajax与spring通信中,json字符串和js对象及java对象之间的转化。


前端和后端分离是一种趋势,但前端和后端的通信,其实大多由ajax来承担。


spring mvc 中,由ajax 传递来的json字符串,在本文中用的是spring mvc的注解:@RequestBody来解析成java对象。

spring中返回的对象,自动传递给前端json字符串的操作,我们用spring web的配置:

<mvc:annotation-driven>
    <mvc:message-converters>
    	<bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter" />
    </mvc:message-converters>
 </mvc:annotation-driven>

这里,我们选择了
FastJsonHttpMessageConverter
来使得我们的对象自动转换为json字符串,并返回到前端。


在本例子中,我用maven 的jetty插件运行一个web 服务,用web storm 写了一个简单的html5页面。

由于ajax跨域操作的原因,虽然web请求返回200,但是,前端始终不能正确执行,所以,我在spring mvc那层解决跨域操作,在web.xml配置一个过滤器:

<filter>
		<filter-name>CORS</filter-name>
		<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
	</filter>
	<filter-mapping>
		<filter-name>CORS</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>

,这个过滤器就解决了ajax跨域操作。

记得添加maven依赖:

<dependency>
			<groupId>com.thetransactioncompany</groupId>
			<artifactId>cors-filter</artifactId>
			<version>2.4</version>
		</dependency>


spring mvc 那层写了一个简单controller测试:


@Controller
public class SImpleController {

	@RequestMapping("/getAString.do")
	@ResponseBody
	public ModelResult<String> getAString() {

		ModelResult<String> modelResult = new ModelResult<>();
		modelResult.setModel("hello doctor");
		return modelResult;
	}

	@RequestMapping("/update.do")
	@ResponseBody
	public ModelResult<UserInfo> updateUserInfo(@RequestBody UserInfo userInfo) {
		ModelResult<UserInfo> modelResult = new ModelResult<>();
		userInfo.setName("hello doctor");
		userInfo.setPasswd("1235678");
		userInfo.setSex("man");
		modelResult.setModel(userInfo);
		return modelResult;
	}

	 

}

html5,ajax请求代码:

function getString(){

    $.ajax({
        url:"http://localhost:8080/getAString.do",
        type:"POST",
        dataType:'json',
        success: function( data ) {
            if(data.success == true) {
                $(".divget").html("<strong>" + data.model + "</strong>  ");

            }else{
                var errorInfo = data.error;
                var str = "";
                for(var p in errorInfo){
                    str += p +":" + errorInfo[p];
                }
                $( ".divget" ).html( "<strong>" + str + "</strong>  " );

            }

        },

    });
}


function update(){
    var info ={
        name:"",
        passwd:"",
        sex:""
    };

    $.ajax({
        url:"http://localhost:8080/update.do",
        type:"POST",
        dataType:'json',
        contentType:"application/json",
        data:JSON.stringify(info),
        success: function( data ) {
            if(data.success == true) {
                $(".update").html("<strong>" + JSON.stringify(data.model) + "</strong>  ");

            }else{
                var errorInfo = data.error;
                var str = "";
                for(var p in errorInfo){
                    str += p +":" + errorInfo[p];
                }
                $( ".update" ).html( "<strong>" + str + "</strong>  " );

            }

        }
    });
}

dataType:'json',
代表返回的内容格式。


contentType:"application/json",
data:JSON.stringify(info),
这个两行代表我们请求数据的格式是json字符串。js对象转json字符串的操作也有函数执行。

代码运行结果:

spring mvc 与前端ajax通信_第1张图片

代码:https://github.com/sdcuike/springmvc-ajax

今天中秋,写的粗略了点,前端也没怎么接触过。



你可能感兴趣的:(java对象,转化,json字符串,ajax跨域操作,json字符串和js对象转化)