Ajax入门

2024-01-18 09:22:52

552 Ajax概念简介

展示效果并认识Ajax

方案1：传统方案

提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的使用整个注册页面。

缺点：较大的网络流量，用户体验不好

方案2：使用Ajax方案。

用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；

优点：较小的网络流量，用户体验好

局部刷新！

传统查询操作：

jsp必须经过servlet–>service–>dao–>db再返回！

jsp<–servlet<–service<–dao<–db

同步操作，中间有一个步骤发生问题，后面的内容就走不通了！

Ajax查询操作：

兵分两路！

1.直接查到用户需要的jsp页面

2.传统查询操作

Ajax概念

Ajax (Asynchronous JavaScript and XML 阿贾克斯)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起

Ajax之父Jesse James Garrett于2005年提出这一新概念

由于Google公司在Google地图、Google建议、Gmail等产品中对Ajax的成功运用，使得web浏览器的潜力被大大挖掘了出来，从而Ajax越来越受到关注并流行起来。

Ajax的最大特点：异步访问（快），局部刷新（用户体验高）

553 用户占用案例实现

save.jsp

<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text"/>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

使用ajax

SaveServlet

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("/SaveServlet")
public class SaveServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         resp.setContentType("text/html;charset=utf-8");
        //接收数据
        String uname = req.getParameter("uname");
        //处理数据 返回结果
        //模拟数据库
        boolean flag = false;
        if("sxt".equals(uname)){
            flag = true;
        }
        //根据结果 给用户做出响应
        //以前是转发和重定向！
        PrintWriter out = resp.getWriter();
        if(flag){
            out.print("用户名占用");
        }else {
            out.print("用户名可用");
        }
    }
}

save.jsp

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/19
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">

    <script>
        var xhr;
        function  checkName() {
            //接收前台的用户名
           var val = document.getElementById("uname").value;
           if(val==null || val==''){
               document.getElementById("uname_span").innerText="× 用户名不能为空";
           }else{
                //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
                xhr = new XMLHttpRequest();
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
               xhr.open("get","SaveServlet?uname="+val,true)
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
               xhr.send(null);
           }

           function process() {
                //接收响应的数据
               //执行了5次
               var text = xhr.responseText;
               document.getElementById("uname_span").innerText=text;
           }
        }
    </script>
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text" name="uname" id="uname" οnblur="checkName()"/>
        <span id="uname_span"></span>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

554 执行过程分析

 //发送Ajax的请求
     //1 创建XMLHttpRequest对象
 xhr = new XMLHttpRequest();
     //2 和服务器建立连接 //open(method,url,ayn,username,password)
xhr.open("get","SaveServlet?uname="+val,true)
     //3 执行回调函数
xhr.onreadystatechange=process;
     //4 发送请求数据
xhr.send(null);

xhr = new XMLHttpRequest();

浏览器创建的对象！

ie（美帝国）和其他！之前的ie浏览器，现在都统一了！

if(window.ActiveXObject){//IE
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{ //其他浏览器
	xhr =  new XMLHttpRequest();
}

xhr.open(“get”,“SaveServlet?uname=”+val,true)

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}else{ //其他浏览器

xhr = new XMLHttpRequest();

}

如何post发送请求？

   //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
                xhr = new XMLHttpRequest();
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
      
               xhr.open("post","SaveServlet",true);
               xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
              
               xhr.send("uname="+val);

什么是"application/x-www-form-urlencoded"

表单文本形式传输！默认

<form action="" enctype="application/x-www-form-urlencoded">

表单二进制形式传输！图片，音频。。。

<form action="" enctype="multipart/form-data">

xhr.onreadystatechange=process;

执行了多次！

一共有5种状态！

0：请求没有发出（在调用 open() 之前）

1：请求已经建立但还没有发出（调用 send() 之前）

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应

4：响应已完成，可以访问服务器响应并使用它

状态码status

200 404

