Spring MVC 结合jQuery实现AJAX

做前端几年了，很久没有写java后端代码，最近学习了下spring mvc ，用jquery结合起来还比较好用。

不说废话，大体把代码贴出来，希望对大家有启发。有繁杂的地方大家提出，一起进步。

前端 jquery调用点击 btn1点击触发按钮事件，序列form1中的数据发送一个post请求

<h3>填写资料,立即报名</h3>
<form method="post" action="/activity/saveActivityIndividual" class="form1">
<h3>个人报名</h3>
<p> 姓名:<input type="text" name="name" /></p>
<p> 性别: <input type="text" name="sex" /></p>
<p> 星座:<input type="text" name="constellation" /></p>
<p> 电话: <input type="text" name="telephoneNumber" /></p>
<input type="button" value="Submit" class="btn1" />
</form>

$(".btn1").on("click",function(){
var json1 = $(".form1").serialize();
$.ajax({
url:"/activity/saveActivityIndividual?format=json",
type: "POST",
data:json1,
success: function(data, textStatus){
alert(data.scode); // 1 success  -1 error
},
error: function(data){
alert("Connection error");
}
});
});

后端 接受参数用 params = "format=json" 是否有参数format ="json"和produces = "application/json"请求头是否是application/json 来判断是否是一个json请求

JsonPackageWrapper用来存储返回的json对象，JsonPackageWrapper 我这里使用的是org.codehaus.jackson类库，例子中操作数据库后返回结果。

package com.xiu.portal.web.controller;

import org.slf4j.ext.XLogger;
import org.slf4j.ext.XLoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller

@RequestMapping(value = "/activity")
public class ActivityRegistrationController {

private static final XLogger LOGGER = XLoggerFactory.getXLogger(ActivityRegistrationController.class);
@Autowired
private ActivityTeamManager activityTeamManager;

@RequestMapping(value = "saveActivityTeam", method = RequestMethod.POST, produces = "application/json", params = "format=json")
public String saveActivityTeam(ActivityTeam activityTeam, Model model) {

JsonPackageWrapper json = new JsonPackageWrapper();
try {
long numOfPhone = activityTeamManager.findActivityTeamByPhone(activityTeam.getCaptainTelephoneNumber());
if(numOfPhone <=0){
activityTeamManager.addActivityTeam(activityTeam);
json.setScode(JsonPackageWrapper.S_OK);
json.setSmsg("sucuss");
}else{
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg("phone have used");
}
}catch (PortalBaseException e) {
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg(e.getMessageWithSupportCode());

} catch (Exception e) {
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg("system exception");
}
model.addAttribute(Constants.JSON_MODEL__DATA, json);
return "";
}

}

下面说下jsonp

前端，样子和上面差不多，改几个参数

$(".btn1").on("click",function(){
var json1 = $(".form1").serialize();
$.ajax({
url:"http://192.168.0.2/activity/saveActivityIndividual?format=jsonp&callback=?",
type: "GET",
dataType:"jsonp",
data:json1,
success: function(data, textStatus){
alert(data.scode); // 1 success  -1 error
},
error: function(data){
alert("Connection error");
}
});
});

后端 接受参数用 params =“ format=jsonp” 是否有参数“ format=jsonp” 和produces = "application/javascript"请求头是否是application/json 来判断是否是一个jsonp请求

jsonp的原理其实是请求一个js外链，请求参数只能是get是一个很大的局限，但是在某些场景下比较适合。

package com.xiu.portal.web.controller;

import org.slf4j.ext.XLogger;
import org.slf4j.ext.XLoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller

@RequestMapping(value = "/activity")
public class ActivityRegistrationController {

private static final XLogger LOGGER = XLoggerFactory.getXLogger(ActivityRegistrationController.class);

@Autowired
private ActivityIndividualManager activityIndividualManager;

@RequestMapping(value = "to",method = RequestMethod.GET)
public String toActivity(){
return "pages/activityRegistration/create";
}
@RequestMapping(value = "saveActivityTeam", method = RequestMethod.GET, produces = "application/javascript", params = "format=jsonp")
public String saveActivityTeam(ActivityTeam activityTeam, Model model) {
// 得以登录用户信息

JsonPackageWrapper json = new JsonPackageWrapper();
try {
long numOfPhone = activityTeamManager.findActivityTeamByPhone(activityTeam.getCaptainTelephoneNumber());
if(numOfPhone <=0){
activityTeamManager.addActivityTeam(activityTeam);
json.setScode(JsonPackageWrapper.S_OK);
json.setSmsg("sucuss");
}else{
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg("phone have used");
}
}catch (PortalBaseException e) {
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg(e.getMessageWithSupportCode());

} catch (Exception e) {
json.setScode(JsonPackageWrapper.S_ERR);
json.setSmsg("system exception");
}

model.addAttribute(Constants.JSON_MODEL__DATA, json); return ""; }}