springmvc与Ajax交互分析

虾米哥 阅读:279 2020-02-17 21:14:12 评论:0

Jsp页面:

需要引入jquery-1.10.2.min.js、json2.js、jquery.json-2.3.js三个文件

<%@ page contentType="text/html; charset=utf-8" language="java" 
    errorPage=""%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>springmvc与Ajax交互</title> 
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/json2.js"></script> 
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.json-2.3.js"></script>     
    <link href="<%=request.getContextPath()%>/css/newmain1.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <h3></h3> 
    <form id="form1" action="<%=request.getContextPath()%>/User/saveUser" method="post" onsubmit="return chkInfo(this);"> 
    <div class="right_main" align="center" id="div_operate"> 
        <div class="form_title" style="width: 60%"> 
            <div class="title_leftbg"></div> 
            <div class="title_nr">用户信息</div> 
            <div class="title_rightbg"></div> 
        </div> 
        <div class="right_bg" style="width: 60%"> 
            <div class="right_main"> 
                <table width="60%" border="1" align="center" class="table_normal"> 
                    <tr> 
                        <td width="25%" style="text-align: right;">姓名:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <input type="text" id="userName" name="user_name" size="25" value="${User.user_name }"/> 
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">性别:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <select id="userSex" name="user_sex" style="width:186" > 
                                <option value="">请选择</option> 
                                <c:if test="${!empty sexList}"> 
                                    <c:forEach items="${sexList}" var="sexItem"> 
                                        <option value="${sexItem.value}"  
                                        <c:if test="${sexItem.value eq User.user_sex}">selected = "selected"</c:if>> 
                                            ${sexItem.text} 
                                        </option> 
                                    </c:forEach> 
                                </c:if> 
                            </select>     
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">年龄:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <input type="text" id="userAge" name="user_age" size="25" value="${User.user_age }" /> 
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">邮箱:&nbsp;&nbsp;&nbsp;&nbsp; 
                        </td> 
                        <td style="text-align: left;"> 
                            <input type="text" id="userEmail" name="user_email" size="25" value="${User.user_email}" /> 
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">电话:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <input type="text" id="userTelephone" name="user_telephone" 
                                size="25" value="${User.user_telephone }" /> 
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">学历:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <select id="userEducation" name="user_education" style="width:186" > 
                                <option value="">请选择</option> 
                                <c:if test="${!empty educationList}"> 
                                    <c:forEach items="${educationList}" var="educationItem"> 
                                        <option value="${educationItem.value}"  
                                        <c:if test="${educationItem.value eq User.user_education}"> 
                                        selected = "selected"</c:if>> 
                                            ${educationItem.text} 
                                        </option> 
                                    </c:forEach> 
                                </c:if> 
                            </select>     
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">职称:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <select id="userTitle" name="user_title" style="width:186" > 
                                <option value="">请选择</option> 
                                <c:if test="${!empty titleList}"> 
                                    <c:forEach items="${titleList}" var="titleItem"> 
                                        <option value="${titleItem.value}"   
                                        <c:if test="${titleItem.value eq User.user_title}">selected = "selected"</c:if>> 
                                            ${titleItem.text} 
                                        </option> 
                                    </c:forEach> 
                                </c:if> 
                            </select>     
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td width="25%" style="text-align: right;">所属部门:&nbsp;&nbsp;&nbsp;&nbsp;</td> 
                        <td style="text-align: left;"> 
                            <select id="userDept" name="dept_id" style="width:186" > 
                                <option value="">请选择</option> 
                                <c:if test="${!empty deptList}"> 
                                    <c:forEach items="${deptList}" var="deptItem"> 
                                        <option value="${deptItem.id}"  
                                        <c:if test="${deptItem.id eq User.dept_id}">selected = "selected"</c:if>> 
                                            ${deptItem.dept_name} 
                                        </option> 
                                    </c:forEach> 
                                </c:if> 
                            </select>     
                            <span class="xing">*</span> 
                        </td> 
                    </tr> 
                    <tr> 
                        <td colspan="2"> 
                            <input type="hidden" name="id"  
                                <c:choose> 
                                    <c:when test="${User.id !=null}"> 
                                        value="${User.id}" 
                                    </c:when> 
                                    <c:otherwise> 
                                        value="0" 
                                    </c:otherwise> 
                                </c:choose> 
                            /> 
                            <input id="btn1" type="button" class="c_botton" value="post方式:提交Form表单" /> 
                            <input id="btn2" type="button" class="c_botton" value="post方式:提交Form表单(方法二)" /> 
                            <input id="btn3" type="button" class="c_botton" value="post方式:提交多个对象" /> 
                            <input id="btn4" type="button" class="c_botton" value="get方式" /> 
                            <input id="btn5" type="button" class="c_botton" value="post传参,方式一" /> 
                            <input id="btn6" type="button" class="c_botton" value="post传参,方式二" /> 
                            <input id="btn7" type="button" class="c_botton" value="post传参,方式三" />
