java spring mvc ajax_Ajax与SpringMVC交互详解

Ajax的使用是很经常的，最近在写自己的博客系统的时候也用到了，在这总结一下用法，有完整例子

本文章统一用index.jsp页面

姓名：

年龄：

form表单参数转换

主要是json交互需要使用

序列化成拼接字符串(用serialize())

$('#form').serialize() //

结果：

转换成json对象

先将form表单参数转换成对象

//将一个表单的数据返回成对象

$.fn.serializeObject = function() {

var arrayData, objectData;

arrayData = this.serializeArray();

objectData = {};

$.each(arrayData, function() {

var value;

if (this.value != null && this.value != '') {

value = this.value;

} else {

value = null;

}

if (objectData[this.name] != null) {

if (!objectData[this.name].push) {

objectData[this.name] = [ objectData[this.name] ];

}

objectData[this.name].push(value);

} else {

objectData[this.name] = value;

}

});

return objectData;

}

再用JSON.stringify()方法转化为json对象即可

var Object = $('#form').serializeObject();

var json = JSON.stringify(Object);

注意：

stringify()用于从一个对象解析出字符串

var str = {a:1,b:2};

JSON.stringify(str);

结果：

"{"a":1,"b":2}"

parse()用于从一个字符串中解析出json对象

var str = '{"name":"hope","age":"20"}';

JSON.parse(str);

结果：

Object

age: "23"

name: "hope"

__proto__: Object

SpringMVC与ajax

环境：tomcat7.0, eclipse, jdk1.8

Spring4.3.4, jackson2.8.7

添加SpringMVC支持json的jar包下载地址，或者去Maven仓库下载

如图：

注意： 如果运行出现java.lang.NoSuchMethodError: com.fasterxml异常，说明Spring版本与json版本不兼容，解决方案：提高json版本。

新建index.jsp(在文章开头)

新建模型UserModel

package com.entity;

public class UserModel {

private String username;

private int age;

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public int getAge() {

return age;

}

public void setAge(int age) {

this.age = age;

}

}

新建UserController

package com.controller;

import java.util.*;

import java.util.HashMap;

import java.util.Map;

import org.hibernate.annotations.common.util.impl.LoggerFactory;

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.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import com.entity.UserModel;

@Controller

@RequestMapping("/user")

public class UserController {

private org.jboss.logging.Logger logger = LoggerFactory.logger(UserController.class);

@RequestMapping(value = "/list", method = RequestMethod.GET)

@ResponseBody //必须要有

public Map getUserList() {

logger.info("获取列表成功");

List list = new ArrayList();

UserModel um = new UserModel();

um.setUsername("hope");

um.setAge(20);

list.add(um);

Map modelMap = new HashMap(3);

modelMap.put("total", "1");

modelMap.put("data", list);

modelMap.put("success", "true");

return modelMap;

}

@RequestMapping(value = "/add", method = RequestMethod.POST)

@ResponseBody //必须要有

public Map addUser(@RequestBody UserModel model) {

logger.info("新增model");

logger.info("捕获到前台Model：" + model.getUsername());

Map map = new HashMap(1);

map.put("success", "true");

return map;

}

}

编写Ajax

//将一个表单的数据返回成对象

$.fn.serializeObject = function() {

var arrayData, objectData;

arrayData = this.serializeArray();

objectData = {};

$.each(arrayData, function() {

var value;

if (this.value != null && this.value != '') {

value = this.value;

} else {

value = null;

}

if (objectData[this.name] != null) {

if (!objectData[this.name].push) {

objectData[this.name] = [ objectData[this.name] ];

}

objectData[this.name].push(value);

} else {

objectData[this.name] = value;

}

});

return objectData;

}

$(document).ready(

function() {

jQuery.ajax( {

type : 'GET',

contentType : 'application/json',

url : 'user/list',

dataType : 'json',

success : function(data) {

if (data && data.success == "true") {

$('#info').html("共" + data.total + "条数据。
");

$.each(data.data, function(i, item) {

$('#info').append(

"姓名：" + item.username

+ "，年龄：" + item.age);

});

}

},

error : function() {

alert("error")

}

});

$("#submit").click(function() {

var Object = $('#form').serializeObject();

var json = JSON.stringify(Object);

jQuery.ajax( {

type : 'POST',

contentType : 'application/json',

url : 'user/add',

data : json,

dataType : 'json',

success : function(data) {

alert("新增成功！");

},

error : function(data) {

alert("error")

}

});

});

});