jQuery中的Ajax
jQuery对JavaScript语言进行了封装，并对Ajax异步交互进行了封装。
- jQuery提供了6个Ajax操作方法
- load方法
- . g e t ( ) 方 法 和 .get()方法和 .get()方法和.post()方法
- $.ajax()方法
- . g e t S c r i p t ( ) 方 法 和 .getScript()方法和 .getScript()方法和.getJSON()方法
- jQuery提供的事件
- ajaxStart()事件和ajaxStop()事件
- ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件
一. jQuery提供的Ajax方法
-
load()方法: jQuery中最简单的Ajax方法
- load(url,[data],[callback]);
- url: 请求HTML页面的url地址
- data：发送给服务器端的key/value形式的数据内容
- callback: Ajax请求完成时的回调函数
- load()方法的请求方式由是否传递参数决定
- 如果有则为POST请求
- 没有则为GER请求
- 返回值为服务器端的响应结果，会自动将结果写入到目标元素中
- 例子:
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function(){ $('button').load('gettext.json',{'name':'zhangsan'},function(){ console.log('请求成功') }) }) </script> -
. g e t ( ) 方 法 和 .get()方法和 .get()方法和.post()方法
. g e t 方 法 和 .get方法和 .get方法和.post()方法的格式一样
- $.get(url,[data],[callback],[type]);
- url: 请求HTML页面的url地址
- data：发送给服务器端的key/value形式的数据内容
- callback: Ajax请求完成时的回调函数
- type：设置返回数据内容的格式。值为xml、html、script、json、text和_default
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function () { /* get(url,[data],[callback],[type]) - url: 请求HTML页面的url地址 - data：发送给服务器端的key/value形式的数据内容 - callback: Ajax请求完成时的回调函数 - type: 设置服务器端响应的格式 function(response){} */ $.get('gettext.json',{name:'张三'},function(res){ console.log('成功执行' + res) },'text') }) </script>- $.post(url,[data],[callback],[type]);
- url: 请求HTML页面的url地址
- data：发送给服务器端的key/value形式的数据内容
- callback: Ajax请求完成时的回调函数
- type：设置返回数据内容的格式。值为xml、html、script、json、text和_default
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function () { $.post('gettext.json',{name:'张三'},function(res){ console.log('成功执行' + res) },'text') }) </script> -
$.ajax()方法: 是jQuery最底层的Ajax方法
$.ajax(url,[settings]);
- url 请求地址
- settings 设置异步请求的参数
settings选项
- type 设置请求方式
- data 发送给服务器端的请求数据
- dataType 服务器端响应结果的格式
- success 异步请求成功后的回调函数
例子:
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function () { /* $.ajax(url,[settings]) - url 请求地址 - settings 设置异步请求的参数 settings选项 - type 设置请求方式 - data 发送给服务器端的请求数据 - dataType 服务器端响应结果的格式 - success 异步请求成功后的回调函数 */ $.ajax('gettext.json', { type :'get', dataType: 'text', success : function(data){ console.log(data); } }) }) </script> -
$.getScript()方法：用于动态加载指定JavaScript文件
- $.getScript(url,[callback]);
- url: 请求JavaScript文件的url地址
- callback：指定JavaScript文件成功加载后的回调函数
- 可以提升js文件加载的时间
- 例子:
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function () { $.getScript('getScript.js', function(data){ console.log(data); eval(data); }) }) </script> -
$.getJSON()方法：用于动态加载指定JSON格式的数据内容
- $.getJSON(url,[data],[callback]);
- url:请求javaScript文件的url地址
- data: 发送给服务器端的key/value形式的数据内容
- callback：指定JavaScript文件成功加载后的回调函数
- 例子:
<button>按钮</button> <script src="./jquery-3.5.1.js"></script> <script> // 为按钮添加点击事件 $('button').click(function () { $.getJSON('gettext.json', function (data) { console.log(data); }) }) </script>
二. jQuery的三级联动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级联动jQuery版</title>
<script src="./jquery-3.5.1.js"></script>
</head>
<body>
<!-- 省 -->
<select id="province"></select>
<!-- 市 -->
<select id="city">
<option value="">---------</option>
</select>
<!-- 区 -->
<select id="counties">
<option value="">---------</option>
</select>
<script>
var $province = $('#province');
var $city = $('#city');
var $counties = $('#counties');
var json;
var cities
$.getJSON('../Ajax的基本用法/data/server1.json', function(data){
json = data;
// 遍历data
$.each(data, function(index,obj){
// 获取省名
var provinceName = obj.province;
// 添加
$province.append($('<option value="'+ provinceName +'">'+ provinceName +'</option>'));
});
})
$province.bind('change',function(){
// 每次加载前先清空
$city.empty();
// 追加横线
$city.append('<option value="">---------</option>');
var provinceElementName = $(this).children('option:selected').text();
$.each(json,function(index,obj){
var provinceName = obj.province;
if(provinceElementName === provinceName){
cities = obj.cities;
$.each(cities, function(index,obj){
var cityName = obj.city;
$city.append($('<option value="' + cityName + '">' + cityName + '</option>'));
})
}
})
})
$city.bind('change', function(){
$counties.empty();
$counties.append('<option value="">---------</option>');
var cityElementName = $(this).children('option:selected').text();
$.each(cities, function(index,obj) {
var city = obj.city;
if(cityElementName === city){
var counties = obj.counties;
$.each(counties,function(index,obj){
var countiName = obj;
$counties.append($('<option value="' + countiName + '">' + countiName + '</option>'));
// console.log(123)
})
}
})
})
</script>
</body>
</html>
三. jQuery搜索提示案例
-
页面结构
<div class="container"> <!-- 搜索框 --> <input type="text" id="sreach"> <!-- 提示框 --> <div class="alert"> <ul> </ul> </div> </div> -
JS部分
// 获取用户输入行为 输入事件 input $('#sreach').bind('input',function(){ $('.alert>ul').empty(); // 根据用户输入内容动态获取数据 var inputValue = $(this).val(); $.getJSON('./server.json',function(data){ $.each(data,function(index,obj){ var inputname = obj.name; if(inputname.indexOf(inputValue)>=0){ var value = obj.value; $.each(value,function(index,text){ $('.alert>ul').append($('<li>' + text + '</li>')) }) } }) }) // 显示提示框 $('.alert').css('display','block'); }).bind('blur', function () { $('.alert').css('display', 'none'); })
四. 异步提交表单的步骤
异步提交表单：就是不再使用表单的提交按钮实现表单的提交功能，而是通过Ajax异步交互方式
- 实现表单提交。具体实现步骤如下:
- 获取表单及所有表单组件对应的数据值
- 将所有 表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据
- 通过Ajax异步交互方式提交表单
$('form').bind('submit',function(event){
// 阻止默认请求
event.preventDefault();
// 获取表单组件的数据内容
var name = $('#name').val();
// 构建发送给服务器端的数据格式
var data = 'name=' + name;
// 异步交互提交表单
$.post('formserver.json',data,function(response){
console.log(response)
})
})
五. 表单序列化
-
serialize()方法：将表单组件对应的数据值序列化为指定格式的字符串内容
<form action="#"> <input type="text" id="name" name="name"> <input type="text" id="password" name="password"> <input type="submit"> </form> <script> $('form').bind('submit',function(event){ // 阻止默认行为 event.preventDefault(); // 表单序列化 var data = $('form').serialize(); // 异步交互提交表单 $.post('./formserver.json',data,function(response){ console.log(response) }) }) </script> -
serializeArray()方法: 将表单组件对应的数据值序列化为JSON格式的数据内容
<form action="#"> <input type="text" id="name" name="name"> <input type="text" id="password" name="password"> <input type="submit"> </form> <script> $('form').bind('submit',function(event){ // 阻止默认行为 event.preventDefault(); // 表单序列化 var data = $('form').serializeArray(); // 异步交互提交表单 $.post('./formserver.json',data,function(response){ console.log(response) }) }) </script>
扫一扫
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