<input id="btn8" type="button" class="c_botton" value="post方式提交,map接收" /> </td> </tr> </table> </div> </div> </div> </form> </body> </html>

页面效果:

添加一个通用方法,用于将一个表单的数据返回成JSON对象

//将一个表单的数据返回成JSON对象   
$.fn.serializeObject = function() {   
    var o = {};   
    var a = this.serializeArray();   
    $.each(a, function() {   
        if (o[this.name]) {   
            if (!o[this.name].push) {   
                o[this.name] = [ o[this.name] ];   
            }   
            o[this.name].push(this.value || '');   
        } else {   
            o[this.name] = this.value || '';   
        }   
    });   
    return o;   
};

1.post方式提交Form表单,后台JavaBean接收

//提交Form表单 
$("#btn1").click(function() { 
    var jsonuserinfo = JSON.stringify($('#form1').serializeObject());   
    alert(jsonuserinfo);   
    $.ajax({   
        type : 'POST',   
        contentType : 'application/json',   
        url : '<%=request.getContextPath()%>/User/addUserInfo',   
        data : jsonuserinfo,   
        dataType : 'json',   
        success : function(data) {   
            alert("新增成功!");   
        },   
        error : function(data) {   
            alert("error")   
        }   
    });   
});

后台方法:

/** 
 * ajax的post方式提交表单 
 * @param user 
 * @return 
 */ 
@RequestMapping(value="/addUserInfo",method=RequestMethod.POST) 
@ResponseBody 
public String addUserInfo(@RequestBody User user){ 
    System.out.println("user_name--------"+user.getUser_name()); 
    System.out.println("user_sex--------"+user.getUser_sex()); 
    System.out.println("user_age--------"+user.getUser_age()); 
    System.out.println("user_email--------"+user.getUser_email()); 
    System.out.println("user_title--------"+user.getUser_title()); 
    System.out.println("user_education--------"+user.getUser_education()); 
    System.out.println("user_telephone--------"+user.getUser_telephone()); 
     
    return "{}"; 
}

注:(1)JSON.stringify(jsonobj) 方法用于将Json对象转换成一个Json字符串,相反,如果将一个Json字符串转换成Json对象,可以用JSON.parse(str) 得到。

//需引入json2.js文件 
//Json字符串转Json对象 
var str = '{"name": "lxx", "age": "30"}';     
var obj = JSON.parse(str); //或者用$.parseJSON(str);也可以 
alert(obj.name); 
//Json对象转Json字符串 
var obj1={"name":"zhangsan","age":"25"}; 
alert(JSON.stringify(obj1));

(2)@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象,所以前台在传递数据的时候要将Json对象转换成Json字符串。
(3)Jquery ajax请求中有个dataType参数,作用是预期服务器返回的类型。如果设置为json,就要返回json格式的数据,而服务器返回空的话就会报ParseError,也就是说不能返回"",而要返回"{}"

(4)form表单中控件的name属性要和JavaBean中的属性名称一致,如果有不一致的话就不会提交成功。另外赋值的时候要和JavaBean中字段的数据类型一致,例如年龄为int型,你在前台输了个字符串,也不会提交成功。

2.post方式提交Form表单,另一种方法

其实和上面的方法差不多,不同的就是上面方法中Json对象是通过serializeObject()方法创建的,而下面的方法中Json对象是我们根据json数据格式自己构建的。在提交的时候都需要转换成Json字符串,因为后台是通过@RequestBody接收。

//提交Form表单,另一种方式 
$("#btn2").click(function(){ 
    var url='<%=request.getContextPath()%>/User/addUserInfo'; 
    var data={"user_name":$("#userName").val(),"user_sex":$("#userSex").val(),"user_age":$("#userAge").val(), 
    "user_email":$("#userEmail").val(),"user_telephone":$("#userTelephone").val(),"user_education":$("#userEducation").val(), 
    "user_title":$("#userTitle").val()};    
 
     $.ajax({ 
        type:'POST', 
        contentType : 'application/json',    
        url:url, 
        dataType:"json", 
        data:JSON.stringify(data), 
        async:false, 
        success:function(data){ 
            alert("新增成功!");       
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown){ 
           alert(XMLHttpRequest.status); 
           alert(XMLHttpRequest.readyState); 
           alert(textStatus); 
        } 
    }) 
})

后台方法和上面的一致。

3.post方式提交多个对象,后台用List接收

