Ajax请求与向应

Ajax请求与向应

我们在项目中经常遇到很多种情况是直接通过jsp页面访问我们的控制器的，这是我们就需要用到ajax这项技术来完成我们的请求与向应

思路解析：

使用json个格式的数据的步骤

 

1、         第一步：引入jackson包支持（当我们使用responsebody注解的时候，把类对象转换成json格式的数据需要这个包的支持），往pom.xml文件中引入即可

2、         第二步：在我们的controller类上面写上responsebody注解

3、         第三步：编写封装json返回数据的通用类

4、         controller类返回我们封装的json通用类

 

我们需要先这jsp页面中编写一个ajax的请求方法

代码如下：

$(function(){

     $.ajax({

        type:"post",

        url:"./mem/selectem",

        data:"",

        success:function(result){

          show_nav(result);

       

        }

     });

});

注意我们的js代码需要写在<script>标签中，还需要引用我们的js文件

然后我们需要封装一个实体类用来返回数据

代码如下：

package com.huweiyang.bean;

import java.util.HashMap;

import java.util.Map;

 

/**

 * 带有状态码，状态信息的通用返回类

 *

 * @author Frank

 *

 */

public class JsonMsg {

       // 666即成功，444即失败

       private int code;

       // 提示信息

       private String msg;

       // 服务端要返回到客户端的数据

       private Map<String, Object> ReturnData = newHashMap<String, Object>();

 

       /**

        * 自定义一个简单的成功方法

        * @return

        */

       public static JsonMsg success(){

              JsonMsg msg = new JsonMsg();

              msg.setCode(666);

              msg.setMsg("执行成功!");

              return msg;

       }

       /**

        * 自定义一个简单的失败方法

        * @return

        */

       public static JsonMsg fail(){

              JsonMsg msg = new JsonMsg();

              msg.setCode(444);

              msg.setMsg("执行失败!");

              return msg;

       }

       /**

        * 自定义一个添加返回数据的方法

        * @return

        */

       public JsonMsg add(String arg0,Object arg1){

              this.getReturnData().put(arg0, arg1);

              return this;

       }

       public int getCode() {

              return code;

       }

       public Map<String, Object> getReturnData() {

              return ReturnData;

       }

       public void setReturnData(Map<String, Object>returnData) {

              ReturnData = returnData;

       }

       public void setCode(int code) {

              this.code = code;

       }

 

       public String getMsg() {

              return msg;

       }

 

       public void setMsg(String msg) {

              this.msg = msg;

       }

 

}

 

controller中我们的方法不需要改变只需要加上几句代码就行了

代码如下：

                 // 方法的路径

   @RequestMapping("/selectem")

// 通过这个注解来声明我们的controller是用ajax来请求的

   @ResponseBody

  public JsonMsg JackSon(@RequestParam(value = "pn", defaultValue = "1") Integer pn){

     PageHelper.startPage(pn, 3);

//   自定義的方法执行查询的方法

     List<Member>allUsers= ser.selectmem();

//   分頁中的值

     PageInfopage= newPageInfo(allUsers, 3);

     return JsonMsg.success().add("result",page);

   }

最后我们在jsp页面中将我们的数据显示出来，也是通过我们的js代码来显示的

代码如下：

function show_nav(result){

     $.each(result.returnData.result.list,function(index,item){

     var memberName = $("<td></td>").append(item.memberName);

     var memberPhone = $("<td></td>").append(item.memberPhone);

     var memberCarnumber = $("<td></td>").append(item.memberCarnumber);

     var memberCarbrand = $("<td></td>").append(item.memberCarbrand);

     var memberCarmileage = $("<td></td>").append(item.memberCarmileage);

     var memberInsure = $("<td></td>").append(item.memberInsure);

     var memberOther = $("<td></td>").append(item.memberOther);

     var edit_btn = $("<button></button>").addClass(

     "btn btn-info xbtn-sm").append("编辑").append("<span></span>")

     .addClass("glyphicon glyphicon-pencil");

     var del_btn = $("<button></button>").addClass(

     "btn btn-danger btn-sm").append("删除").append(

     "<span></span>").addClass("glyphiconglyphicon-trash");

     var doit = $("<td></td>").append(edit_btn).append(del_btn  );

    

     var tr = $("<tr></tr>").append(memberName).append(memberPhone).append(

        memberCarnumber).append(memberCarbrand).append(memberCarmileage).append(memberInsure)

          .append(memberOther).append(doit).appendTo("#tbody");

     });

};