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 ""; }}