Article From:https://www.cnblogs.com/lee24789229/p/9216860.html

AJAX It is a technology that can update some web pages without reloading the entire web page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX It is a technology used to create fast and dynamic web pages.

By carrying out a small amount of data exchange with the server in the background, AJAX enables web pages to be updated asynchronously. This means that a part of the web page can be updated without reloading the entire web page.

Traditional web pages (without using AJAX) need to reload the entire webpage if they need to update content.

There are many application cases using AJAX: Sina micro-blog, Google map, Kaixin net and so on.

The front-end Ajax and the back-end Spring MVC controller have the following five data interaction modes.

Way throughURLBiography

adoptURLHang up the parameters, such as/auth/getUser?userid=’6′

The server – side method can be written as:getUser(String userid),You can also add other parameters such asHttpSession, HttpServletRequest,HttpServletResponse,Mode,ModelAndViewWait.

 

Mode two single value transmission

The front call is like:

ajaxPost(“/base/user/exchangeSort”,{“id”:rid,“otherid”:otherid},function(data,status){

                                       xxxxxx

                        xxxxxx

                             });

 

The server side is:

public String exchangeSort(String id, String otherid)

 

Mode three object transmission

The front call is like:

  var org={id:id};

    ajaxPost(“/base/org/getOrgById”, org,function(data,textStatus){

                  xxxx

                  xxxx

     }); 

Server side

public Org getOrgById(Org org)

 

 

Mode four object serialization

The front call is like:

var ueser={id:rowId};

var data=ajaxPost(“/base/user/findById”,{“userObj”:JSON.stringify(user)},null);

perhaps

var ueser={ };//create object

user[“id”]=id;

user[“name”]=$(“#name”).val();

user[“dept”]={};//Foreign key object

user[“dept”][“id”]=$(“#deptid”).val();

ajaxPost(“/base/user/addUser”,{“userObj”:JSON.stringify(user)},function(data){xxxx;xxxxx;});

 

The server side is:

      @RequestMapping(“/findById”)

      @ResponseBody

      public UserInfo findById(String userObj) {

       //UsefastJSON

             UserInfo user = JSON.parseObject(userObj, UserInfo.class);

             user = (UserInfo) userService.findById(UserInfo.class, user.getId());

             return user;

      }

 

Mode five list to pass the reference

Front desk code such as:

               var objList = new Array();

                            grid.forEachRow(function(rId) {

                                  var index = grid.getRowIndex(rId);

                                  var obj = {};

                                   obj[“id”] = rId;

                                   obj[“user”] = {};

                                   obj[“user”][“id”] = $(“#userId”).val();

                    //This is not recommended.

                                   //obj[“kinShip”] = grid.cells(rId, 1).getValue();

                                   //obj[“name”] = grid.cells(rId, 2).getValue();

                   obj[“kinShip”]=grid.cells(rId,grid. getColIndexById (“columnName”)).getValue();

obj[“name”]=grid.cells(rId,grid.getColIndexById(“name”)).getValue();

                                  if(grid.cells(rId, 3).getValue()!=null && grid.cells(rId, 3).getValue()!=“”) {

                                         var str = grid.cells(rId, 3).getValue().split(“-“);

                                         var day = parseFloat(str[2]);

                                         var month = parseFloat(str[1])-1;

                                         var year = parseInt(str[0]);

                                         var date=new Date();

                                          date.setFullYear(year, month, day);

                                          obj[“birth”] = date;

                                   }else {

                                          obj[“birth”] =“”;

                                   }

                                   obj[“politicalStatus”]  = grid.cells(rId, 4).getValue();

                                   obj[“workUnit”] = grid.cells(rId, 5).getValue();

                                  if (grid.cells(rId, 6).isChecked())

                                          obj[“isContact”] =“1”;

                                  else

                                          obj[“isContact”] =“0”;

                                   obj[“phone”] = grid.cells(rId, 7).getValue();

                                   obj[“remark”] = grid.cells(rId, 8).getValue();

                                   obj[“sort”] = index;

                                   objList.push(obj);

                            });

                           

                            ajaxPost(“/base/user/addUpdateUserHomeList”, {

                                  “userHomeList” : JSON.stringify(objList),

                                  “userId” : $(“#userId”).val()

                            },function(data, status) {

                                   xxxxx

                            });

 

Server side:

  @RequestMapping(“/addUpdateUserHomeList”)

       @ResponseBody   

       public String addUpdateUserHomeList(String userHomeList, String userId) {

             List<UserHome> userHomes = JSON

                           .parseArray(userHomeList, UserHome.class);//fastJSON

              if (userHomes != null && userHomes.size() > 0) {

                     try {

                            userService.addUpdateUserHomeList(userHomes, userId);

                     } catch (Exception e) {

                            e.printStackTrace();

                     }

              }

              return “200”;

       }

 Attached to the ajaxPost Code:

 function ajaxPost(url,dataParam,callback){
     var retData=null;
     $.ajax({ 
         type: "post",
         url: url, 
         data: dataParam,
         dataType: "json",  
         success: function (data,status) {
            // alert(data);
             retData=data;
             if(callback!=null&&callback!=""&&callback!=undefined)
                 callback(data,status); 
         },
         error: function (err,err1,err2) {     
             alertMsg.error("The calling method has an exception: "+JSON.stringify (ERR) +" err1 "+ JSON.stringify (err1) +" err2: "+"JSON.stringify(err2));
         }  
 });       
      return retData;
 }

 

Leave a Reply

Your email address will not be published. Required fields are marked *