//提交多个对象 
$("#btn3").click(function(){ 
    var url='<%=request.getContextPath()%>/User/saveUserInfo'; 
 
    var saveDataAry=[];   
    var data1={"user_name":"zhangsan","user_age":"25","user_email":"[email protected]"};   
    var data2={"user_name":"lisi","user_age":"26","user_email":"[email protected]"};   
    saveDataAry.push(data1);   
    saveDataAry.push(data2);          
 
     $.ajax({ 
        type:'POST', 
        contentType : 'application/json',    
        url:url, 
        dataType:"json", 
        data:JSON.stringify(saveDataAry), 
        async:false, 
        success:function(data){ 
            alert("提交成功!");     
        }, 
        error: function(XMLHttpRequest, textStatus, errorThrown){ 
           alert(XMLHttpRequest.status); 
           alert(XMLHttpRequest.readyState); 
           alert(textStatus); 
        } 
    }) 
})

后台方法:

/** 
 * ajax提交多个对象 
 * @param users 
 * @return 
 */ 
@RequestMapping(value = "/saveUserInfo", method = RequestMethod.POST)   
@ResponseBody   
public String saveUserInfo(@RequestBody List<User> users) {   
    if(users!=null && users.size()>0){ 
        for(int i=0;i<users.size();i++){ 
            System.out.println("user_name--------"+users.get(i).getUser_name()); 
            System.out.println("user_age--------"+users.get(i).getUser_age()); 
            System.out.println("user_email--------"+users.get(i).getUser_email()); 
        } 
    } 
   return "{}"; 
} 

4.get方式传参,并且后台返回map数据

//get方式 
$("#btn4").click(function(){ 
    $.ajax( {   
        type : 'GET',   
        contentType : 'application/json',   
        url : '<%=request.getContextPath()%>/User/list',   
        dataType : 'json', 
        data:'id=111&str=abc', 
        success : function(data) {   
            if (data && data.success == "true") {   
                alert("共" + data.total + "条数据。");   
                $.each(data.data, function(i, item) {   
                      alert("姓名:" + item.user_name + ",年龄:" + item.user_age   
                      + ",性别:" + item.user_sex);   
                });   
            }   
        },   
        error : function() {   
            alert("error")   
        }   
    }); 
}) 

后台方法:

/** 
 * ajax的Get方式 
 * @param id 
 * @param str 
 * @return 
 */ 
@RequestMapping(value = "/list", method = RequestMethod.GET)   
@ResponseBody   
public Map<String, Object> list(@RequestParam(value="id") String id,@RequestParam(value="str") String str) {   
    List<User> list = new ArrayList<User>();   
    User um = new User();   
    um.setUser_name("zhangsan");   
    um.setUser_age(25);   
    um.setUser_sex("男");   
    list.add(um);   
    Map<String, Object> modelMap = new HashMap<String, Object>(3);   
    modelMap.put("total", "1");   
    modelMap.put("data", list);   
    modelMap.put("success", "true");   
    return modelMap;   
}

5.post方式传参,后台通过@RequestParam接收,并返回List

//post传参,方式一 
$("#btn5").click(function(){ 
    var data={"user_id":"111","user_name":"abc","user_email":"[email protected]"}; 
    $.ajax({ 
        url:'<%=request.getContextPath()%>/User/loadData', 
        type:'POST', 
        //data也可设置成"user_id=111&user_name=abc&[email protected]"这种方式 
        data:data, 
        //contentType : 'application/json', 
        //返回List或Map,dataType要设置为“json”.  
        dataType:'json', 
        success:function(data){ 
            $(data).each(function (i, value) {   
                    alert(value); 
            });   
        }, 
        error : function() {   
            alert("error")   
        }    
    }) 
})

后台方法:

/** 
 * ajax post方式传参,通过@RequestParam接收 
 * @param user_id 
 * @param user_name 
 * @param user_email 
 * @return 
 */ 
@RequestMapping(value="/loadData") 
@ResponseBody 
public List loadData(@RequestParam(value="user_id") int user_id,@RequestParam(value="user_name") String user_name, 
        @RequestParam(value="user_email") String user_email){ 
     
    System.out.println(user_id); 
    System.out.println(user_name); 
    System.out.println(user_email); 
     
    List<String> list=new ArrayList<String>(); 
    list.add("电视"); 
    list.add("空调"); 
    list.add("电冰箱"); 
    return list; 
}

6.post方式传参,后台通过request.getParameter接收

//post传参,方式二 
$("#btn6").click(function(){ 
    var data={"user_id":"111","user_name":"abc","user_email":"[email protected]"}; 
    $.ajax({ 
        url:'<%=request.getContextPath()%>/User/loadData1', 
        type:'POST', 
        data:data, 
        //contentType : 'application/json', 
        //只返回一个字符串,dataType要设置为“html”.  
        dataType:'html', 
        success:function(data){ 
            alert(data);   
        }, 
        error : function() {   
            alert("error")   
        }    
    }) 
})
/** 
 * ajax post方式传参,通过request.getParameter方式接收 
 * @param user_id 
 * @param user_name 
 * @param user_email 
 * @return 
 */ 
