Java0基础_day19_Javaweb前后端融合_Ajax替代_Jquery

标签：Jquery库，JS，Ajax

1. Jquery概述

• 什么是Jquery？

     Jqurey是JavaScript的库，封装了很多便于使用的函数，以便更好的操作浏览器DOM对象，例如前面学到的JS中的事件绑定、DOM对象定位、JSON格式解析等等前端操作，以及新建XMLHttpReques异步请求对象获取后端数据等操作都可以用Jquery的高级函数更简洁的解决我们的问题。

• 为什么要用Jquery？

       因为Jquery更简洁、兼容性好、有出错提示、体积小、免费，用于定位操作DOM对象、处理事件、动画，更重要的是仅需要一个函数即可实现Ajax请求！

• Jquery与JavaScript的关系？

Jquery是基于JavaScript的再次封装的函数，因此在JavaScript中有两种对象，即Jquery对象和纯JavaScript对象，后者又称为DOM对象，其中他们可以相互转换，以便使用各自的方法/属性，其中Jquery对象其本质是DOM对象的数组形式，即[dom对象1，dom对象2，dom对象3]！

---

2.开发前准备_Jquery的引入

2.1  引入：前面讲到，有些函数是Jquery自带，意味着只有Jquery才能看懂，故必须引入Jquery库，其本质是jquery.js，可以从官网下载，然后放在某个目录，然后写JavaScript时在头部引入：

<script type="text/javascript" src="jquert_API/jquery.js"></script>

  2.2 对象转换

第一个：从jquery对象到js对象：

var obj = document.getElementById("btn");//返回dom对象数组
var jsobj = obj[0]；
var jsobj = obj[0].get(0);

第二个：从js对象到jquery对象：

$(DOM对象)
var jqueryobj = $("#txt1");
jqueryobj.val();

【注意】jquery对象才有xx.val()方法，而js对象只有XX.value属性，二者一定要注意区分。

---

3.Jquery选择器_返回DOM对象

这里将部分代码示例放这里，方便下文的选择器的学习。

<div id="one">我是one的div	</div><BR/>
<div class="two">我是two的div	</div><BR/>
<div >我是没哟id和class的div	</div><BR/>
<span class="two"> 我是span标签</span><BR/>
<p>文本框</p>
<input type ='text' value="text1 " /><br/>
<input type ='text' value="text2 " disabled/><br/>
<input type ='text' value="text3 " /><br/>
<input type ='text' value="text4 " disabled/><br/><!--只读-->
<p>单选框</p>
<input type ='radio' name = "danx" value="man" />男<br/>
<input type ='radio' name = "danx" value="woman" />女<br/>

<p>复选框</p>
<input type ='checkbox' name='aihao' value="chouyan" />抽烟<br/>
<input type ='checkbox' name='aihao' value="hejiu"  checked/>喝酒<br/>
<input type ='checkbox' name='aihao'  value="chifan" checked/>吃饭<br/>
<p>下拉框</p>
<select id="lang" >
<option value="java">java开发</option>
<option value="GO" selected>GO开发</option>
<option value="JS">JS开发</option>	
</select>

<p>按钮</p>
<input type ='button' value="读取text值" /><br/>
<input type ='button' value="读取radio值值" /><br/>
<input type ='button' value="读取checkbox值" /><br/>
<!--可以简写，但是这种没有type属性，必须在form标签的button才能提交表单-->
<button  value="我是button" />我是button<br/>

• 是什么？

用于对DOM对象进行定位的条件字符串，类似于CSS选择器。

• 有哪些分类？

第一个：id选择器→语法： $("#id值")→举例：$("#one")

第二个：class选择器→语法：$(".class 样式名")→举例：$(".two")

第三个：标签选择器→语法：$("标签名")→举例：$("div")，$("span")

<div>1</div>  dom1
<div>2</div>  dom2
<div>3</div>  dom3
$("div") = [dom1,dom2,dom3];

第四个：组合选择器→语法：$("id选择器，class选择器，标签选择器")

第五个：全部选择器→$("*")

第六个：表单选择器→$(":text")，$(":checkbox")，$(":type值")

【注意】表单选择器针对dom对象的type属性，如果没有type属性则不能使用该方法。

【注意2】$(":tr")不能用，因为tr不是input的type类型

【注意3】用于快速定位如文本框、密码框、复选框、按钮、提交按钮、重置按钮

---

4.过滤器_选择器_返回DOM对象

首先值得一提的是，过滤器必须依赖于选择器，即先选择然后才能过滤。

第一个：索引过滤器→

• 第一个：$("选择器:first")

• 最后一个：$("选择器:last")

