JQuery介绍和使用

2.4 JQuery

2.4.1 jquery介绍

• 通过JQuery AJAX方法，可以使用http协议按Get/post请求方式从远程服务器上请求文本，HTML，XML，JOSN。将数据载入网页中。
• JQuery不是生产者是搬运工，jQuery 是一个 JavaScript 库，简化了 JavaScript 编程。
• jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

• JQuery AJAX本质是XMLHttpRequest，对其进行分装来调用
• 如果没有 jQuery，AJAX 编程还是有些难度的。

编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

2.4.2 jQuery 引入

• 可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

• 从 jquery.com 下载 jQuery 库
• • 有两个版本的 jQuery 可供下载：
  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，是可读的代码）
• 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery,如百度CDN:

<’head> <‘script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”>

• jQuery 库是一个 JavaScript 文件，可以使用 HTML 的

<‘script src=“${pageContext.servletContext.contextPath}/static/js/jquery-3.6.0.min.js”">

2.4.3 jQuery 语法，

• jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

• 基础语法： $(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素，和CSS选择器一致
  • jQuery 的 action() 执行对元素的操作

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

• 应将所有 jQuery 函数位于一个 document ready 函数中，为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败

//完整写法
$(document).ready(function(){
 
   // jQuery 代码...
 
});

//简写
$(function(){
 
   //jQuery 代码...
 
});

• JavaScript 入口函数:

window.onload = function () {
    // 功能代码
}

• jQuery 入口函数与 JavaScript 入口函数的区别：

• jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
• JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

2.4.4 jQuery load() 方法，

• load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

• 也可以把 jQuery 选择器添加到 URL 参数。

• 下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的

  元素中：

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

2.4.5 jQuery AJAX常用的请求方法

• AJAX 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。

• jQuery ajax所有的方法

方法	描述
$.ajax()	执行异步 AJAX 请求
$.ajaxPrefilter()	在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup()	为将来的 AJAX 请求设置默认值
$.ajaxTransport()	创建处理 Ajax 数据实际传送的对象
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()	创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串）
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()	规定 AJAX 请求完成时运行的函数
ajaxError()	规定 AJAX 请求失败时运行的函数
ajaxSend()	规定 AJAX 请求发送之前运行的函数
ajaxStart()	规定第一个 AJAX 请求开始时运行的函数
ajaxStop()	规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()	规定 AJAX 请求成功完成时运行的函数
load()	从服务器加载数据，并把返回的数据放置到指定的元素中
serialize()	编码表单元素集为字符串以便提交
serializeArray()	编码表单元素集为 names 和 values 的数组

• 其中常用的是$.ajax()、$.get() 、$.post() 方法
• $.ajax()是jquery中通用的一个ajax封装，其语法的格式为：$.ajax(options)

options是一个object类型，它指明了本次ajax调用的具体参数

$.ajax({
        url: 'submit.do',
        datatype: "json",
        type: 'post',
        success: function (e) {   //成功后回调
            alert(e);
        },
        error: function(e){    //失败后回调
            alert(e);
        },
        beforeSend: function(){  /发送请求前调用，可以放一些"正在加载"之类额话
            alert("正在加载");
        }
})

• jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

• 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

• GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

• POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get() 方法使用GET方式来进行异步请求，它的语法结构为：

$.get( url [, data] [, callback] )

必需的 URL 参数string类型，ajax请求的地址。

data：可选参数，object类型，发送至服务器的key/value数据会作为QueryString附加到请求URL中。

可选的 callback 参数是请求成功后所执行的函数名,存在两个回调参数。第一个回调参数存有从服务器返回的数据，第二个回调参数存有请求的状态。

$("button").click(function(){
  $.get(
  "demo_test.do",
  { name:     'zs',
    ped:   '11111',
    },
  function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

jQuery $.post() 方法,使用POST方式来进行异步请求

$.post(URL,data,callback,[type]);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

意思是当设置了type为"json"时，(首先服务器返回的结果必须是json字符串格式数据)，返回的数据经过了JSON.parse()处理了，直接就是json对象格式。不设置type时，（返回数据是json字符串格式），返回的数据是字符串，经过JSON.parse()处理才能变为json（对象）格式

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.do",
    {
        name:"百度",
        url:"http://www.baidu.com"
    },
    function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为：

getJSON(url,[data],[callback]) 【返回的数据也是经过JSON.parse()处理过了】

url：string类型， 发送请求地址

data ：可选参数， 待发送 Key/value 参数 ，同get，post类型的data

callback ：可选参数，载入成功时回调函数，同get，post类型的callback

JSON 是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。

使用JSON相比传统的通过 GET、POST直接发送“无格式”数据，在结构上更为合理，也更为安全。

至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。

另外这个函数可以通过把请求url写 成"myurl?callback=X"这种格式，让程序执行回调函数X。

2.4.6 GET 和 POST 方法的区别：

• 发送的数据数量

在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。

在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

• 安全性

GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。

POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。

• 加入书签中

GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

• 编码

在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。

在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。

• 可变大小

GET 方法中的可变大小约为 2000 个字符。POST 方法最多允许 8 Mb 的可变大小。

• 缓存

GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。

• 主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

2.4.7 $.ajax()所有参数详解

• 原文链接：https://www.cnblogs.com/everest33Tong/p/6159700.html

• url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。

• type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。（1.9.0之后用method）

• header:请求头

• timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。

• async：要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。

• cache：要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false）。设置为false将不会从浏览器缓存中加载请求信息。

• data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。

• accepts:通过请求头发送给服务器，告诉服务器客户端接收的数据类型

• dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。

  • dataType:可用的类型如下：
  • • xml：返回XML文档，可用JQuery处理。
  • • html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
  • • script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
  • • json：返回JSON数据。
  • • jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个 “?”为正确的函数名，以执行回调函数。
  • • text：返回纯文本字符串。

• beforeSend：要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数（全局函数），例如添加自定义 HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。

function(XMLHttpRequest){this; //调用本次ajax请求时传递的options参数 }

• complete：complete无论后台返回200(成功)还是非200(失败)都会回调。要求为Function类型的参数（全局函数），请求完成后调用的回调函数（请求成功或失败时均调用,先调用成功或失败后的回调函数,再调用complete的回调函数）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。

例一:function(XMLHttpRequest, textStatus){this; //调用本次ajax请求时传递的options参数 }

例二:complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
　　　　　　if(status==‘timeout’){//超时,status还有success,error等值的情况
　　　　　　 ajaxTimeoutTest.abort();
　　　　　　　 alert(“超时”);
　　　　　　}
　　　　}

• success：success是在后台返回200状态码的时候回调的！要求为Function类型的参数（全局函数），请求成功后调用的回调函数，有两个参数。(1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。

function(data, textStatus){}
//data可能是xmlDoc、jsonObj、html、text等等
this; //调用本次ajax请求时传递的options参数

• error：error是在后台返回状态码为非200的时候回调的。要求为Function类型的参数（全局函数），请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

ajax事件函数如下：
function(XMLHttpRequest, textStatus, errorThrown){
//通常情况下textStatus和errorThrown只有其中一个包含信息
　　this; //调用本次ajax请求时传递的options参数
}

• contentType：要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

• dataFilter：要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。 提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。

function(data, type){
返回处理后的数据
return data;
}

• global：要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局 ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。

• ifModified：要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。

• jsonp：要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如

  {jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。
  

• username：要求为String类型的参数，用于响应HTTP访问认证请求的用户名。

• password：要求为String类型的参数，用于响应HTTP访问认证请求的密码。

• processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

• scriptCharset：要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

      $(function () {
          $("#add").click(function () {
            let username = $("#username").val();
            let pwd = $("#pwd").val();
            let birthday = $("#birthday").val();
            $.ajax({
                url:"${pageContext.request.contextPath}/stu/getInfo",
              //请求类型
              type:"post",
              //data表示发送的数据
              data : JSON.stringify({
                username : username,
                pwd : pwd,
                birthday:birthday
              }), //定义发送请求的数据格式为JSON字符串
              contentType : "application/json;charset=utf-8",
              //定义回调响应的数据格式为JSON字符串，该属性可以省略
              dataType : "json",
              //成功响应的结果
              success:function (data) {
                let html = "";
                if (data != null) {
                    html+= "<tr class='info'><td>"+data.username+"</td><td>"+data.pwd+"</td><td>"+data.birthday+"</td></tr>"
                }
                $("#content").html(html);
              }
            })
          })
      })

2.4.8 noConflict() 方法

• jQuery 使用 $ 符号作为 jQuery 的简写,**如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？**如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行

• noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

• 也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

• jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

2.5 JQuery使用Ajax

• 导入JQuery（jquery-3.6.0.min.js）或vue文件

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

jquery使用方式：

• 编写对应处理请求的controller,返回消息或字符串json格式的数据。

• 编写ajax请求

• • url:controller请求
  • data：键值对
  • success:回调函数

例如：在百度搜索栏输关键字，发起异步请求，返回的这个关键字模糊查询的结果，其中”p“:false代表不跨域

• 给元素绑定ajax事件。

-- ajax请求。底层是get请求,显示定义参数
$(function () {
    $("#submitContent").click(function () {
        $.ajax({
            url:"${pageContext.request.contextPath}/as",
            data:{"name":$("#nameId").val()},
            type:"POST",
            success:function (data,stutas) {
                $("#spContent").text(data+"||"+stutas);
            }
        })
    })
})

//方式2：post请求，常规参数
$("#submitContent").click(function () {
                $.post("${pageContext.request.contextPath}/as02",
                    function (data,stutas) {
                        console.log(data)
                        let result =  eval(data);
                        let html = ""
                        result.forEach(function (user) {
                            console.log(user.password)
                            html+= "<tr><td>"+user.name+"</td><td>"+user.password+"</td></tr>"
                        })
                        $("#content").html(html);
                    }
                )
            })

@RequestMapping(value = "/getStudent01")
    @ResponseBody
    public List<Student> getStudent(){
        ArrayList<Student> students = new ArrayList<>();
        Student student1 = new Student("张三","123456",new java.sql.Date(System.currentTimeMillis()));
        Student student2 = new Student("李四","654321",new java.sql.Date(System.currentTimeMillis()));
        students.add(student1);
        students.add(student2);
        return students;
    }
//方式2：post请求，显示定义参数
$("#submitContent").click(function () {
            $.post({
                url:"${pageContext.request.contextPath}/stu/getStudent01",
                success:function (data) {
                    console.log(data)
                    let html = ""
                    data.forEach(function (student) {
                        html+= "<tr><td>"+student.username+"</td><td>"+student.pwd+"</td><td>"+student.birthday+"</td></tr>"
                    })
                    $("#content").html(html);
                }
            })
        })

• json传递并接收数据

@RequestMapping(value = "/getValiateName")
    @ResponseBody
    public String getValiateName(@RequestParam("name") String name){
        String result = "error";
        if (name!=null) {
            if (name.equals("admin")) {
                result =  "ok";
            }
        }
        return result;
    }
    @RequestMapping(value = "/getValiatePwd")
    @ResponseBody
    public String getValiatePwd(@RequestParam("pwd")  String pwd){
        String result = "error";
        if (pwd!=null) {
            if (pwd.equals("123456")) {
                result =  "ok";
            }
        }
        return result;
    }
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#nameId").blur(function () {
                $.post({
                    url:"${pageContext.request.contextPath}/stu/getValiateName",
                    data:{"name":$("#nameId").val()},
                    success:function (data) {
                        if (data =="ok") {
                            $("#checkName").css("color","green")
                        }else {
                            $("#checkName").css("color","red")
                        }
                        $("#checkName").text(data)
                    }
                })
            });
            $("#pwdId").blur(function () {
                $.post("${pageContext.request.contextPath}/stu/getValiatePwd",
                    {"pwd":$("#pwdId").val()},
                    function (data) {
                        if (data =="ok") {
                            $("#checkPwd").css("color","green")
                        }else {
                            $("#checkPwd").css("color","red")
                        }
                        $("#checkPwd").text(data)
                    })
            })
        })
    </script>
</head>
<body>
姓名：<input name="name" id="nameId" type="text" >
<span id = "checkName"></span>
<br/>
密码：<input name="pwd" id="pwdId" type="password" >
<span id = "checkPwd"></span>
<br/>
<input type="button" id = "submitContent" value="提交">
</body>
</html>

入口函数问题：script脚本的位置在页面内容之前加载所以当script给按钮绑定事件按钮还没生成，自然绑定失败， jQuery 的入口函数$(function () {}）是在 html 所有标签(DOM)都加载之后