@RequestMapping(value="/loadData1") 
@ResponseBody 
public String loadData1(HttpServletRequest request,HttpServletResponse response){ 
    String user_id=request.getParameter("user_id"); 
    String user_name=request.getParameter("user_name"); 
    String user_email=request.getParameter("user_email"); 
     
    String result="success"; 
    return result; 
     
}

注意ajax的dataType要设置为html,因为后台返回的是字符串,不是json数据。

7.post方式传参,后台通过JavaBean接收

//post传参,方式三 
$("#btn7").click(function(){ 
    var data=$("#form1").serialize(); 
    //data可以有三种形式: 
    //1.var data={"id":"111","user_name":"abc","user_email":"[email protected]"}; 
    //2.vat data="id=111&user_name=abc&[email protected]"; 
    //3.var data=$("#form1").serialize(); 
    alert($("#form1").serialize()); 
    $.ajax({ 
        url:'<%=request.getContextPath()%>/User/loadData2', 
        type:'POST', 
        data:data, 
        //contentType : 'application/json', 
        //返回List或Map,dataType要设置为“json”.  
        dataType:'json', 
        success:function(data){ 
            $(data).each(function (i, value) {   
                    alert(value); 
            });   
        }, 
        error : function() {   
            alert("error")   
        }    
    }) 
})

后台方法:

/** 
 * ajax post方式传参,通过JavaBean接收 
 * @param user_id 
 * @param user_name 
 * @param user_email 
 * @return 
 */ 
@RequestMapping(value="/loadData2") 
@ResponseBody 
public List loadData2(User user){ 
     
    System.out.println(user.getId()); 
    System.out.println(user.getUser_name()); 
    System.out.println(user.getUser_email()); 
     
    List<String> list=new ArrayList<String>(); 
    list.add("电视"); 
    list.add("空调"); 
    list.add("电冰箱"); 
    return list; 
}

8.post方式提交参数,后台map接收

$("#btn8").click(function() { 
    var jsonuserinfo = JSON.stringify($('#form1').serializeObject());   
    alert(jsonuserinfo);   
    $.ajax({   
        type : 'POST',   
        contentType : 'application/json',   
        url : '<%=request.getContextPath()%>/User/addUserInfo1',   
        data : jsonuserinfo,   
        dataType : 'json',   
        success : function(data) {   
             alert("新增成功!");   
        },   
        error : function(data) {   
             alert("error")   
        }   
    });   
});

后台方法:

/** 
 * ajax的post方式提交表单,map接收 
 * @param user 
 * @return 
 */ 
@RequestMapping(value="/addUserInfo1",method=RequestMethod.POST) 
@ResponseBody 
public String addUserInfo1(@RequestBody Map<String,String> map){ 
    Iterator it=map.keySet().iterator(); 
    while(it.hasNext()){ 
        String key=(String)it.next(); 
        System.out.println(key+"----"+map.get(key)); 
    } 
    return "{}"; 
}

 总结:

1.springmvc与Ajax交互,可以传入三种类型的数据:

(1)文本:"uname=alice&mobileIpt=110&birthday=1983-05-12"或通过$("#form1").serialize()方法,后台可通过@RequestParam注解或request.getParameter接收或JavaBean接收。

(2)json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'},如果后台用@RequestBody注解接收的话,前台需要将参数由Json对象转换成Json对象的字符串,如果不用@RequestBody注解接收,那么参数就不用转成Json字符串了,后台可通过@RequestParam注解或request.getParameter接收或JavaBean接收。

(3)json数组:[{"name":"uname","value":"alice"},{"name":"mobileIpt","value":"110"},{"name":"birthday","value":"2012-11-11"}]

前台需要将Json对象转换成Json对象的字符串,后台通过@RequestBody注解接收。

2.后台返回数据的话,如果返回List或Map的话,ajax的dataType要设置成"json",如果返回的是字符串,dataType要设置成"html"。

3.其实提取表单数据的话只需要serialize()方法直接获取就可以了。

serialize()方法
格式:var data = $("form").serialize();
功能:将表单内容序列化成一个字符串。
这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。参数形式为:"uname=alice&mobileIpt=110&birthday=1983-05-12"

4.特别注意在给表单赋值时,要和后台方法的参数或JavaBean中的属性的数据类型一致,不然的话会报错,最好在前台加校验。我犯的一个错误是表单中年龄这个字段,我没输入值,这样提交到后台为空,但是JaveBean中age为int型,所以不匹配,提交一直不成功,后来在页面中输入数值就可以了。

标签:javaspringMVC
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容