• 下标：$("选择器:eq(数组索引)")

• 选择小于索引的所有对象：$("选择器:lt(索引)") 2→0,1

• 选择大于索引的所有对象：$("选择器:gt(索引)") 2→3,4

第二个：表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象

• 启用状态：enabled  →$(":text:enabled")

• 不可以 disabled→$(":text:disabled")

• 选择状态 checked→$(":checkbox:checked")

• 下拉列表→$(":checkbox>option:selected") 父子关系

• var selectbox = $("select>option:selected");//select标签下的option子标签的取值；
  $("#province>option:selected")
  <select id="province">
  <option value="0"> 请下拉选择省份   </option>
   </select>

---

5.事件绑定

语法格式1：如下图，将id值为one的所有dom对象的click事件绑定在内部的函数中。

$(选择器).事件名(事件的处理函数) 
$("#one").click(function(){
 alert(1);
 })

【注意】这里的事件没有on关键字！

---

语法格式2：这个和上面差不多，不再赘述

$(选择器).on(事件名，事件的处理函数)

事件名-如click，去掉on

---

6.常用函数_第一组

第一个：val()函数 →操作dom对象的value值属性；读/改

• 无参调用：$(选择器).val() 获取第一个dom对象的值；

• 有参调用：$(选择器).val("值") 改变jquery所有对象的值

第二个：text()函数

• 所有dom对象的文字显示内容属性

• $(选择器).text() 读取所有DOM对象的文字显示内容，拼接位一个字符串返回；

• $(选择器).text(值) 统一赋值；

第三个：attr()函数

• 对val，text之外的其他属性赋值

• $(选择器).attr("属性名")→获取dom数组第一个对象的属性值

• $(选择器).attr("属性名","值")→统一赋值；

---

7.常用函数_第二组

第一个：remove()函数

• 用法：$(选择器).remove() 将数组中所有DOm对象及其子对象一起删除

第二个：empty()函数

• $(选择器).empty() 将数组中所有DOm对象的子对象删除

第三个：append()函数→为所有的DOM对象添加子对象

• 常见类型：table、button、select、div都可以；

• 语法格式：$(选择器).append("<div>我动态添加的div</div>")

​​​​​​​var htm = "<input type = 'button' value='Nihaoa'/>";
//注意引号嵌套用单引号 
$("div:first").append(htm);

第四个：html()函数→设置/返回被选中元素的内容，即 innerHTML

• $(选择器).html() 获取DOM数组第一个元素内容；

• $(选择器).html(值) 统一赋值；

  ​​​​​​​​​​​​​​​​​​​​​<span> 我是jdbc<b>的的的的的jdbc</b> </span>
  alert($("span").html()); 我是SPAN<b>的的的的的数据库</b>

第五个：each()函数→对数组、json数组、dom数组遍历

语法1：$.each(循环的内容，处理函数)

其中，处理函数：

处理函数：function(index,element)
index element都是自定义的
index：循环的所有
element：成员

• 普通数组

$.each($(":text"),function(index,element){
    print("index"+index+"element is "+element)
//这里可以用任意变量名，如index→i；
})

• json数组

var json = {"name":"123","id":44};
$.each(json,function(i,n){
    alert(i+"'s value is"+n);
//这里的i为name、id，n为123、44；
})

• dom数组

var obj = $(":text");
<input type ='text' value="text1 " /><br/>
<input type ='text' value="text2 " disabled/><br/>
<input type ='text' value="text3 " /><br/>
<input type ='text' value="text4 " disabled/><br/><!--只读-->
$.each(obj,function(i,n){
    alert(n.value);
    //i为下标，n为每个text输入框对象
})

---

语法2：jquery对象.each(function(index，element){处理程序})→略；

---

8.Jquery下的Ajax_$.ajax()

在Jquery下实现Ajax异步请求非常方便，用$.ajax(parameters)函数即可，其中函数参数包括请求的url，请求的方式，参数值等，值得一提的是：
即$.ajax()参数是一个json格式的；如：$.ajax({名称：值，名称2：值2})

   参数1：async 默认为true，异步；
   参数2：contextType：字符串，表示从浏览器发送给浏览器的参数类型，如：
     如contextType："application/json"
     //在JS中，如果是字符串则必须加引号；
   参数3：data
     可以是字符串，数组，json
     代表请求的参数和参数值；
     data：{name：“sdf”，id：“33”}
   参数4：dataType：表示期望服务端返回的格式
     如json，xml、http和text
     当浏览器发送$.ajax()的请求时，服务端servlet知道自己需要发回怎样的的数据；
     dataType：“json”
   参数5：error：一个function，表示当请求发生错误时，需要执行的函数；
     举例：error:function(){
     }
   参数6：success
     //一个函数，请求成功了，服务器返回的数据会执行该函数
     //等价于之前的判断条件：readystate=4并且status=200
     //例如：success:function(data){
     //data就是responseTest
     //这里的responseTest是jquery处理后的结果
     }
   参数7：url
     如url：“bmiAjax”
   参数8：type：请求方式
     get或者post
     不区分大小写
     type：“get”
     默认是get；
   

