springmvc与ajax交互

Posted 2020-09-28 liyafeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了springmvc与ajax交互相关的知识，希望对你有一定的参考价值。

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":"zhangsan@sina.com"};  
    var data2={"user_name":"lisi","user_age":"26","user_email":"lisi@sina.com"};  
    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).ge以上是关于springmvc与ajax交互的主要内容，如果未能解决你的问题，请参考以下文章 
 springmvc与ajax交互常见问题
 springmvc与ajax交互
 springmvc与Ajax交互
 ajax 二级联动与springmvc 交互
 SpringMVC之数据传递三Ajax与Controller交互
 content-type常见类型辨析(以ajax与springmvc前后端交互为例)