Java 使用SpringMVC和ajax处理对象列表

使用AJAX和SpringMVC，如何从SpringController返回对象列表并使用Jquery显示它们。

发出以下Ajax请求：

$.ajax({
                    type: "POST",
                    url: "allUser.html",
                    dataType:'json',

                    data: "select=" + selectedCheckboxArray,
                    success: function(data){
                        var userListContent="";
                         var json =data.message;
                        $.each(json, function(i, obj) {


                            userListContent=userListContent+"<tr>";
                            userListContent=userListContent+"<td><input type='checkbox' value='"+obj.id+"'  id='select' name='select'/></td> ";
                            userListContent=userListContent+"<td id='NameColumn'>"+obj.firstName+" "+obj.lastName +"</td>";
                            userListContent=userListContent+"<td id='genderColumn'>"+ obj.gender +"</td>";
                            userListContent=userListContent+"<td id='userNameColumn'>"+ obj.userName +" </td>";
                            userListContent=userListContent+"<td id='userTypeColumn'> "+ obj.userType +"</td>";
                            userListContent=userListContent+"<td id='statusColumn'>"+ obj.status +"</td>";
                            userListContent=userListContent+"<td id='emailIdColumn'>"+ obj.emailId +"</td>";
                            userListContent=userListContent+"<td id='addressColumn'>"+ obj.address +"</td>";
                            userListContent=userListContent+"<td id='contactnoColumn'>"+ obj.contactNo +"</td>";
                            userListContent=userListContent+"</tr>";

                            });

                        $('#rounded-corner tbody').html(userListContent);

                        //console.log(userListContent);



                    },
                    error: function(e){


                    alert('Error: ' + e.responseText);
                    }
                    });

$.ajax({
类型：“POST”，
url:“allUser.html”，
数据类型：'json'，
数据：“select=“+selectedCheckboxArray，
成功：功能（数据）{
var userListContent=“”；
var json=data.message；
$.each（json，函数（i，obj）{
userListContent=userListContent+“”；
userListContent=userListContent+“”；
userListContent=userListContent+“”+obj.firstName+“”+obj.lastName+“”；
userListContent=userListContent+“”+obj.gender+“”；
userListContent=userListContent+“”+obj.userName+“”；
userListContent=userListContent+“”+obj.userType+“”；
userListContent=userListContent+“”+obj.status+“”；
userListContent=userListContent+“”+obj.emailId+“”；
userListContent=userListContent+“”+obj.address+“”；
userListContent=userListContent+“”+obj.contactNo+“”；
userListContent=userListContent+“”；
});
$（'#圆角tbody'）.html（userListContent）；
//log（userListContent）；
},
错误：函数（e）{
警报（“错误：”+e.responseText）；
}
});

MVC控制器

 @RequestMapping(value="/deleteUser",method= RequestMethod.POST)
     public @ResponseBody Map<String, Object> deleteUser(UserDetails user,HttpServletRequest request,HttpServletResponse response )throws ServletException,IOException
     {
         System.out.println("Ajax Request Received for delete User...............");
         Map<String, Object> model = new HashMap<String, Object>(); 

      JsonResponse js=new JsonResponse();
      js.setResult("pass");
      js.setStatus("active");
    // String operation=request.getParameter("operation");
     String[] selectedUserIdParameter = request.getParameterValues("select");
    System.out.println("Length:"+selectedUserIdParameter.length);
     /* Code Description:
      * Array "selectedUserIdParameter" above  has ID like {1,2,3,.....}, 
      * we need to use  array like {1 2 3 4 } without (,).so first we must convert.
      * Following code doing the same.
      * After Conversion Array  "selectedUserId" will have ID like {1 2 3 4 }
      * If You Know PHP explode()" function ,following is doing something like what explode() function does .
      */


     String msg="hello";
     List<UserDetails> usersList = userService.getAllUser();
     int no=usersList.size();
     System.out.println("Size:"+no);
     model.put("message", usersList);
     model.put("jso", js);

     return model;

 }

@RequestMapping（value=“/deleteUser”，method=RequestMethod.POST）
public@ResponseBody映射deleteUser（UserDetails用户、HttpServletRequest请求、HttpServletResponse响应）抛出ServletException、IOException
{
System.out.println（“收到删除用户的Ajax请求……”）；
映射模型=新的HashMap（）；
JsonResponse js=新的JsonResponse（）；
js.setResult（“通过”）；
js.setStatus（“主动”）；
//字符串操作=request.getParameter（“操作”）；
String[]selectedUserIdParameter=request.getParameterValues（“选择”）；
System.out.println（“长度：“+selectedUserIdParameter.Length”）；
/*代码说明：
*上面的数组“selectedUserIdParameter”的ID类似于{1,2,3，…}，
*我们需要使用类似于{1 2 3 4}的数组，不带（，）。所以首先我们必须转换。
*下面的代码执行相同的操作。
*转换后，数组“selectedUserId”将具有类似{1 2 3 4}的ID
*如果您知道PHP explode（）”函数，下面将执行类似explode（）函数的操作。
*/
String msg=“你好”；
List usersList=userService.getAllUser（）；
int no=usersList.size（）；
系统输出打印项次（“尺寸：+no”）；
model.put（“message”，usersList）；
model.put（“jso”，js）；
收益模型；
}

直接返回ArrayList应该可以