结论：主要使用：url，data，dataType，success四个参数。

除此之外，还有两个更为简便的get和post请求函数可以封装Ajax请求：

 第二个：$.post();
   采用post方式做ajax请求
   本质：还是调用的$.ajax();
   语法：$.post(url，data，function（resp)，dataType)//URL是必须的
 第三个：$.get();
   采用get方式做ajax请求
   本质：还是调用的$.ajax();
   语法：$.get(url，data，function（resp)，dataType)//URL是必须的
     

【注意】在$.ajax()函数中，其中的参数顺序没有规定，而get和post必须是按照图上的参数顺序进行传入！

---

9.Jquery实现级联查询

需求描述：现在有省和对应城市的mysql表，需要点击按钮实现省份下拉框加载进已有的省，然后根据省去查询城市，反应在城市表中。

效果：

 原材料：省份sql脚本

链接: https://pan.baidu.com/s/1muxgVDd3_h4e4iWK-3yQkA 提取码: 1cus 复制这段内容后打开百度网盘手机App，操作更方便哦

---

思路：前端通过JS→jquery发送Ajax请求、后端用Tomcat和HttpServlet，利用jdbc从数据库中查询返回json格式数据→前端处理得到的结果

代码：

//1.CT.java
public class CT {
    private String provinceID;
    private String cityName;

    public CT(String provinceID, String cityName) {
        this.provinceID = provinceID;
        this.cityName = cityName;
    }

}
//2.peovinc.java
public class peovinc {
    private int id;
    private String name;

    public peovinc(int id, String name) {

        this.id = id;
        this.name = name;
    }
    
}
//3.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>G</servlet-name>
        <servlet-class>comAI.houtai</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>G</servlet-name>
        <url-pattern>/ceshi</url-pattern>
    </servlet-mapping>

    <servlet>
        <servlet-name>GG</servlet-name>
        <servlet-class>comAI.city</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>GG</servlet-name>
        <url-pattern>/CITY</url-pattern>
    </servlet-mapping>

</web-app>

//4.index.jsp

<%--
  Created by IntelliJ IDEA.
  User: saberQueen
  Date: 2021/11/29
  Time: 18:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!--优化
1.在页面加载后自动加入省份表
-->
<html>
<center>
  <head>
    <title>ajax_级联查询</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
      //URL样式；/sf/id=3  →返回省份下拉列表；
      function loadAJX(){
        var count = 0;
        $.ajax({
          url : "ceshi",
          dataType : "json",
          error : function(){
            alert("失败");

          },
          success : function(resp){
            // alert(1);
            // alert(1);
            //如果已经加载完毕，则不用加载了；

            if(count===0){
              for(var i=0;i<resp.length;i++){
                var x = "<option value="+ resp[i]["id"]+">"+ resp[i]["name"]+"</option>";
                $("#province").append(x);
                //<option value=1> 河北 </option>";
              }
              count++;

            }

          }

        })
      }

      $(function(){
        loadAJX();
        $("#btn").click(function(){
          // alert(100);
               loadAJX();
        })

            //如果被选择河北，则根据其id查询数据库，返回id为1的所有城市并且在下拉列表中展示；
        //onchange句柄；
        var cou =0;
        $("#province").change(function(){
          var idNum = $("#province>option:selected").val();
          // alert(idNum);
          // alert(10000);

          $.ajax({
            url: "CITY",
            data :{
              id : idNum
            },
            dataType : "json",
            success : function(response){
              // $("#first").empty();
                  // alert(9999);
              // <option value="0"> 请下拉选择城市   </option>;
              if(cou++!=0){
                $("#city").empty();
                var x = "<option value='0' id='first'> 请下拉选择城市   </option>";
                $("#city").append(x);

              }
                for(var i=0;i<response.length;i++){
                  var x = "<option value="+ response[i]["provinceID"]+">"+ response[i]["cityName"]+"</option>";
                  $("#city").append(x);
                  //<option value=1> 河北 </option>";
                }

            }

          })
        })

      })

    </script>

  </head>
  <body>
  <div>
    <p> 省市级联查询 </p>
    <select id="province">
      <option value="0"> 请下拉选择省份   </option>
    </select>
    <br/><br/>
     <select id="city">
        <option value="0" id="first"> 请下拉选择城市   </option>
    </select><br/><br/>

  </div>

  </body>
