进阶 5 - jQuery 和 Ajax

jQuery是一个曾经火遍大江南北的一个Javascript的第三方库. jQuery的理念: write less do more. 其含义就是让前端程序员从繁琐的js代码中解脱出来. 我们来看看是否真的能解脱出来.

python => 基础语法 => 系统模块 => 第三方的库

jQuery的下载：

jquery:

https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.9.1/jquery.js

https://code.jquery.com/jquery-3.6.0.min.js

只需要把上面这个jquery下载的网址复制到浏览器上, 然后保存(ctrl+s)成js文件就可以了.

jQuery初使用

导入jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

我们用jQuery来完成一个按钮的基本点击效果. 当然, 得和传统的js对比一下

先准备好html. 页面结构. 这里复制粘贴就好

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="div-out">
        <input type="button" class="btn" value="我是按钮. 你怕不怕">
        <div class="mydiv">我怕死了...</div>
    </div>
</body>
</html>

需求: 点击按钮. 更改mydiv中的内容.

// 传统js
window.onload = function(){
    document.querySelector(".btn").onclick = function(){
        document.querySelector('.mydiv').innerText = "我好啪啪啊";
    };
}

// jQuery
$(function(){  // $(document).ready(function(){
    $(".btn").click(function(){
        $(".mydiv").text('我要上天');
    })
})

除了$外, 其他东西貌似都挺容易理解的. 而且代码简洁. 异常舒爽.

$是什么鬼, 在jQuery中, $可以认为是jQuery最明显的一个标志了. $()可以把一个普通的js对象转化成jQuery对象. 并且在jquery中 $的含义就是jQuery.

jQuery选择器

jQuery的逻辑和css选择器的逻辑是一样的.

// 语法:
$(选择器)

可以使用jQuery选择器快速的对页面结构进行操作.

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>

        $(function(){
            $(".btn").on('click', function(){
                $(".info").text("");
                let username = $("#username").val();
                let password = $("#password").val();
                let gender = $("input:radio[name='gender']:checked").val();  // input标签中radio 并且name是gender的. 并且被选择的.
                let city = $("#city").val();

                let flag = true;
                if(!username){
                    $("#username_info").text('用户名不能为空!');
                    flag = false;
                }

                if(!password){
                    $("#password_info").text('密码不能为空!');
                    flag = false;
                }

                if(!gender){
                    $("#gender_info").text('请选择性别!');
                    flag = false;
                }

                if(!city){
                    $("#city_info").text('请选择城市!');
                    flag = false;
                }

                if(flag){
                    $("#login_form").submit();
                } else {
                    return;
                }
            })
        })

    </script>
</head>
<body>
    <form id="login_form">
        <label for="username">用户名: </label><input type="text" id="username" name="username"><span class="info" id="username_info"></span><br/>
        <label for="password">密码: </label><input type="password" id="password" name="password"><span class="info" id="password_info"></span><br/>
        <label>性别: </label>
            <input type="radio" id="gender_men" name="gender" value="men"><label for="gender_men">男</label>
            <input type="radio" id="gender_women" name="gender" value="women"><label for="gender_women">女</label>
            <span class="info" id="gender_info"></span>
        <br/>

        <label for="city">城市: </label>
            <select id="city" name="city">
                <option value="">请选择</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
            </select>
            <span class="info" id="city_info"></span>
        <br/>

        <input type="button" class="btn" value="登录">
    </form>
</body>
</html>

发送ajax请求

什么是ajax？

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
它不是一门编程语言，而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
对于传统的网页，如果想更新内容，那么必须要刷新整个页面，但有了Ajax，便可以在页面不被全部刷新的情况下更新其内容。在这个过程中，页面实际上是在后台与服务器进行了数据交互，获得数据之后，再利用JavaScript改变页面，这样页面内容就会更新了。
简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

//get()方式
  $.ajax({
     url:'./data/index.txt',
     type:'get',
      //当请求成功后，执行下面的匿名函数，函数参数data就是请求到的数据
     success:function(data){
        $('p').html(data);

     },
     error:function(error){
        console.log(error)
     }})

//post()方式
$.ajax({
   url:'/index',
   type:'post',
   data:{name:'张三',age:12},//post的请求参数
   success:function(dd){
      $('p').html(dd);
   },
   error:function(error){
      console.log(error)
}

// 创建一个新的XMLHttpRequest对象
let xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('GET', 'https://xxx.com', true);

// 设置请求完成时的回调函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 400) {
    // 请求成功，处理返回的数据
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    // 请求失败，处理错误
    console.error('请求失败，状态码：' + xhr.status);
  }
};

// 设置请求过程中发生错误的回调函数
xhr.onerror = function() {
  console.error('请求过程中发生错误');
};

// 发送请求
xhr.send();

案例：https://www.endata.com.cn/BoxOffice/BO/Year/index.html

Previous进阶 4 - DOM 对象 NextNodeJS

Last updated 11 months ago

hashtagjQuery初使用

hashtagjQuery选择器

hashtag发送ajax请求

jQuery初使用

jQuery选择器

发送ajax请求