目录
GET 请求
-
发起不带参数的 GET 请求
<script> $(function(){ $('#btnGET').on('click', function(){ // $.get(url,[data],[callback]) // 资源地址 携带的参数 请求成功时的回调函数 $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){ console.log(res); }) }) }) </script> -
发起带参数的 GET 请求
<script> $(function () { $('#btnGET').on('click', function () { $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) { console.log(res); }) }) }) </script> -
使用 $.ajax 发起 GET 请求
<script> $(function() { // $.ajax({typr:'',url:'',data:'',success:function(res){}}) // 请求的方式 请求的 url 地址 这次请求要携带的数据 请求成功后的回调函数 $('#btnGET').on('click',function(){ $.ajax({ type:'GET', url:'http://www.liulongbin.top:3006/api/getbooks', data:{ id:1 }, success:function(res){ console.log(res); } }) }) }) </script> -
使用 xhr 发送 GET 请求
<script> // 创建 XHR 对象 var xhr = new XMLHttpRequest(); // 调用 open 函数 // 查询字符串 ? 放在 URL 的末尾，然后加上 参数 = 值 想加上多个参数用 & 进行分隔 xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记') // 调用 send 函数 发去 ajax 请求 xhr.send(); // 监听 onreadystatechange 事件 xhr.onreadystatechange = function(){ // readyState 当前 Ajax 请求所处的状态 // 0：已被创建未调用 open() // 1：open() 已被调用 // 2：send() 方法已被调用 响应头也已被签收 // 3：数接收中 // 4：Ajax 请求完成 意味着数据传输 完成 或 失败 if(xhr.readyState == 4 && xhr.status == 200){ // 获取服务器响应的数据 console.log(xhr.responseText); } } </script>
POST 请求
-
使用 POST 提交数据
<script> $(function () { $('#btnPOST').on('click', function () { // $.post(url,[data],[callback]) // 提交数据的地址 提交的数据 提交成功时的回调函数 $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) { console.log(res); }) }) }) </script> -
使用 $.ajax 发起 POST 请求
$(function() { // $.ajax({typr:'',url:'',data:'',success:function(res){}}) // 请求的方式 请求的 url 地址 这次请求要携带的数据 请求成功后的回调函数 $('#btnGET').on('click',function(){ $.ajax({ type:'POST', url:'http://www.liulongbin.top:3006/api/addbook', data:{ bookname:'史记', author:'司马迁', publisher:'上海图书' }, success:function(res){ console.log(res); } }) }) }) </script> -
使用 xhr 发送 POST 请求
<script> // 创建 xhr 对象 var xhr = new XMLHttpRequest(); // 调用 open() xhr.open('POST', 'http://liulongbin.top:3006/api/addbook') // 设置 Content-Type 属性 固定写法 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 调用 send() 同时将数据以查询字符串的形式 提交给服务器 xhr.send('bookname=水浒传a&author=施耐庵&publisher=天津图书出版社') // 监听 onreadystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } </script>
form 表单
-
form 表单的属性
<!-- action 向何处发送表单数据 应为一个 URL 地址 未指定默认是当前网页 提交表单后页面会立即跳转到指定的 URL 地址 --> <!-- target 规定在何处打开 URL 默认情况下是 _self _self: 在相同的框架下打开 _blank: 在新窗口中打开 --> <!-- method 规定以何种方式把表单数据提交到 URL 可选值有两个 get 和 post 默认 get --> <form action="/login" target="_blank" method="POST"> <input type="text" name="email_or_mobile"> <input type="password" name="password"> <button type="submit">提交</button> </form> <!-- enctype 规定发送表单前如何编码 默认 application/x-www-form-urlencoded 发送文件是要修改为 multipart/form-data --> -
表单的提交事件
<script> $(function () { // // 第一种方式 // $('#f1').submit(function () { // alert('监听到了表单的提交事件1') // }) $('#f1').on('submit', function (e) { alert('监听到了表单的提交事件2') // 阻止表单默认提交行为 e.preventDefault() // $(selector).serialize() 一次性获取到表单中的所有数据 console.log($('#f1').serialize()); }) }) </script>
渲染 UI 结构
传统方法
<body>
<div id="title"></div>
<div>姓名：<span id="name"></span></div>
<div>年龄：<span id="age"></span></div>
<div>会员：<span id="isVIP"></span></div>
<div>注册时间：<span id="regTime"></span></div>
<div>爱好：
<ul id = "hobby">
<li>爱好1</li>
<li>爱好2</li>
</ul>
</div>
<script>
var data = {
title: '<h3>用户信息</h3>',
name: 'zs',
age: 20,
isVIP: true,
regTime: new Date(),
hobby: ['吃饭', '睡觉', '打豆豆']
}
$(function () {
$('#name').html(data.name)
$('#title').html(data.title)
$('#age').html(data.age)
$('#isVIP').html(data.isVIP)
$('#regTime').html(data.regTime)
})
var rows = []
$.each(data.hobby, function (i, item) {
rows.push('<li>' + item + '</li>')
})
$('#hobby').html(rows.join(''))
</script>
</body>
模板引擎
--- 要导入 template-web.js
<body>
<div id="container"></div>
<!-- 3.定义模板
模板的 html 结构必须定义到 script 中
type 改为 text/html 默认 text/javascript -->
<script type="text/html" id='tpl-user'>
<h1>{{name}} --- {{age}}</h1>
<!-- 原文输出 {{@ value}} -->
{{@ test}}
<div>
{{if flag == 0}}
flag 的值为 0
{{else if flag == 1}}
flag 的值为 1
{{/if}}
</div>
<!-- 循环遍历 -->
<ul>
{{each hobby}}
<li>索引是：{{$index}}，循环项是：{{$value}}</li>
{{/each}}
</ul>
<!-- 过滤器 -->
<h3>{{regTime | dateFormat}}</h3>
</script>
<script>
// 定义处理时间的过滤器
template.defaults.imports.dateFormat = function (date) {
// console.log(date);
var y = date.getFullYear()
var m = date.getMonth() + 1
var d = date.getDate()
return y + '-' + m + '-' + d
}
// 2.定义需要渲染的数据
var data = {
name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '敲代码'], regTime: new Date()
}
// 4.调用 template 函数
var htmlStr = template('tpl-user', data)
console.log(htmlStr);
// 渲染 5.html 结构
$('#container').html(htmlStr)
</script>
</body>
exec 函数
-
根据正则表达式提取分组 正则表达式里的（）是一个分组 replace 替换
<script> var str = 'hello' var pattern = /o/ var result = pattern.exec(str) console.log(result); // 提取分组 var s = '<div>我是{{name}}</div>' var p = /{{([a-zA-Z]+)}}/ var r = p.exec(s) console.log(r); // replace 替换 var s = s.replace(r[0],r[1]) console.log(s); </script> -
while 循环进行 replace 操作
<script> var data = { name: '张三', age: 20 } var str = '<div>{{name}}今年{{ age }}岁了</div>' // \s 代表一个空格 \s* 代表 0 至多个空格 var pattern = /{{\s*([a-zA-Z]+)\s*}}/ var patternResult = null while (patternResult = pattern.exec(str)) { str = str.replace(patternResult[0], data[patternResult[1]]) } console.log(str); </script>
自定义模板引擎
<script>
// 定义数据
var data = { name: '张三', age: 20, sex: '男', address: '江西上饶' }
// 调用模板引擎
var htmlStr = template('tpl-user', data)
// 渲染 HTML 结构
document.getElementById('user-box').innerHTML = htmlStr
// 自定义模板引擎
function template(id, data) {
var str = document.getElementById(id).innerHTML
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var result = null
while (result = pattern.exec(str)) {
str = str.replace(result[0], data[result[1]])
}
return str
}
</script>
JSON
-
JSON 和 JS 互换
<body> <script> var jsonStr = '{"a":"hello","b":"world"}' // json 转换为 js var obj = JSON.parse(jsonStr) console.log(obj); // js 转换为 json var json = JSON.stringify(obj) console.log(json); console.log(typeof json); </script> </body> -
JSON.parse 的应用
<script> var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks') xhr.send() xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ console.log(xhr.responseText); console.log(JSON.parse(xhr.responseText)); } } </script>
form 对象
-
<script> // 创建 FormData 实例 var fd = new FormData(); // 调用 append 函数 向 fd 追加数据 fd.append('uname','zs') fd.append('upwd','123456') var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata') xhr.send(fd) xhr.onreadystatechange = function(){ if(xhr.readyState==4&xhr.status ==200){ console.log(JSON.parse(xhr.responseText)); } } </script> -
使用 Form 对象快速获取表单里的元素
<script> // 通过 DOM 操作 获取到 form 表单元素 var form = document.getElementById('form') form.addEventListener('submit', function (e) { // 阻止默认表单行为 e.preventDefault() // 创建 FormData 快速获取到 form 表单 var fd = new FormData(form) var xhr = new XMLHttpRequest() xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata') xhr.send(fd) xhr.onreadystatechange = function () { if (xhr.readyState == 4 & xhr.status == 200) { console.log(JSON.parse(xhr.responseText)); } } }) </script>
文件
-
使用 xhr 上传文件
<script> // 获取文件上传按钮 var btnUpload = document.querySelector('#btnUpload') // 为按钮绑定单击事件处理函数 btnUpload.addEventListener('click', function () { // 获取用户选择的文件列表 var files = document.querySelector('#file1').files if (files.length <= 0) { return alert('请选择要上传的文件') } // console.log('用户选择了带上传的文件'); var fd = new FormData() // 向 FormData 中追加文件 fd.append('avatar', files[0]) var xhr = new XMLHttpRequest() // 监听文件上传的进度 xhr.upload.onprogress = function (e) { // e.lengthComputable 一个布尔值 判断当前上传的资源是否有可计算的长度 if (e.lengthComputable) { // 计算出上传的进度 // e.loaded 已传输的字节 // e.total 需传输的字节 var procentComplete = Math.ceil((e.loaded / e.total) * 100) console.log(procentComplete); // 动态设置进度条 $('#percent').attr('style', 'width:' + procentComplete + '%;').html(procentComplete + '%') } } xhr.upload.onload = function(){ $('#percent').removeClass().addClass('progress-bar progress-bar-success') } xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar') xhr.send(fd) xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText) // console.log(data); if (data.status == 200) { // 上传成功 document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url } else { // 上传失败 console.log('图片上传失败' + data.message) } } } }) </script> -
使用 jQuery 上传文件
<script> $(function () { // 监测 Ajax 请求被发起 $(document).ajaxStart(function(){ $('#loading').show() }) // 监测到 Ajax 完成的事件 $(document).ajaxStop(function(){ $('#loading').hide() }) $('#btnUpload').on('click', function () { var files = $('#file1')[0].files; if (files.length <= 0) { return alert('请选择要上传的文件') } var fd = new FormData(); fd.append('avatar', files[0]) //发起 jQuery 的 Ajax 请求 上传文件 $.ajax({ method:'POST', url:'http://www.liulongbin.top:3006/api/upload/avatar', data:fd, // 上传文件必需的两个属性设置 // 不进行编码 将数据原样发送到服务器 processData:false, // 不修改，使用 FormData 默认的 Content-Type 值 contentType:false, success:function(res){ console.log(res); } }) }) }) </script>
其他
URL 编码与解码
<script>
var str = '江西上饶'
var str2 = encodeURI(str)
console.log(str2);
var str3 = decodeURI('%E6%B1%9F%E8%A5%BF')
console.log(str3);
</script>
封装自己的 Ajax 函数
<script>
xyee({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks',
data: {
id: 1
},
success: function (res) {
console.log(res);
}
})
xyee({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/addbook',
data: {
bookname: '小吖ee',
author: 'xyee',
publisher: '江西出版社'
},
success: function (res) {
console.log(res);
}
})
</script>
设置超时时限
<script>
var xhr = new XMLHttpRequest();
// 设置超时时间
xhr.timeout = 30
// 设置超时以后的处理函数
xhr.ontimeout = function(){
console.log('请求超时');
}
xhr.open('GET','http://www.liulongbin.top:3006/api/getbooks')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
}
</script>
axios 的使用 --- 需导入 axios.js
<body>
<button id="btn1">发起 GET 请求</button>
<button id="btn2">发起 POST 请求</button>
<button id="btn3">直接使用 axios 发起 GET 请求 </button>
<button id="btn4">直接使用 axios 发起 POST 请求 </button>
<script>
document.getElementById('btn1').addEventListener('click', function () {
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
console.log(res.data);
})
})
document.getElementById('btn2').addEventListener('click',function(){
var url = 'http://www.liulongbin.top:3006/api/post'
var dataObj = {address:'北京',location:'顺义区'}
axios.post(url,dataObj).then(function(res){
console.log(res.data);
})
})
document.querySelector('#btn3').addEventListener('click',function(){
var url = 'http://www.liulongbin.top:3006/api/get'
var paramsObj = {name:'ls',age:20}
axios({
method:'GET',
url:url,
params:paramsObj
}).then(function(res){
console.log(res.data);
})
})
document.querySelector('#btn4').addEventListener('click',function(){
axios({
method:'POST',
url:'http://www.liulongbin.top:3006/api/post',
data:{
name:'xm',
age:20,
sex:'男'
}
}).then(function(res){
console.log(res.data);
})
})
</script>
发起跨域的 Ajax 请求
<script>
$.ajax({
method:'GET',
url:'http://www.liulongbin.top:3006/api/jsonp',
data:{
name:'zs',
age:20
},
success:function(res){
console.log(res);
}
})
</script>
JSON
-
success({ name: 'zs', age: 20 }) // 02.js <script src="./02.js"></script> <script src="http://www.liulongbin.top:3006/api/jsonp?callback=success&name=ls&age=30"></script> -
使用 JQuery 发起 JSON 数据请求
<script> $(function(){ // 发起 JSON 请求 $.ajax({ url: 'http://www.liulongbin.top:3006/api/jsonp?name=zs&age=20', // 代表我们要发起 JSONP 请求 dataType: 'jsonp', // 发送到服务端的参数名称 默认 callback jsonp:'cb', // 自定义的回调函数名称，默认值为 jQUeryXXX 格式 jsonpCallback:'abc', success: function (res) { console.log(res); } }) }) </script>
节流阀
<script>
$(function () {
// 获取到图片
var angel = $('#angel')
// 定义一个节流阀
var timer = null
// 绑定 mousemove 事件
$(document).on('mousemove', function (e) {
// 不为空 就不执行图片移动效果
if (timer) return
timer = setTimeout(function () {
// 设置图片位置
angel.css('left', e.pageX + 'px').css('top', e.pageY + 'px')
// 效果执行完设为空
timer = null
}, 20)
})
})
</script>