WEB应用程序开发(五)代码简化--利用Jquery封装AJAX--实现“一节更比多节强 “

WEB应用程序开发(五)代码简化--利用Jquery封装AJAX--实现“一节更比多节强 “

WEB应用程序开发之利用Jquery封装AJAX学习

• • 1.JSON学习引言
  • • JSON语法
    • 此次学习所需要的jar包链接
    • • gson.jar包
      • jquery-1.8.3.min
    • JSON环节代码展示与讲解
  • 2. (简化开始)利用Jquery实现Ajax-$.get()
  • 3. 利用Jquery实现Ajax-$.post()
  • • Jquery封装后的代码讲解
    • 测试结果

1.JSON学习引言

java程序一般将数据封装到对象中,响应到客户端,而客户端是Javascript语言,俩边对象格式不一致为解决此问题诞生了一种轻量级解决案:Json(Javascript对象表现形式)是一种轻量级数据格式

JSON(Javascript Object Notation) 是一种轻量级的数据交换格式

• 数据在键值对中
• 数据由逗号分隔
• 大括号保存对象
• 方括号保存数组

JSON语法

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 “” 包裹，使用冒号 : 分隔，然后紧接着值：
{“firstName”: “John”} {“name”:”value”,”sex”:”男”}

此次学习所需要的jar包链接 gson.jar包

链接：https://pan.baidu.com/s/1PmTt86YEbyb0DLTJfBXvWA
提取码：acyl

jquery-1.8.3.min

链接：https://pan.baidu.com/s/18zxrdUvTOagC8jSjDf5ycQ
提取码：acyl

JSON环节代码展示与讲解

后端进行发送

 LoginDao loginDao=new LoginDao();
            User user= loginDao.checkLogin(account,password);
            out= resp.getWriter();
            if(user!=null){
                Gson gson=new Gson();
                String s=gson.toJson(user);//将封装好的值转换为字符串信息
                System.out.println(s);
                out.println(s);
            }else {
                out.println(1);
            }

前端进行接收反馈

● 在异步交换数据时，java对象不能直接被传递给js,所以需要先把java对象转换为JSON格式字符串，把字符串响应给客户端，再由客户端将JSON字符串转换为js对象即可（ $.parseJSON() ）

//接收数据
            httpobj.onreadystatechange=function (){          //一旦异步触发就触发函数
                    if (httpobj.status==200&&httpobj.readyState==4){

                        // 从后端相响应一个json格式的字符串,在前端需要将其转换为js对象,方便前端 *** 作
                        var obj = $.parseJSON(httpobj.responseText);
                        if(obj.id!=null){
                            alert("登录成功");
                            //在前端储存用户信息
                            window.sessionStorage.setItem("user",httpobj.responseText);
                            location.replace("success.html");
                        }else{
                            alert("账号或密码错误");
                        }
                    }
                }

在前端储存用户数据,用于在成功界面响应user对象的反应值

接下来是success界面的代码

   
    


登陆成功

从现在开始我们进行对Javascript部分代码的简化,来实现"一节更比多节强"的效果

2. (简化开始)利用Jquery实现Ajax-$.get()

$.get()是一个简单的 GET 请求功能。请求成功时可调用回调函数。
$.get(url,[data],[callback],[type])**
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default
注意：请求是通过 URL 提交的
提交有大小限制（2KB)

3. 利用Jquery实现Ajax-$.post()

$.post()是一个简单的 POST 请求功能。请求成功时可调用回调函数。

$.post(url,[data],[callback],[type])

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default

POST 请求是 HTTP 消息实体提交的，提交大小不受限制

$("#testform").serialize() 请求发送表单数据

Jquery封装后的代码讲解

   function subform(){
          $.post("login",$("#formId").serialize(),function (res) {
              var obj=$.parseJSON(res)//将接收值转化为字符串
              if(obj.id!=null){
                  alert("登录成功");
                  //在前端储存用户信息
                  window.sessionStorage.setItem("user",res);
                  location.replace("success.html");
              }else{
                  alert("账号或密码错误");
                  location.replace("success.html");
              }
          })
      }

利用此段代码可以更加简洁的替换前端到后端代码之间的交互,省去多余的复杂方法

接下来我们在登陆成功之后,可以在登陆成功界面进行数据的显示与获取,这里同样用出利用Jquery封装过后的代码

测试结果

登录成功后进入success界面