返回结果数据 responseText responseXML

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">

    <script>
        var xhr;
        function  checkName() {
            //接收前台的用户名
           var val = document.getElementById("uname").value;
           if(val==null || val==''){
               document.getElementById("uname_span").innerText="× 用户名不能为空";
           }else{
                //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
               if(window.ActiveXObject){//IE
                   xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{ //其他浏览器
                   xhr =  new XMLHttpRequest();
               }
               alert("状态A:"+xhr.readyState);
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
              // xhr.open("get","SaveServlet?uname="+val,true)
               xhr.open("post","SaveServlet",true);
               xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
               alert("状态B:"+xhr.readyState);
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
              // xhr.send(null);
               xhr.send("uname="+val);
           }

           function process() {
               //alert("就绪状态:"+xhr.readyState);
                //接收响应的数据
               //执行了5次
                
               if(xhr.readyState==4){
                   if(xhr.status==200){
                       var text = xhr.responseText;
                       document.getElementById("uname_span").innerText=text;
                   }else if(xhr.status==404){
                      alert("路径找不到");
                      // window.location.href
                   }else if(xhr.status==500){
                       alert("代码运行异常");
                   }else{
                       alert("ajax响应失败");
                   }

               }

           }
        }
    </script>
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text" name="uname" id="uname" οnblur="checkName()"/>
        <span id="uname_span"></span>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

555 内容的总结

1 如何创建xhr对象？

if(window.ActiveXObject){//IE
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{ //其他浏览器
xhr = new XMLHttpRequest();
}

2 和服务器建立连接 get/post

get:

xhr.open(“get”,“SaveServlet?uname=”+val,true)

xhr.send(null);

post:

xhr.open(“post”,“SaveServlet”,true);
xhr.setRequestHeader(“Context-Type”,“application/x-www-form-urlencoded”);
xhr.send(“uname=”+val);

后台如何接收数据？

String uname = req.getParameter(“uname”);

后台如何做出响应？

PrintWriter out = resp.getWriter();
if(flag){
out.print(“用户名占用”);
}else {
out.print(“用户名可用”);
}

前台如何接收数据？

xhr.onreadystatechange=process;

           function process() {
               //alert("就绪状态:"+xhr.readyState);
                //接收响应的数据
               //执行了5次

               if(xhr.readyState==4){
                   if(xhr.status==200){
                       var text = xhr.responseText;
                       document.getElementById("uname_span").innerText=text;
                   }else if(xhr.status==404){
                      alert("路径找不到");
                      // window.location.href
                   }else if(xhr.status==500){
                       alert("代码运行异常");
                   }else{
                       alert("ajax响应失败");
                   }

               }

556 二级联动实现A

AjaxServlet2

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.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(urlPatterns = "/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
         resp.setContentType("text/html;charset=utf-8");
       //接收前台数据
        String val = req.getParameter("val");

        //处理数据 返回结果
        //模拟数据库
        List<String> list1 = new ArrayList<>();
        list1.add("篮球");
        list1.add("足球");
        list1.add("乒乓球");

        List<String> list2 = new ArrayList<>();
        list2.add("抖音");
        list2.add("快手");
        list2.add("YY直播");

        List<String> list3 = new ArrayList<>();
        list3.add("炒饼");
        list3.add("炒面");
        list3.add("炒刀削");

        Map<String,List<String>> map = new HashMap<>();
        map.put("1",list1);
        map.put("2",list2);
        map.put("3",list3);
        //用户响应的集合
        List<String> list = map.get(val);


        //根据结果 做出响应
        resp.getWriter().print(list);

    }
}

ajax02.jsp

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/19
  Time: 17:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>二级联动</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <script>
        var xhr;
        function change(val) {
            //发送ajax请求

            //创建xhr对象
            if(window.ActiveXObject){//IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }else{ //其他浏览器
                xhr =  new XMLHttpRequest();
            }
            //和服务器建立连接
            xhr.open("get","AjaxServlet2?val="+val,true)

            //回调函数
            xhr.onreadystatechange=process;
            //发送数据
            xhr.send(null)
        }
        function process() {
            if(xhr.readyState==4&&xhr.status==200){
                var text = xhr.responseText;
                console.log(text);

            }
        }
    </script>
</head>
<body>
<select οnchange="change(this.value)">
    <option >--请选择--</option>
    <option value="1">体育</option>
    <option value="2">直播</option>
    <option value="3">美食</option>
</select>

<select >
    <option value="">--请选择--</option>
</select>
</body>
</html>

xhr.open(“get”,“AjaxServlet2?val=”+val,true)

加红的val为 String val = req.getParameter(“val”);的val

557 二级联动实现B

function process() {
    if(xhr.readyState==4&&xhr.status==200){
        //[炒饼, 炒面, 炒刀削]----->'[炒饼, 炒面, 炒刀削]'这是字符串
        var text = xhr.responseText;
       //分割
        var t2 = text.substring(1,text.length-1);
        //变成数组 ["篮球", " 足球", " 乒乓球"]
        var t3 = t2.split(",");
        var s = document.getElementById("s");
        //每次进入循环需要重置
        s.innerHTML="<option>--请选择--</option>";
       for(var i in t3){
           s.innerHTML+="<option>"+t3[i]+"</option>"
       }

    }
}

558 响应普通文本

响应回来的是字符串，前台回调函数处理过于麻烦

if(xhr.readyState==4&&xhr.status==200){
    //[炒饼, 炒面, 炒刀削]----->'[炒饼, 炒面, 炒刀削]'这是字符串
    var text = xhr.responseText;
   //分割
    var t2 = text.substring(1,text.length-1);
    //变成数组 ["篮球", " 足球", " 乒乓球"]
    var t3 = t2.split(",");
    var s = document.getElementById("s");
    //每次进入循环需要重置
    s.innerHTML="<option>--请选择--</option>";
   for(var i in t3){
       s.innerHTML+="<option>"+t3[i]+"</option>"
   }

}

如何处理？

//响应普通文本

AjaxServlet03

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;

@WebServlet("/AjaxServlet03")
public class AjaxServlet03 extends HttpServlet {
    /*
    * Ajax响应处理数据的三种格式：
    * A  普通文本
    *
    * B JSON格式
    *
    * C XML
    *
    *
    * */
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");

        //普通文本
        resp.getWriter().print("Ajax响应成功");

    }
}

ajax03.jsp

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/20
  Time: 12:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <script>
        var xhr;
        function demo1() {
            xhr = new XMLHttpRequest();
            xhr.open("get","AjaxServlet03",true);
            xhr.onreadystatechange=process;
            xhr.send(null);
        }
        function process() {
            if(xhr.readyState==4&&xhr.status==200){
                var text = xhr.responseText;
                console.log(text);
            }
        }
    </script>
</head>
<body>
    <button οnclick="demo1()">Ajax的请求</button>
</body>
</html>

559 响应JSON格式数据

响应普通文本方式：‘User{uid=1, uname=‘zs’, pwd=‘123’}’

字符串取 value:1 ，需要截取，分割，再分割！太麻烦了

//响应对象 JSON格式

var j={uid:1, uname:‘zs’, pwd:‘123’};

console.log(j.uname);

该如何实现？

方式一：更改toString方式的得到JSON!

重写User的toString

User.java

@Override
public String toString() {
    return  "{" +
            "uid:" + uid +
            ", uname:'" + uname + '\'' +
            ", pwd:'" + pwd + '\'' +
            '}';
}

ajax03.jsp:18 {uid:1, uname:'zs', pwd:'123'} ---->JS的String类型

ajax03.jsp 用eval表达式转换！

function process() {
    if(xhr.readyState==4&&xhr.status==200){
        var text = xhr.responseText;
        //把字符串text转换成JSON对象
        eval("var e="+text);
        console.log(e.uname);
    }
}

方式二：不更改toString方式的得到JSON! 手动拼接！

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=utf-8");
    //模拟数据库查询出来的一个对象
    User user = new User(1,"zs","123");
    String json =
            "{uid:"+user.getUid()+", uname:'"+user.getUname()+"', pwd:'"+user.getPwd()+"'}";
    //响应对象 JSON格式
    resp.getWriter().print(json);
}

