web项目的一次HTTP请求

文档参考：https://www.w3school.com.cn/js/index.asp

文章根据个人工作经历，总结列举了常见的js中数据处理方法。文章使用的均为原生js脚本，涉及部分jquery和jsp脚本。

        文章主要关注与前后台数据间的转换和处理。一般的，html界面通过form表单或ajax等发起请求后，参数信息可以通过js处理封装或直接在后台中通过HttpServletRequest对象的getAttribute方法获取相关参数，具体参数如何，可以通过日志或请求头查看参数结构信息，此处不再具体分析。同样的，后台参数也可以封装处理后通过HttpServletRequest的setAttribute方法或ModelAndView对象返回。

一、前台参数提交及获取

    1、http post请求：

    通过ajax或jquery将数据封装为json或对象，发送post，后台使用@RequestMapping或@RequestBody接收

     @RequestMapping(value = "/aa/{name}", method = RequestMethod.POST)

    public String func(Model model, @PathVariable("name") String name) {

    ...

    }

     2、Form提交：

           <form action="/login" method="post">

                   name:<input type="text" name="name"/>

                    password:<input type="text" name="password"/>

                                              <input type="submit"/>

           </form>

         后端只需在方法参数列表里接收传送过来的变量，而无需再指定查询参数或路径变量：

       @RequestMapping(value = "/login", method = RequestMethod.POST)

      public String yourMethod(Model model, String name, String password){

       ...

     }

//delete请求   

 @RequestMapping(value="/testRest/{id}",method=RequestMethod.DELETE)

    public String testRestDelete(@PathVariable Integer id)

    {

        System.out.println("testRest DELETE"+id);

        return SUCCESS;

    }

       前台获取参数时使用$(参数)或{{参数}}，依赖于前端框架。

        后台响应后的返回值可以通过浏览器的响应信息查看数据格式，拿到对应的相应数据后，即可对数据处理，调用对应的方法等。

二、前台js中参数转换

eval()方法

            解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下：

           代码如下:
          function toJson(str){
                 var json = eval('(' + str + ')');
                   return json;
           }
             该方法存在性能和安全方面的问题，不建议使用。
 new Function方法

         代码如下:

     function toJson(str){
            var json = (new Function("return " + str))();
            return json;
        }
JSON.parse()方法
           这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本,这些浏览器都已经接近W3C标准，默认实现了toJSON方法。代码如下:
             JSON.parse(str);

             stringifier 函数的作用跟 parse 相反， 用来将一个js对象转换为 JSON 文本。
           var jsonText = JSON.stringify(obj);

三、后台数据处理流程

      传入或创建HttpServletRequest对象（HttpServletRequest request=((ServletRequestAttributes)RequestContextHolder.getRequestAttributes()).getRequest();），根据该对象内参数信息处理；有时后台拿到的直接是json或string，此时按需处理即可。

JSONArray的打印结果中有“[]”，而JSONObject最外层为“{}”

将list集合装成JSONArray对象
JSONArray jsonArray = JSONArray.fromObject(stuList);

将json字符串转成JSONArray

JSONArray jsonArray2 = JSONArray.fromObject(jsonString);

将JSONArray对象，重新还原成List对象集合

Object object = JSONObject.toBean((JSONObject) jsonArray.get(i),
Student.class);

将前台或页面获得String json字符串转成相应的JavaBean：

1、将该字符串转成相应的javaBean(相当于把从前台拿到的json字符串转成javaBean)
String jsonString = "{'age':23,'hobby':[1,2,3],'name':'桑伟东'}";

2、先将字符串再还原成JSONObject对象
JSONObject jsonObject2 = JSONObject.fromObject(jsonString);

3、将JSONObject对象还原成相应的javaBean ,打印结果如下
Student student2 = (Student) JSONObject.toBean(jsonObject2,
Student.class);

将后台数据分装后转string

user=userService.getUser(user);

