jQuery中使用ajax:
在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中;市面上有多个版本的jQuery库,这里到官网:https://jquery.com/download/随意找个比较老的版本即可,后面学完node可以使用npm更方便地下载到具体的版本,这里就不做过多强调了;下载完后要找到文件:jquery-1.12.4.zip\jquery-1.12.4\dist - 这个位置的文件就是要引入项目的文件,解压大小为 2.3 MB左右,其用法如下:
//1.脚本之前引入jQuery文件:
<script src="jquery.min.js"></script>
//2.$ajax()是jQuery的ajax API,最基础的可以传两个参数,参数一为URL地址;参数二为对象;习惯传入一个对象作为参数,URL地址可以在这个对象中设置:
$.ajax('time.php', {
type: 'post', //提交方式,当为post时请求是通过请求体传递,当为get时,请求是通过URL传递
success: function(result) { //请求成功后的回调函数,里面的参数是响应体
console.log(result);
};
});
$.ajax({
url: 'time.php',
type: 'get',
data: {//data给服务端传递参数,后面跟一个对象。
id: 1,
name: 'kuhai',
age: 18
},
dataType: 'json', //当服务端没有设置Content-Type: application/json时,可以通过dataType:'json'设置响应体数据的类型。
//如果data接收formData二进制数据,那么需要加依稀两个属性:
contentType:false,
processData:false,
//解决二进制数据结束
success: function(result) {
console.log(result);/result会根据服务端设置的header('Content-Type: application/json')做出对应的响应,而原生的是不会根据服务端做出对应的响应,jQuery特有的。
}
});
jQuery中ajax的基本使用方法:
<script>
$.ajax({
url: 'time.php',
type: 'get',
beforeSend: function(xhr) {
// 在所有发送请求的操作(open, send)之前执行
console.log('beforeSend');
},
success: function(res) {
//只有请求成功(状态码为200)才会执行这个函数
console.log('success')
},
error: function(err) {
//只有请求不正常(状态码不为200)才会执行
console.log('error')
},
complete: function(com) {
// 不管是成功还是失败都会执行这个 complete 函数
console.log('complete')
}
});
</script>
jQuery中ajax快捷操作:
<script>
// 以get的方式请求:
$.get('time.php', {
id: 1,
name: 'ming'
}, function(result) {
console.log(result);
});
// 以post的方式请求:
$.post('json.php', {
age: 18
}, function(res) {
console.log(res);
});
// 以json数据格式的方式请求:Request Method默认值: GET
$.getJSON('json.php', {
gender: 1
}, function(sex) {
console.log(sex);
});
</script>
jQuery中ajax全局事件:
jQuery中全局事件指:ajaxStart和ajaxStop事件,只要有ajax发生或结束就会执行此事件,常用于做加载进度条效果:(nprogress是一个做进度条的插件,有兴趣的话可以到官方文档学习)
<script>
$(document).ajaxStart(function() {
// 只要有 ajax 请求发生就会执行此函数,函数中可以设计多种逻辑代码
})
.ajaxStop(function() {//注意这里为链式调用
// 只要有 ajax 请求结束就会执行此函数,函数中可以设计多种逻辑代码
})
})
</script>
jQuery中不刷新页面实现局部加载:
jQuery中load(url,data,function(response,status,xhr))方法是使用ajax对数据加载,URL是数据接口地址,data是请求时向服务器发送的数据,function是请求完成时执行的函数(response请求的结果,status请求状态,XMLHttpRequest对象);此方法只传入页面的URL时,如果URL字符串中有空格且后面为一个页面元素的选择器,则只请求选择器这个元素,这样就可以实现页面局部刷新效果,如:
<!--index页面:有事件load,引入jQuery库,实现局部加载-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery.min.js"></script>
</head>
<body>
<div>
<a class="list" href="index.html">页面1</a>
<a class="list" href="index2.html">页面2</a>
<a class="list" href="index3.html">页面3</a>
</div>
<main id="main">
<h2>页面1</h2>
</main>
<script>
$(function($) {
// 点击时拿到被点击的a标签中的href属性值,通过load方法中ajax请求数据
$('.list').on('click', function() {
var url = $(this).attr('href');
$('#main').load(url + ' #main');//url字符串中使用空号+选择器实现只加载选择器指定的元素:'index2.html #main'
return false;//阻止a标签默认跳转事件
})
})
</script>
</body>
</html>
下面是index.html中a标签地址指向页面的代码:
<!--index2中的代码:-->
<main id="main">
<h2>页面2</h2>
</main>
<!--index3中的代码:-->
<main id="main">
<h2>页面3</h2>
</main>
jQuery中JSONP:
<script>
$.ajax({
url: 'http://day-03.io/test/server.php',
dataType: 'jsonp',//开启jsonp跨域请求
success: function(res) {
console.log(res)
}
})
</script>
ajax跨域请求:
实际中ajax中已经支持跨域请求,只需要在服务端设置:header(‘Access-Control-Allow-Origin: *’)此配置,即可实现ajax跨域请求,如:
<script>
$.get('http://day-03.io/test/cors.php', {}, function(res) {
console.log(res);
});
</script>
服务端代码:
<?php
$data = time();
// 一行代码允许跨域请求
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
echo json_encode($data);
FormData:
FormData是html5新增传送二进制数据(文件)的对象,其具体用法如:
//通过ajax的方式将文件域中的文件提交给服务端:
var file = $('input').prop('files')[0];//获取到input文件域中的文件
var data = new FormData();//创建FormData对象
data.append('names',file);//append方法中次一个参数是文件域中name属性的值,第二个值为文件域中的文件
var xhr = new XMLHttpRequest();//创建ajax对象
xhr.open('POST',url);//以post方式连接地址为url的服务端
xhr.send(data);//将包含文件的data对象传给服务端
xhr.onload = function(){//通过onload处理服务端返回的数据,这里还可以使用onreadystatechange事件当this.readyState值为4时处理服务端返回的结果
console.log(this.responseText);//服务端返回的数据
};
FormData几个常用的方法如下:
//创建FormData对象:
var formData = new FormData(form);//这里出入一个form表单
//1.formData.append('names',datas),将name属性值为names的input控件的值datas追加到对象中,也可以直接将要发送的数据传入对象中,如上面对象创建时传入一个form表单
formData.append('names',datas);
//2.formData.get('names');获取form表单中name属性值为names的input中的值
formData.get('names');
//3.formData.getAll('names');以数组形式获取form表单中name属性值为names的所有input中的值
formData.getAll('names');
//4.formData.has('names');判断form表单中是否有name属性值为names的input中的数据
formData.has('names');
//5.formData.delete('names');删除form表单中name属性值为names的input中的数据
formData.delete('names');
fileupload和uploadify插件:
除formData可以上传二进制数据外,这里推荐使用两款插件fileupload和uploadify(兼容IE低版本,支持flash)也是可以上传二进制数据的,如果想要了解更多,建议阅读相关文档:https://www.jq22.com/jquery-info103、https://www.jq22.com/jquery-info230
异步获取form表单内容:
当开发登录页面的时候,一般会把登录页做成异步请求数据的形式,此时需要先获取到form表单中的内容,获取表单内容的方式可以是通过DOM的形式,但是当页面数据足够多的时候,此时以DOM的方式获取form的内容就会很繁琐;jQuery中提供了一个表单序列化的API:serialize(),它可以获取form表单中有name属性的控件的值,利用此方法就可以将form中的内容拿到,之后通过ajax的方式去服务端进行校验,如:
<body>
<form action="" id="formadmin">
<input type="text" name='username'>
<input type="password" name='password' class='pw'>
</form>
<script>
$(function() {
// 当密码框失去焦点时获取form数据,之后通过ajax的方式提交给服务端:
$('.pw').blur(function() {
var data = $('#formadmin').serialize();
var arr = data.split('&');
var dataObj = {};
arr.forEach(function(item, i) {
var datas = item.split('=');
dataObj[datas[0]] = datas[1];
});
// 通过ajax的方式将form中的数据提交给服务端:
$.ajax({
url: 'test.php',
type: 'post',
data: dataObj,
dataType: 'json',
success: function(result) {
console.log(result);
}
});
console.log(dataObj);
});
});
//需要注意:json对象,IE8以下是不支持的,若要兼容IE8以下,那么就的使用一个插件:json2.js或json3.js
</script>
</body>
Validator:
Validator是一款做校验的常用插件,其使用方法可以阅读官方文档:https://www.jq22.com/jquery-info743
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海