560 响应JSON格式数据B

方式三：使用GSON包

导包 gson-2.2.4.jar

AjaxServlet03 new Gson().toJson(user);

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=utf-8");
    //模拟数据库查询出来的一个对象
    User user = new User(1,"zs","123");
    String json = new Gson().toJson(user);
    //响应对象 JSON格式
    resp.getWriter().print(json);
}

回调函数：

function process() {
    if(xhr.readyState==4&&xhr.status==200){
        var text = xhr.responseText;
        //把字符串text转换成JSON对象
        eval("var e="+text);
        console.log(e.uname);
    }
}

前台是如何处理JSON字符串的？用eval表达式进行转换!

var text = xhr.responseText;
//把字符串text转换成JSON对象
eval(“var e=”+text);

除了eval,使用 JSON.parse(text);需要注意，json格式中的key必须含有引号！但是eval不带引号和带引号都可以使用！

function process() {
    if(xhr.readyState==4&&xhr.status==200){
        var text = xhr.responseText;
        //把字符串text转换成JSON对象
        var e = JSON.parse(text);
        console.log(e.uname);
    }
}

如果后台是集合？

protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=utf-8");
    //模拟数据库查询出来的一个对象
    User user = new User(1,"zs","123");
    User user2 = new User(1,"zs","123");
    List<User> list = new ArrayList<>();
    list.add(user);
    list.add(user2);
    String json = new Gson().toJson(list);
    //响应对象 JSON格式
    resp.getWriter().print(json);
}

