1秒消失 alert jquery_超硬核分分钟了解AJAX之AJAX结合jquery实现04

于 2021-01-04 08:14:14 发布
阅读量71 收藏
点赞数
文章标签： 1秒消失 alert jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36325615/article/details/112333998
版权

980878110b971131e6dcc2a1a1ebaf17.png

AJAX结合jquery实现

每次书写AJAX代码比较繁琐 步骤都是一样的,数据回显使用原生js代码也比较繁琐,可以使用jQuery对上述问题进行优化,jQuery不仅仅对dom操作进行了封装 同时也对AJAX提交和回显已经进行了封装,可大大简化AJAX的操作步骤

16ea6c7581af4c9ea861c1c8a09eea93.png

4.1普通文本接收简单数据

页面代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.12.3.min.js"></script>
 <script>
 function checkUsername(){
            $.AJAX({
 type:"GET",
 url:"usernameServlet",
 data:"username="+$('#uname').val(),
 success:function(result){
                    $("#unameinfo").text(result)
                },
 error:function(){
                    $("#unameinfo").text("服务器响应异常")
                }
            })
        }

 </script>
</head>
<body>
<input type="text" id="uname" onblur="checkUsername()"><span id="unameinfo"></span>
</body>
</html>

后台代码

package com.bjsxt.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/usernameServlet")
public class UsernameServlet extends HttpServlet {
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
 /*int i =1/0;*/
 String username = req.getParameter("username");
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter writer = resp.getWriter();
 if("SXT".equals(username)){
            writer.print("用户名被占用");
        }else{
            writer.print("用户名可用");
        }

    }
}

4.2接收JSON格式的数据

4.2.1经典版接收单个对象

经典版jQuery实现AJAX语法为:

$.AJAX({
 type:"get",//可以使用get方式和post方式提交
 url:"AJAXServlet",//后台接收请求的servlet路径
 data:{name:'张三',age:18},//数据格式可以是键值对格式,也可以是对象
 /*设置接收 后台响应数据默认转换JSON 不必再手动转换*/
 dataType:"json",
/*响应成功调用的方法*/
 success:function(res){
     },
/*响应失败调用的方法*/
error:function(err){
alert(err);
     }
})

页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>AJAX数据响应格式</title>
 <script src="js/jquery-1.12.3.min.js"></script>
 <script>

 function  getData(){
            $.AJAX({
 type:"get",
 url:"AJAXServlet",
 data:{name:'张三',age:18},
 /*设置接收 后台响应数据的格式为JSON*/
 dataType:"json",
 success:function(res){
 console.info(res.name)
                }
            })
        }

 </script>
</head>
<body>

<button  type="button" onclick="getData()"  >触发</button>

</body>
</html>

后台代码

@WebServlet("/AJAXServlet")
public class AJAXServlet extends HttpServlet {
 @Override
 public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        User  user =new User(1,"aaa1",new Date());
        Gson gson=new Gson();
        String userJson = gson.toJson(user);
        resp.getWriter().print(userJson);

    }
}

4.2.2经典版接收对象集合

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
 <title>AJAX数据响应格式</title>
 <script src="js/jquery-1.12.3.min.js"></script>
 <script>

 function  getData(){
            $.AJAX({
 type:"get",
 url:"AJAXServlet",
 data:{name:'张三',age:18},
 /*设置接收 后台响应数据的格式为JSON*/
 dataType:"json",
 success:function(res){
 for(var i in res){
 console.info(res[i].name)
                    }
                }
            })
        }

 </script>
</head>
<body>

<button  type="button" onclick="getData()"  >触发</button>

</body>
</html>

后台代码

@WebServlet("/AJAXServlet")
public class AJAXServlet extends HttpServlet {
 @Override
 public void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        User  user1 =new User(1,"aaa1",new Date());
        User  user2 =new User(2,"aaa2",new Date());
        User  user3 =new User(3,"aaa3",new Date());
        User  user4 =new User(4,"aaa4",new Date());
        List<User> userList  =new LinkedList<User>();
        Collections.addAll(userList,user1,user2,user3,user4);
        Gson gson =new Gson();
        String userJson=gson.toJson(userList);
        resp.getWriter().print(userJson);


    }
}

4.2.3jQuery下对于Aajx的简单化语法

$.get("AJAXServlet","name=张三&age=18",function(res){
 console.info(res)
})
$.post("AJAXServlet","name=张三&age=18",function(res){
 console.info(res)
})
// JSON格式定义向后台传输的数据
$.get("testData",{name:'aaa',age:18},function (data){
 for(var i in data){
 console.info(data[i].name)
    }
},'JSON')

4.3案例AJAX结合jQuery实现三级联动

4.3.1 数据准备

使用china.sql生成area表格

e6acfbd763fb82af651ed5bda84b154d.png

4.3.2 项目搭建

2dfaf57cd11e247d67d035391d347d04.png

jar包导入

4babf99cc6d0c036853cdb88437cab51.png

4.3.3 代码实现

Mapper层代码

public interface AreaMapper {
 @Select("select * from area where parentid =#{parentid}")
    List<Area> findAreaByParentid(int parentid);
}

Service层代码

public class AreaServiceImpl implements AreaService {
 private static SqlSession sqlSession;
 private static AreaMapper mapper;

 static{
 sqlSession= MyBatisUtil.getSqlSession(true);
 mapper= sqlSession.getMapper(AreaMapper.class);
    }
 @Override
 public List<Area> findAreaByParentid(int parentId) {
 return mapper.findAreaByParentid(parentId);
    }
}

Controller层代码

@WebServlet("/areaController")
public class AreaController extends HttpServlet {
 private AreaService as=new AreaServiceImpl();
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String parentidStr = req.getParameter("parentid");
 int parentId = Integer.parseInt(parentidStr);
        List<Area> areas=as.findAreaByParentid(parentId);
        Gson gson=new Gson();
        String areasJson = gson.toJson(areas);
        resp.setContentType("text/html;charset=utf-8");
        resp.setCharacterEncoding("UTF-8");
        PrintWriter out = resp.getWriter();
        out.print(areasJson);


    }
}

Jsp代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
 <title>$Title$</title>
 <script src="js/jquery-1.12.3.min.js"></script>
 <script>
 function showArea(val,tagid){
          $.AJAX({
 type:"GET",
 url:"areaController",
 data:{parentid:val},
 dataType:'JSON',
 success:function(areas){
                  $(tagid).html("<option>-请选择-</option>")
 for(var i in areas){
                      $(tagid).append('<option value="'+areas[i].areaid+'">'+areas[i].areaname+'</option>')
                  }
 if(tagid=="#city"){
                      $("#qu").html("<option>-请选择-</option>")
                  }

              }

          })
      }
      $(function(){
 showArea(0,'#provience');
      })



 </script>
 </head>
 <body>
 籍贯:
 <select id="provience" onchange="showArea(this.value,'#city')">
 <option>-请选择-</option>
 </select>
 <select id="city" onchange="showArea(this.value,'#qu')">
 <option>-请选择-</option>
 </select>
 <select id="qu">
 <option>-请选择-</option>
 </select>
 </body>
</html>

测试效果

9398e76251376a9d0fb05c4724107e2c.png

43aeb259eaafac64c8c976753c7ed1d4.png

点赞和评论区留言“ajax” ，可以获取对应视频，代码，文档全套资料。

猫本Shawn
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值