//user对象里有日期，所有有日期的属性，

//都要按照此日期格式进行json转换（对象转json）

    JsonConfig json =new JsonConfig();

      json.registerJsonValueProcessor(Date.class,new  JsonDateValueProcessor());

     JSONObject jo=JSONObject.fromObject(user,json);

   result=jo.toString();

四、附录

前后台数据处理转换案例

后台代码：

//ajax的json对象异步加载
    @RequestMapping("/login.html")
    @ResponseBody
    public Object login(HttpSession session,@RequestParam String user){
        logger.debug("======insert into login.html method=========>");
        if(user == null || "".equals(user)){
            return "nodata";
        }else{
            JSONObject userObject =JSONObject.fromObject(user);
            User userObj=(User) userObject.toBean(userObject,User.class);
        //
            try {
                if(userService.loginCodeIsExit(userObj)==0){
                    return "nologincode";
                }else{
                    User _user=userService.getLoginUser(userObj);
                    if(null!=_user){
                        session.setAttribute(Constants.SESSION_USER, _user);
                        //lastLoginTime
                        User updateLoginTimeUser=new User();
                        updateLoginTimeUser.setId(_user.getId());
                        updateLoginTimeUser.setLastLoginTime(new Date());
                        userService.modifyUser(updateLoginTimeUser);
                        updateLoginTimeUser=null;
                        
                        return "success";
                    }else{
                        
                        return "pwderror";
                    }
                }
            } catch (Exception e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return "failed";
            }
        }
        
    }

HTML代码：

<div class="form-horizontal">
                        <fieldset>
                            <div class="input-prepend" title="loginCode" data-rel="tooltip">
                                <span class="add-on"><i class="icon-user"></i></span><input autofocus class="input-large span10" name="loginCode" id="loginCode" type="text" value="" />
                            </div>
                            <div class="clearfix"></div>

                            <div class="input-prepend" title="password" data-rel="tooltip">
                                <span class="add-on"><i class="icon-lock"></i></span><input class="input-large span10" name="password" id="password" type="password" value="" />
                            </div>
                            <div class="clearfix"></div>

                            
                            <div class="clearfix"></div>
                            <ul id="formtip"></ul>
                            
                            <p class="center span5">
                            <button type="submit" class="btn btn-primary" id="loginBtn">submit</button>
                            </p>
                        </fieldset>
                    </div>

JS代码

$("#loginBtn").click(function(){
    var user = new Object();
    user.loginCode = $.trim($("#loginCode").val());
    user.password = $.trim($("#password").val());
    user.isStart = 1;
    
    if(user.loginCode == "" || user.loginCode == null){
        $("#loginCode").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("对不起，登录账号不能为空。");
    }else if(user.password == "" || user.password == null){
        $("#password").focus;
        $("#formtip").css("color","red");
        $("#formtip").html("对不起，登录密码不能为空。");
    }else{
        $("#formtip").html("");
        
        $.ajax({
            type:'POST',
            url:'/SLSaleSystem/login.html',
            data:{user:JSON.stringify(user)},
            dataType:'html',
            timeout:1000,
            error:function(){
                $("#formtip").css("color","red");
                $("#formtip").html("登录失败！请重试。");
            },
            success:function(result){
                if(result != "" && result == "success"){//若登录成功，跳转到"/main.html"
                    window.location.href='/SLSaleSystem/main.html';
                }else if(result == "failed"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录失败！请重试。");
                    $("#loginCode").val('');
                    $("#password").val('');
                }else if(result == "nologincode"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录账号不存在！请重试。");
                }else if(result == "pwderror"){
                    $("#formtip").css("color","red");
                    $("#formtip").html("登录密码错误！请重试。");
                }else if("nodata" == result){
                    $("#formtip").css("color","red");
                    $("#formtip").html("对不起，没有任何数据需要处理！请重试。");
                }
            }
            
        });
        
    }
    
});