function process() {
    if(xhr.readyState==4&&xhr.status==200){
        var text = xhr.responseText;
        console.log(text);
        //把字符串text转换成JSON对象
        eval("var e="+text);
        console.log(e[1].uid);

    }

561 响应XML数据格式

xml格式（了解）

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/xml;charset=utf-8");
    //模拟数据库查询出来的一个对象
    User user = new User(1,"zs","123");
    User user2 = new User(1,"zs","123");
    List<User> list = new ArrayList<>();
    list.add(user);
    list.add(user2);
    String json = new Gson().toJson(list);
    //响应对象 XML格式
    resp.getWriter().print("<users><user><uname>zs</uname><pwd>123</pwd" +
            "></user><user" +
            "><uname>list</uname><pwd>456</pwd></user></users>");
}

<users>
<user>
<uname>zs</uname>
<pwd>123</pwd>
</user>
<user>
<uname>list</uname>
<pwd>456</pwd>
</user>
</users>

function process() {
    if(xhr.readyState==4&&xhr.status==200){
       var doc = xhr.responseXML;
       //console.log(doc);
        var name = doc.getElementsByTagName("uname");
        console.log(name[0]);
    }
}

562 JQ结合Ajax的使用A

原生的Ajax操作的时候有什么缺点？

模板固定，是否可以优化？

JQ可以对js进行封装！

jq导入失败！

清空idea缓存重启

GET http://localhost:8080/ajax2/js/jquery-1.9.1.js net::ERR_ABORTED 404 (Not Found)

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=utf-8");
    String uname = req.getParameter("uname");
    String pwd = req.getParameter("pwd");

    User user = new User(1,uname,pwd);


    resp.getWriter().print(user);
}

<script type="text/javascript">

    $(function () {
        $("#bu").click(function () {
            //请求方式 url data
            $.ajax({
                type:"get",
                url:"AjaxServlet03",
                data:"uname=zs&pwd=123",
                success:function (a) {
                    //a代表响应结果
                    console.log(a);
                }
            })
        })
    })
</script>

结果：String类型！

User{uid=1, uname=‘zs’, pwd=‘123’}

还有其他属性吗？

$.ajax({
    type:"get",
    url:"AjaxServlet03",
    <!--data:"uname=zs&pwd=123",-->
    data:{uname:'zs',pwd:'123'},
    async:true,
    contentType:"application/x-www-form-urlencoded",
    success:function (a) {
        //a代表响应结果
        console.log(typeof a);
    }
})

563 JQ结合Ajax的使用B

精简版：

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    resp.setContentType("text/html;charset=utf-8");
    String uname = req.getParameter("uname");
    String pwd = req.getParameter("pwd");

    User user = new User(1,uname,pwd);
    String s = new Gson().toJson(user);

    resp.getWriter().print(s);
}

//url data success dataType

$.post("AjaxServlet03","uname=zs&pwd=123",function (result) {
    alert(typeof result);
},"json")

$.get("AjaxServlet03","uname=zs&pwd=123",function (result) {
    alert(typeof result);
},"json")

如果失败如何实现？

失败就报错处理不了！

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

564 三级联动案例实现A

1 搭建mvc基本框架