@RequestMapping(value="/deleteUser",method= RequestMethod.POST)
     public @ResponseBody ArrayList<UserDetails> deleteUser(UserDetails user,HttpServletRequest request,HttpServletResponse response )throws ServletException,IOException
     {
         System.out.println("Ajax Request Received for delete User...............");


    // String operation=request.getParameter("operation");
     String[] selectedUserIdParameter = request.getParameterValues("select");
    System.out.println("Length:"+selectedUserIdParameter.length);
     /* Code Description:
      * Array "selectedUserIdParameter" above  has ID like {1,2,3,.....}, 
      * we need to use  array like {1 2 3 4 } without (,).so first we must convert.
      * Following code doing the same.
      * After Conversion Array  "selectedUserId" will have ID like {1 2 3 4 }
      * If You Know PHP explode()" function ,following is doing something like what explode() function does .
      */


     String msg="hello";
     List<UserDetails> usersList = userService.getAllUser();
     int no=usersList.size();
     System.out.println("Size:"+no);

     return usersList;

 }

@RequestMapping（value=“/deleteUser”，method=RequestMethod.POST）
public@responseBy ArrayList deleteUser（UserDetails用户、HttpServletRequest请求、HttpServletResponse响应）抛出ServletException、IOException
{
System.out.println（“收到删除用户的Ajax请求……”）；
//字符串操作=request.getParameter（“操作”）；
String[]selectedUserIdParameter=request.getParameterValues（“选择”）；
System.out.println（“长度：“+selectedUserIdParameter.Length”）；
/*代码说明：
*上面的数组“selectedUserIdParameter”的ID类似于{1,2,3，…}，
*我们需要使用类似于{1 2 3 4}的数组，不带（，）。所以首先我们必须转换。
*下面的代码执行相同的操作。
*转换后，数组“selectedUserId”将具有类似{1 2 3 4}的ID
*如果您知道PHP explode（）”函数，下面将执行类似explode（）函数的操作。
*/
String msg=“你好”；
List usersList=userService.getAllUser（）；
int no=usersList.size（）；
系统输出打印项次（“尺寸：+no”）；
返回用户列表；
}

您将接受并返回JSON形式的对象，因此在spring dispatcher servlet xml中添加jackson mapper bean。Jackson mapper做到了这一切。您不需要手动进行映射或转换

<beans:bean id="jacksonMessageChanger"  class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
    <beans:property name="supportedMediaTypes" value="application/json" />
</beans:bean>

<beans:bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
    <beans:property name="messageConverters">
        <util:list id="beanList">
            <beans:ref bean="jacksonMessageChanger" />
        </util:list>
    </beans:property>
</beans:bean>

现在，您的控制器将如下所示：

@RequestMapping(value = "/deleteUser", method = RequestMethod.POST)
public @ResponseBody
List<UserDetails> deleteUser(@RequestBody UserDetails userDetails) {
    // fetch the userid to be deleted from the userDetails
    // remebmer the id of user to be deleted will be set in the ajax call

    userService.deleteUser(userDetails.getUserId());

    // again populate the user list to display on page
    List<UserDetails> userList = userService.getAllUser();

    return userList;
}

@RequestMapping（value=“/deleteUser”，method=RequestMethod.POST）
公共@ResponseBody
列表deleteUser（@RequestBody UserDetails UserDetails）{
//获取要从userDetails中删除的用户ID
//remebmer要删除的用户id将在ajax调用中设置
userService.deleteUser（userDetails.getUserId（））；
//再次填充要在第页上显示的用户列表
List userList=userService.getAllUser（）；
返回用户列表；
}

现在，ajax调用将如下所示：

function deleteUser() {
    // set variables into javascript object which you need to send to spring controller
    // the variable name here should be same as it is in your java class UserDetails.java

    var user = new Object();
    user.userId = 120; // id of user to be deleted

    $.ajax({
        type : 'POST',
        url : '/${your project context path here}/deleteUser',
        dataType : 'json',
        data : JSON.stringify(user),
        contentType : 'application/json',
        success : function(data) {
           //here in data variable, you will get list of all users sent from 
           // spring controller in json format, currently its object
           // iterate it and show users on page

           showUsers(data);
        },
        error : function() {
            alert('error');
        }
    });
}

function showUsers(data) {
    // and here you show users on page
    //following code just example

    $('#allUsers').append("<option value='-1'>Select User</option>");
        for ( var i = 0, len = data.length; i < len; ++i) {
            var user = data[i];
            $('#allUsers').append("<option value=\"" + user.userId + "\">" + user.userName+ "</option>");
    }
}

函数deleteUser（）{
//将变量设置为需要发送到spring控制器的javascript对象
//这里的变量名应该与java类UserDetails.java中的变量名相同
var user=新对象（）；
user.userId=120；//要删除的用户的id
$.ajax({
键入：“POST”，
url:'/${此处的项目上下文路径}/deleteUser'，
数据类型：“json”，
数据：JSON.stringify（用户），
contentType:'应用程序/json'，
成功：功能（数据）{
//在数据变量中，您将获得从发送的所有用户的列表
//json格式的spring控制器，当前为其对象
//迭代并在页面上显示用户
显示用户（数据）；
},
错误：函数（）{
警报（“错误”）；
function validateUserBeforeCreatingUser(email){ 
    var url='validateUser.htm?'&email='+email;
    $.ajax({
        url: url,
        cache: false,
        success: function(response){
            $("#errors").html(jQuery.trim(response));
            //if errors not present
            if(jQuery.trim(response)==''){
                createUser();
            }
        },
        error: function(response){
        }
    });
}

public ModelAndView validateUser(HttpServletRequest request,
        HttpServletResponse response) throws Exception {

    /* write code to validate user, 
                 if user with specified email not found 
                      then create error 
                 else
                     keep errors page blank
            */                

    return new ModelAndView("partial", "errors", errors);
}