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

最新推荐文章于 2024-04-30 15:07:34 发布

★愿与愁★

最新推荐文章于 2024-04-30 15:07:34 发布

阅读量1.5k

点赞数 1

分类专栏：笔记文章标签：前端 jquery ajax java tomcat

本文链接：https://blog.csdn.net/qq_51352148/article/details/121986249

版权

笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

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

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界面的代码

   <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="application/javascript">
      $(function () {
        var user=window.sessionStorage.getItem("user");//通过前端留下的值进行引用
        $("accountId").html(user.account);//将user对象的信息反馈到id为accountId的标签中
      })
    </script>
</head>
<body>
登陆成功<span id="accountId"></span>
</body>
</html>

从现在开始我们进行对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封装过后的代码

 <script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="application/javascript">
      $(function () {
        var str=window.sessionStorage.getItem("user");
        var user=$.parseJSON(str);
        $("#accountId").html(user.account);
      })
    </script>

测试结果

在这里插入图片描述

登录成功后进入success界面

在这里插入图片描述

★愿与愁★

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB应用程序开发(五)代码简化--利用Jquery封装AJAX--实现“一节更比多节强 “

WEB应用程序开发之利用Jquery封装AJAX学习1.JSON学习引言JSON语法此次学习所需要的jar包链接gson.jar包jquery-1.8.3.minJSON环节代码展示与讲解2. (简化开始)利用Jquery实现Ajax-$.get()3. 利用Jquery实现Ajax-$.post()Jquery封装后的代码讲解测试结果1.JSON学习引言java程序一般将数据封装到对象中,响应到客户端,而客户端是JavaScript语言,俩边对象格式不一致为解决此问题诞生了一种轻量级解决案:Json(
复制链接

扫一扫