2 创建数据库表和插入数据

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for area
-- ----------------------------
DROP TABLE IF EXISTS `area`;
CREATE TABLE `area` (
  `areaid` int(18) NOT NULL COMMENT '区域编号',
  `areaname` varchar(50) NOT NULL COMMENT '区域名称',
  `parentid` int(18) NOT NULL COMMENT '父级编号',
  `arealevel` int(3) NOT NULL COMMENT '区域等级(1省/2市/3区县)',
  `status` int(1) NOT NULL DEFAULT '1' COMMENT '状态（1可用/0不可用）',
  PRIMARY KEY (`areaid`),
  UNIQUE KEY `UK_WEBSITE_AREA` (`areaid`,`parentid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of area
-- ----------------------------
INSERT INTO `area` VALUES ('110000', '北京市', '0', '1', '1');
INSERT INTO `area` VALUES ('110100', '市辖区', '110000', '2', '1');
INSERT INTO `area` VALUES ('110101', '东城区', '110100', '3', '1');
INSERT INTO `area` VALUES ('110102', '西城区', '110100', '3', '1');
...
    


/**查询所有一级菜单**/
select * from area where parentid=0;
110000	北京市	0	1	1
120000	天津市	0	1	1
130000	河北省	0	1	1
140000	山西省	0	1	1
150000	内蒙古自治区	0	1	1
210000	辽宁省	0	1	1
220000	吉林省	0	1	1
230000	黑龙江省	0	1	1
310000	上海市	0	1	1
320000	江苏省	0	1	1
330000	浙江省	0	1	1
/**查询所有二级菜单**/
select * from area where parentid=330000;
330100	杭州市	330000	2	1
330200	宁波市	330000	2	1
330300	温州市	330000	2	1
330400	嘉兴市	330000	2	1
330500	湖州市	330000	2	1
330600	绍兴市	330000	2	1
330700	金华市	330000	2	1
330800	衢州市	330000	2	1
330900	舟山市	330000	2	1
331000	台州市	330000	2	1
331100	丽水市	330000	2	1
/**查询所有三级菜单**/
select * from area where parentid=330900;
330901	市辖区	330900	3	1
330902	定海区	330900	3	1
330903	普陀区	330900	3	1
330921	岱山县	330900	3	1
330922	嵊泗县	330900	3	1

565 三级联动案例实现B

1 entity DBUtil

package com.bjsxt.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class DBUtil {

     private   static SqlSessionFactory factory;

     private  static ThreadLocal<SqlSession>  tl=new ThreadLocal<>();

      static {
          InputStream inputStream = null;
          try {
              //[1]解析myBatis.xml文件
              inputStream = Resources.getResourceAsStream("mybatis.xml");
              //[2]获得sqlsession工厂
               factory=new SqlSessionFactoryBuilder().build(inputStream);
          } catch (IOException e) {
              e.printStackTrace();
          }
      }


      //获得sqlsession对象
      public  static SqlSession   getSqlSession(){

          //获得ThreadLoacl中的sqlsession对象
          SqlSession sqlSession = tl.get();

          if(sqlSession==null){

               sqlSession = factory.openSession(true);

               //把创建好的对象放到ThreadLoacl
               tl.set(sqlSession);
          }

          return  tl.get();
      }


      //关闭sqlsession

    public  static    void     closeAll(){

        SqlSession sqlSession = tl.get();

        if(sqlSession!=null){

            sqlSession.close();

        }
        tl.set(null);
    }

}

package com.bjsxt.entity;

import java.io.Serializable;

public class Area implements Serializable {
    private  Integer  areaid;

    private  String  areaname;

    private  Integer  parentid;

    @Override
    public String toString() {
        return "Area{" +
                "areaid=" + areaid +
                ", areaname='" + areaname + '\'' +
                ", parentid=" + parentid +
                '}';
    }

    public Integer getAreaid() {
        return areaid;
    }

    public void setAreaid(Integer areaid) {
        this.areaid = areaid;
    }

    public String getAreaname() {
        return areaname;
    }

    public void setAreaname(String areaname) {
        this.areaname = areaname;
    }

    public Integer getParentid() {
        return parentid;
    }

    public void setParentid(Integer parentid) {
        this.parentid = parentid;
    }

    public Area() {
    }

    public Area(Integer areaid, String areaname, Integer parentid) {
        this.areaid = areaid;
        this.areaname = areaname;
        this.parentid = parentid;
    }
}

2 AreaMapper AreaMapper.xml

package com.bjsxt.mapper;

import com.bjsxt.entity.Area;

import java.util.List;

public interface AreaMapper {
    //查询指定信息操作
    List<Area> selectMore(int  pid);

}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bjsxt.mapper.AreaMapper">
    <select id="selectMore" resultType="area">
        select * from area where parentid=#{param1};
    </select>
</mapper>

3 AreaService AreaServiceImpl

package com.bjsxt.service;

import com.bjsxt.entity.Area;

import java.util.List;

public interface AreaService {
    //查询指定信息
    List<Area> findMore(int pid);
}

package com.bjsxt.service.imp;

import com.bjsxt.entity.Area;
import com.bjsxt.mapper.AreaMapper;
import com.bjsxt.service.AreaService;
import com.bjsxt.util.DBUtil;

import java.util.List;

public class AreaServiceImpl implements AreaService {
    @Override
    public List<Area> findMore(int pid) {
        AreaMapper mapper = DBUtil.getSqlSession().getMapper(AreaMapper.class);
        List<Area> list = mapper.selectMore(pid);
        DBUtil.closeAll();
        return list;
    }
}

4 AjaxServlet5

package com.bjsxt.servlet;

import com.bjsxt.entity.Area;
import com.bjsxt.service.AreaService;
import com.bjsxt.service.imp.AreaServiceImpl;
import com.google.gson.Gson;

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.util.List;

@WebServlet("/AjaxServlet5")
public class AjaxServlet5 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //接收页面数据
        String p = req.getParameter("pid");
        int pid = Integer.parseInt(p);
        //数据处理 返回结果
        AreaService areaService = new AreaServiceImpl();
        List<Area> list = areaService.findMore(pid);

        String json = new Gson().toJson(list);
        //根据结果 做出响应
        resp.getWriter().print(json);

    }
}

5 ajax04.jsp

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/20
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>三级联动</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(function () {
            /*****一级菜单显示******/
            $.post("AjaxServlet5","pid=0",function (result){
                for(i in result){
                   $("#s").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
                }
               
            },"json" )
        })
    </script>
</head>
<body>
省：
<select id="s">
    <option>--请选择--</option>
</select>
市：
<select id="u">
    <option>--请选择--</option>
</select>
县：
<select id="x">
    <option>--请选择--</option>
</select>
</body>
</html>

566 三级联动案例实现C

上面只做了第一个下拉框！

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/20
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>三级联动</title>
    <base href="<%=request.getContextPath()+"/"%>">
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        $(function () {
            /*****一级菜单显示******/
            $.post("AjaxServlet5","pid=0",function (result){
                console.log(result);
                for(i in result){
                    $("#s").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
                }

            },"json" )

            /********二级菜单显示**********/


            $("#s").change(function () {

                var pid = $("#s").val();
                console.log(pid);

                $.post("AjaxServlet5","pid="+pid,function (result){
                    console.log(result)
                    //进入循环前，不清空
                    $("#u").html(" <option>--请选择--</option>");
                    for(i in result){
                        $("#u").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
                    }

                },"json" )
            })

            /********三级菜单显示**********/
            $("#u").change(function () {

                var pid = $("#u").val();
                console.log(pid);

                $.post("AjaxServlet5","pid="+pid,function (result){
                    console.log(result)
                    //进入循环前，不清空
                    $("#x").html(" <option>--请选择--</option>");
                    for(i in result){
                        $("#x").append("<option value='"+result[i].areaid+"'>"+result[i].areaname+"</option>")
                    }

                },"json" )
            })



        })
    </script>
</head>
<body>
省：
<select id="s">
    <option>--请选择--</option>
</select>
市：
<select id="u">
    <option>--请选择--</option>
</select>
县：
<select id="x">
    <option>--请选择--</option>
</select>
</body>
</html>

码农公寓

552 Ajax概念简介

展示效果并认识Ajax

Ajax概念

553 用户占用案例实现

554 执行过程分析

xhr = new XMLHttpRequest();

xhr.open(“get”,“SaveServlet?uname=”+val,true)

什么是"application/x-www-form-urlencoded"

xhr.onreadystatechange=process;

555 内容的总结

1 如何创建xhr对象？

2 和服务器建立连接 get/post

后台如何接收数据？

后台如何做出响应？

前台如何接收数据？

556 二级联动实现A

557 二级联动实现B

558 响应普通文本

559 响应JSON格式数据

560 响应JSON格式数据B

561 响应XML数据格式

562 JQ结合Ajax的使用A

GET http://localhost:8080/ajax2/js/jquery-1.9.1.js net::ERR_ABORTED 404 (Not Found)

563 JQ结合Ajax的使用B

564 三级联动案例实现A

1 搭建mvc基本框架

2 创建数据库表和插入数据

565 三级联动案例实现B

1 entity DBUtil

2 AreaMapper AreaMapper.xml

3 AreaService AreaServiceImpl

4 AjaxServlet5

5 ajax04.jsp

566 三级联动案例实现C

相关文章