<center><input type="button"  value="加载省份"  id="btn"  /></center>
</center>
</html>

//5.省后台处理程序
package comAI;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * @author zhangsan
 * @create 2021-11-29 18:39
 */
public class houtai extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//            response.setContentType("application/json;charset=uft-8");
        response.setContentType("application/json;charset=utf-8");
//        System.out.println("111111111111");
        List<peovinc> list = new ArrayList<>();

            //URL样式；/sf/id=3  →返回省份下拉列表；
        Connection col = null;
        PreparedStatement ps = null;  //变为预编译的Statemnet对象
        ResultSet rs = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            col = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123456");
            String sql = "select id,name from province;  ";
            ps = col.prepareStatement(sql);
//            ps.setString(1, request.getParameter("number"));
            rs = ps.executeQuery();
            peovinc pro;
            String jsonFromJava="{}";//定义在这里是为了保证能够传送回去一个json格式的对象；
            PrintWriter pw =  response.getWriter();
            while(rs.next()){
                int id = Integer.valueOf(rs.getString("id"));
                String name = rs.getString("name");
//                String jiancheng = rs.getString("jiancheng");
//                String shenghui = rs.getString("shenghui");

                pro  = new peovinc(id,name);
                list.add(pro);

            }
            //转换为json对象；
            ObjectMapper om = new ObjectMapper();
            jsonFromJava = om.writeValueAsString(list);
            //{"id":1,"name":"河北"}{"id":2,"name":"山西"}{"id":3,"name":"内蒙古"}{"id":4,"name":"辽宁"}{"id":5,"name":"江苏"}{"id":6,"name":"浙江"}{"id":7,"name":"安徽"}{"id":8,"name":"福建"}{"id":9,"name":"江西"}
//                System.out.println("转换后的结果是" + jsonFromJava);
            pw.print(jsonFromJava);//传输回去字符串；
            System.out.println(jsonFromJava);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        catch(SQLException e ){
            e.printStackTrace();
        }finally {
            if (rs!=null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (col !=null) {
                try {
                    col.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }





    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

//6.城市后台程序
package comAI;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
import java.util.ArrayList;
import java.util.List;

/**
 * @author zhangsan
 * @create 2021-11-29 20:40
 */
public class city extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //根据id查城市，返回//URL样式；/sf/id=3  →返回省份下拉列表；
        response.setContentType("application/json;charset=utf-8");
        String ID = request.getParameter("id");
        System.out.println(ID);
        List<CT> list = new ArrayList<>();
        Connection col = null;
        PreparedStatement ps = null;  //变为预编译的Statemnet对象
        ResultSet rs = null;
//        CT pro = null;
        try {
            CT pro = null;
            Class.forName("com.mysql.cj.jdbc.Driver");
            col = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb","root","123456");
            String sql = "select name from city where provinceid = ?  ";
            ps = col.prepareStatement(sql);
            ps.setString(1, ID);
            rs = ps.executeQuery();

            String jsonFromJava="{}";//定义在这里是为了保证能够传送回去一个json格式的对象；
            PrintWriter pw =  response.getWriter();
            while(rs.next()){
//                int id = Integer.valueOf(rs.getString("id"));
                String name = rs.getString(1);
//                String jiancheng = rs.getString("jiancheng");
//                String shenghui = rs.getString("shenghui");
                pro  = new CT(ID,name);
                list.add(pro);
            }
            //转换为json对象；
            ObjectMapper om = new ObjectMapper();
            jsonFromJava = om.writeValueAsString(list);
            //{"id":1,"name":"河北"}{"id":2,"name":"山西"}{"id":3,"name":"内蒙古"}{"id":4,"name":"辽宁"}{"id":5,"name":"江苏"}{"id":6,"name":"浙江"}{"id":7,"name":"安徽"}{"id":8,"name":"福建"}{"id":9,"name":"江西"}
//                System.out.println("转换后的结果是" + jsonFromJava);
            pw.print(jsonFromJava);//传输回去字符串；
            System.out.println(jsonFromJava);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        catch(SQLException e ){
            e.printStackTrace();
        }finally {
            if (rs!=null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(ps!=null){
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (col !=null) {
                try {
                    col.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }






    }
}

【注意】除此外，本次实验还额外加了几个库，如下图，具体文件和源代码至github：

GitHub - Zhujie-ww/jquery_searchContribute to Zhujie-ww/jquery_search development by creating an account on GitHub.https://github.com/Zhujie-ww/jquery_search