进阶 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();
Last updated