AJAX简要札记
有 了 a j a x ， 前 端 有 了 一 道 分 水 岭 有了ajax，前端有了一道分水岭 有了ajax，前端有了一道分水岭
1.0 关于ajax和异步
ajax是什么 axios
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
关键词： 异步，不需要页面跳转，局部刷新
__本质： 基于http协议以异步的方式通过 XMLHttpRequest对象 向服务器进行通信__
__作用： 在页面不刷新的情况下，请求服务器，实现局部的渲染数据__
什么是异步
异步的反义词就是同步，同步指在网页的一次请求中，如果不完成这次请求，就不会响应其他的任何操作，效率比较慢；
通过后台处理页面跳转
/*
以往方式写出来的页面，是静态的，数据没有办法改变和刷新
使用php书写：
a, 所有要操作的文件后缀名改成php, 或者通过提交按钮和a链接跳转到php文件
b, 参数必须拼在a链接后面或者form表单内部
b, 书写符合php语法的代码，方法较多难以记忆
c, 在页面中来来回回的跳转, 发送的请求要等待完成之后才能做其他的操作
*/
前端的register.html文件
<form action="./register.php" method="post">
<span id="msg">aaa</span>
用户名：<input type="text" id="userName" name="username" >
昵称：<input type="text" name="nickname" >
密码： <input type="password" name="password" >
<input type="submit" value="注册">
</form>
后台处理的php文件
<?php
header('content-type:text/html;charset=utf-8');
if($_SERVER['REQUEST_METHOD'] == 'POST'){
//获取用户名
$name=$_POST['username'];
//判断数据库中是否已有这个用户名
$names=['jack','rose','tom','lili'];
//有则注册失败，否则成功
if(in_array($name,$names)){
$str = '这个名字太火了，换一个吧！';
echo $str;
header("refresh:10;url=register.html");
}else{
$str = '恭喜，名字可用！';
echo $str;
header("refresh:2;url=register.html");
}
}
?>
通过前端发送ajax请求
异步就是在发起请求之后，不用理会这个过程，等请求结束了，自动返回回来数据，不用进行等待；
/*
a, 原先是html的文件还是html，不用修改文件类型
b, 发送请求不再仅仅依靠a链接或者表单元素
c, 不需要来回跳转页面，用户不需要进行等待
d, 返回的数据可以在局部进行刷新
*/
前端的register.html文件
<form>
<span id="msg">aaa</span>
用户名：<input type="text" name="username" id="username">
昵称：<input type="text" name="nickname" >
密码： <input type="password" name="password" >
<input type="submit" value="注册">
</form>
<!-- 显示ajax请求返回回来的数据 -->
<div class="showmsg"></div>
前端基于http发送的一个异步请求
document.querySelector("#username").onblur = function(){
// 1.获取用户数据
var name = this.value;
// 2.1 创建异步对象
var xhr = new XMLHttpRequest();
// 2.2 请求行发送 open(请求方式，请求url+键值对的参数):
xhr.open("get","validate.php?username="+name);
// 2.3 get请求没有请求头
// 2.4 请求体:发送请求 因为get的参数都拼接到URL后面了所以这里不存在再次传递参数
xhr.send(null);
// 2.5 通过readystate发生改变的事件处理响应
xhr.onreadystatechange = function(){
// 2.6 判断请求是否结束后成功返回 判断服务器状态码是否为200
if(xhr.readyState == 4 && xhr.status == 200){
// 通过xhr对象的responseText接收返回的数据，写入盒子内
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
};
in_array( n a m e , name, name,names) 判断数组$names**
处理后端的php文件
<?php
header('content-type:text/html;charset=utf-8');
if($_SERVER['REQUEST_METHOD'] == 'GET'){
//获取用户名
$name=$_GET['username'];
//判断数据库中是否已有这个用户名
$names=['jack','rose','tom','lili'];
//有则注册失败，否则成功
// in_array($name,$names) 判断数组$names里面是否有$name这个变量
if(in_array($name,$names)){
$str = '这个名字太火了，换一个吧！';
echo $str;
// header("refresh:10;url=register.html");
}else{
$str = '恭喜，名字可用！';
echo $str;
// 这里是2秒以后刷新 地址是register.html这个页面
// header("refresh:2;url=register.html");
}
}
?>
前端的get请求
// 1.1 创建异步对象
var xhr = new XMLHttpRequest();
// 1.2 请求行发送 open(请求方式，请求url+键值对的参数):
xhr.open("get","validate.php?username="+name); // url地址 ? 键=值 & 键=值 & 键=值
// 1.3 get请求没有请求头
// 1.4 请求体:发送请求
xhr.send(null);
// 1.5 通过readystate发生改变的事件处理响应
xhr.onreadystatechange = function(){
// 1.6 判断请求是否结束后成功返回 判断服务器状态码是否为200
if(xhr.readyState == 4 && xhr.status == 200){
// 通过xhr对象的responseText接收返回的数据，写入盒子内
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
前端的post请求
// 1.1 创建异步对象
var xhr = new XMLHttpRequest();
// 1.2 设置请求行 open(请求方式，请求url)
// post请求不需要拼接参数
xhr.open("post","validate.php");
// 1.3 设置请求头:setRequestHeader()
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 1.4 设置请求体 send()
// post的参数在这个函数中设置(如果有参数)
xhr.send("username="+name);
// 1.5 通过readystate发生改变的事件处理响应
xhr.onreadystatechange = function(){
// 1.6 判断请求是否结束后成功返回 判断服务器状态码是否为200
if(xhr.readyState == 4 && xhr.status == 200){
// 通过xhr对象的responseText接收返回的数据，写入盒子内
document.querySelector(".showmsg").innerHTML = xhr.responseText;
}
}
回顾
onblur： 失去焦点时触发
<script>
document.querySelector("#username").onblur = function(){
// 1.获取用户数据
var name = this.value;
// 2，让异步对象发送请求
// 2.1 创建异步对象
var xhr = new XMLHttpRequest();
// 2.2 设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递
xhr.open("get","validate.php?username="+name);
// 2.3 设置 请求头 setRequestHeader('key':'value')
// get方式不需要设置请求头
// post需要设置 Content-Type:application/x-www-form-urlencoded 如果没有设置，参数无法正确的传递到服务器(本质上说，如果没有参数，也不一定需要设置，不会影响请求的发送)
// 2.4 设置 请求体:发送请求 send(参数：key=value&key=value)
// 如果有参数，post应该在这个位置来传递参数
// 对于 get请求不需要在这个位置来传递参数
xhr.send(null);
重点！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
// 响应报文：
// 报文行：响应状态码 响应状态信息 200 ok
// 报文头：服务器返回给客户端的一些额外信息
// 报文体：服务器返回给客户端的数据 responseText:普通字符串 responseXML：符合xml格式的字符串
// xhr.status:可以获取当前服务器的响应状态 200 》成功
console.log(xhr.status);
// 一个真正成功的响应应该两个方面：1.服务器成功响应 2.数据已经回到客户端并且可以使用了
// 监听异步对象的响应状态 readystate
// 0:创建了异步对象，但是还没有真正的去发送请求
// 1.调用了send方法，正在发送请求
// 2.send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
// 3.正在解析数据
// 4.响应内容解析完毕，可以使用了
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
console.log("-----------");
document.querySelector(".showmsg").innerHTML = xhr.responseText;;
}
}
};
</script>
关于get请求和post的请求区别是什么
1、GET可以在请求行URL后面添加请求参数 GET没有请求头
2、GET没有请求主体，使用xhr.send(null)，因为它的参数已经拼接到了URL后面
3、POST可以通过xhr.send(‘name=itcast&age=10’)来发送参数
4、POST需要设置 请求头 Content-type:application/x-www-form-urlencoded
-
var xhr = new XMLHttpRequest();// 创建异步对象
-
xhr.open(“get/post”,url);// 设置请求行 xhr.open(‘请求方式’，‘请求地址’) 如果请求方式是get 就需要在请求地址后面拼接上参数 这里的方式由后端提供的接口里面的数据处理方式来决定 它以get方式处理这里就以get方式传递
-
xhr.setRequestHeader(‘Content-type’,‘application/x-www-form-urlencoded’);// 设置请求头 post方式需要设置 get方式没有请求头
-
xhr.send() // 设置请求体 post方式在这里传递参数 get 方式因为参数已经在请求行的URL地址后面拼接这里不需要再次传递
-
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
//说明已经成功响应了并且返回的数据也已经解析完毕
document.querySelector(“需要显示提示信息的地方”).innerHTMl = xhr.responseText;
}
}
2.0 使用异步对象发送读取JSON文件
在项目开发过程中，用的最多的方式就是json
json格式的数据和特点
[
{
"src":"./images/nav_1.png" ,
"text":"京东超市"
},
{
"src":"./images/nav_2.png" ,
"text":"全球购物"
},
{
"src":"./images/nav_3.png" ,
"text":"京东市场"
}
]
规则和特点
| 关于json的描述 |
|---|
| 1，一组花括号表示一个对象，一个对象通过键值对写入一堆相关数据 |
| 2，一组方括号表示一个数组，多组对象通过数组的方式装载 |
| 3，对象的所有属性都必须加上双引号，值没有undefined |
| 4，文件后缀名为.json，json格式的数据内不允许写注释 |
操作json的方法
| 前端操作json的方式 | |
|---|---|
| JSON.parse(json字符串) | 将json格式的字符串转换为数组或者对象 |
| JSON.stringify(对象或者数组) | 将字面量对象或者数组转换为json格式的字符串 |
| php操作json的方式 | |
|---|---|
| json_decode(json字符串) | 将json格式的字符串转换为php的数组或者对象 |
| json_encode(关联数组) | 将php的数组转换为json字符串 |
关于json的操作
拿到数据之后，大部分情况下是一个装了很多数据的数组，里面是一个个对象
所以需要对数组进行循环遍历
通过for循环，拿到每一个对象，通过在循环中，拿到当前对象某个属性对应的值
data[i].src data[i]["src"]
例如：
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
var result = xhr.responseText;
// 通过操作json的方法获取到data数组
var data = JSON.parse(result);
var arr = [];
for(var i=0;i<data.length;i++){
var str = "<li>"
+ '<a href="#">'
+ '<img src="' + data[i].src + '" alt="">'
+ '<p>' + data[i].text + '</p>'
+ '</a>'
+ '</li>';
arr.push(str)
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = arr.join("");
}
}
后端处理php文件的代码
<?php
file_get_contents() //获取文件内容
echo file_get_contents("../data/nav.json");
?>
3.0 xml语法和文件操作
以前比较频繁的数据传输方式就是xml的文件格式，它是html的一个扩展
xml文件格式的创建
<?xml version="1.0" encoding="utf-8"?>
<!-- 上面这一句必须是整个xml文档的第一句，否则格式错误 -->
<root>
<!-- 标签名称 以字母和下划线开头，不能有空格，不能包含特殊字符，区分大小写 -->
<items>
<!-- 说明下面的内容需要描述为数组 -->
<item>
<!-- 描述数组中的具体的成员值 -->
<src>./images/nav_1.png</src>
<text>京东超市</text>
</item>
<item>
<!-- 描述数组中的具体的成员值 -->
<src>./images/nav_2.png</src>
<text>全球购物</text>
</item>
<item>
<!-- 描述数组中的具体的成员值 -->
<src>./images/nav_3.png</src>
<text>京东市场123</text>
</item>
</items>
</root>
xml文件的规则和特点
| 关于xml数据格式的规则 |
|---|
| 1，文件后缀名必须得为.xml格式 |
| 2，必须得在头部声明那样一句话，相当于doctype声明 |
| 3，内容都以双标签包裹，可以嵌套和并列，不能交叉 |
| 4，标签名称以字母和下划线开头，叫什么，多长的名称无所谓 |
关于xml的操作
前端获取xml文件的内容
在响应成功后，通过**responseXML（我们之前都是用responseText var result = xhr.responseXML;）**来接收当前的数据，会拿到一长串标签
此时可以使用js中选择器，选择对应的标签 xhr.responseXML.querySelector(“标签名称”)
如果获取到的是多个元素，则需要遍历，也是可以通过获取元素内的数据传递给其他标签
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
// responseText：接收普通字符串 responseXML：专门用来接收服务器返回的xml数据的
var result = xhr.responseXML;
// 将获取到的数据生成动态的页面结构
var items = result.querySelectorAll("item");
var arr = [];
for(var i=0;i<items.length;i++){
// 获取到标签内部的数据
var src = items[i].querySelector("src").innerHTML;
var text = items[i].querySelector("text").innerHTML;
var str = "<li>"
+ '<a href="#">'
+ '<img src="' + src + '" alt="">'
+ '<p>' + text + '</p>'
+ '</a>'
+ '</li>';
arr.push(str)
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = arr.join("");
}
}
后端php文件处理xml文件的请求
<?php
// 默认返回数据的类型
// header("Content-Type:text/html;charset=utf-8");
// 如果需要返回数据为xml,那么标准的响应头的写法应该是
header("Content-Type:application/xml;charset=utf-8");
echo file_get_contents("../data/nav.xml");
?>
4.0 改进和封装工具
封 装 的 目 的 是 为 了 方 便 更 高 效 的 使 用 ， 一 次 封 装 多 次 调 用 封装的目的是为了方便更高效的使用，一次封装多次调用 封装的目的是为了方便更高效的使用，一次封装多次调用
代码的封装
关于代码的封装，重点在于要知道怎么使用，具体的封装过程等到了一定的开发经验再把玩
var dilireba = {
// 将{"name":"jack","age":20} 的参数要转换为 ?name=jack&age=20
getpa:function(data){
if(data && typeof data == "object"){
var str = "?";
for(var key in data){
str = str + key + "=" + data[key] + "&";
}
str = str.substr(0,str.length-1);
/*substring 提取从 indexStart 到 indexEnd（不包括）之间的字符。特别地：
如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd，substring 提取字符一直到字符串末尾。
如果任一参数小于 0 或为 NaN，则被当作 0。
如果任一参数大于 stringName.length，则被当作 stringName.length。
如果 indexStart 大于 indexEnd，则 substring 的执行效果就像两个参数调换了一样。*/
}
return str;
},
ajax:function(option){
// 接收用户参数进行相应处理
var type = option.type || 'get';
// location.href 可以获取当前文件的路径
var url = option.url || location.href;
// 接收参数:在js中最方便收集的数据类型为对象，所以我们就规定传递的参数必须是对象
var data = this.getpa(option.data) || "";
// 响应成功之后的回调函数 => 这个函数一般就是处理字符拼接，标签渲染的函数
var success = option.success;
// 创建异步对象
var xhr = new XMLHttpRequest();
// 请求行 如果是get请求就需要拼接参数
if(type == "get"){
url += data;
data = null; // 拼接后设置data为null，在send()方法中就不会再次发送
}
xhr.open(type,url);
// 请求头 如果是post才需要请求头
if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
// 请求体
xhr.send(data);
// 让异步对象接收响应
xhr.onreadystatechange = function(){
// 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
if(xhr.status == 200 && xhr.readyState == 4){
// 接收响应的返回值 responseText responseXML
var rh = xhr.getResponseHeader("Content-Type");
if(rh.indexOf("xml") != -1){
// indexOf()指定值的第一次出现的索引; 如果没有找到 -1。 indexOf 方法区分大小写。例如，下面的表达式返回 -1：
var result = xhr.responseXML;
}
else if(rh.lastIndexOf("json") != -1){
// str.lastIndexOf(searchValue[, fromIndex])
// 方法返回指定值在调用该方法的字符串中最后出现的位置，如果没找到则返回 -1。从该字符串的后面向前查找，从 fromIndex 处开始。
var result = JSON.parse(xhr.responseText);
}else{
var result = xhr.responseText;
}
// 接收数据之后，调用回调函数
success && success(result)
}
}
},
}
封装代码的使用
dilireba.ajax({
type:'post',
url:'./server/nav-json.php',
data:{},
success: function (result){
var arr = [];
for(var i=0;i<data.length;i++){
var str = "<li>"
+ '<a href="#">'
+ '<img src="' + data[i].src + '" alt="">'
+ '<p>' + data[i].text + '</p>'
+ '</a>'
+ '</li>';
arr.push(str)
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = arr.join("");
}
});
day02
AJAX简要札记
1.0 jQuery中的ajax
如果对于上一次的封装还有一点点印象，那么对于jQuery中的ajax就能很快熟悉
只是关于jQuery中的ajax，功能更多，使用更加高效和频繁
关于使用jQuery中的ajax
如果要使用自己封装的函数，那么需要引入自己封装的ajaxTools.js文件
$.ajax({
type: 'post',
url: './server/nav-json.php',
data: {},
success: function (result){
var data = JSON.parse(result);
var arr = [];
for(var i=0;i<data.length;i++){
var str = "<li>"
+ '<a href="#">'
+ '<img src="' + data[i].src + '" alt="">'
+ '<p>' + data[i].text + '</p>'
+ '</a>'
+ '</li>';
arr.push(str)
}
// 将生成的页面结构添加到dom元素中
document.querySelector("ul").innerHTML = arr.join("");
}
});
有意思的是，如果将自己封装的文件，替换成jquery-1.12.2.min.js文件，发现没任何不妥
也就是说，jquery的使用方式跟上面是差不多的，只是jquery中，还可以在内部有更多的参数和功能，而如果在自己封装的文件上，加入再多的功能，对于难度上来讲是一个挑战，对于实际应用上来说没有必要
| $.ajax({这里传入一个字面量对象}) | 参数说明 |
|---|---|
| url | 接口地址 |
| type | 请求方式 |
| timeout | 请求超时，单位是毫秒 |
| dataType | 服务器返回的格式, json / xml / jsonp |
| data | 发送请求的数据 |
| beforeSend: fucntion() { …code } | 请求发起前的调用 |
| success: fucntion() { …code } | 成功响应后的调用 |
| error: fucntion() { …code } | 错误响应时的调用，e参数为报错信息 |
| complete: fucntion() { …code } | 响应完成时的调用 |
完整的jQuery调用
$.ajax({
type: 'post',
url: './server/nav-json.php',
data: {}, //请求需要传递的参数
// 设置请求超时:单位为毫秒，如果服务器的响应时间超过指定的时候，请求失败
timeout: 3000,
dataType:'json', // 设置响应数据的格式 xml json text html script jsonp
// 发送请求之前的回调 ：在这个回调中我们可以进行一些请求之前的相关操作：如验证
beforeSend:function(){
// 在这个回调函数中，如果return false,那么本次请求会中止
// return false;
},
success: function() {
//请求成功之后的回调
},
// 请求失败之后的回调
error:function(e){
if(e.statusText == "timeout"){
alert("请求超时，请重试");
}
},
// 无论请求是成功还是失败都会执行的回调
complete:function(){
console.log('实现一些全局成员的释放，或者页面状态的重置....');
}
});
jQuery中ajax的其他用法
$.get()的使用
本质上只能发送get请求
| $.get(url, data, success, datatype) | 说明 |
|---|---|
| url | 所请求的url |
| data | 请求所传递的数据 |
| success: function() { …code } | 成功之后的回调 |
| datatype: | 需要返回的数据类型 |
$.get("./server/nav-json.php", function() {
// 成功回调之后的函数
}, "json")
$.post()的使用
参数一致，用法一直，目的一致
代码略.
3.0 注册案例
跟着练习思考使用ajax解决问题的思路
案例的基本情况
准备1：获取验证码的getCode.php文件
/生成一个随机索引 array_rand（）:可以生成指定的数组长度内的索引/
sleep(2); // 程序中断两秒
<?php
$arr = array('12345','23456','34567','45678');
/*生成一个随机索引 array_rand:可以生成指定的数组长度内的索引*/
$index = array_rand($arr);
sleep(2);
echo $arr[$index];
?>
准备2：数据的data.json文件
[
{"name":"jack","pass":"rose","mobile":"12345678901"},
{"name":"rose","pass":"123","mobile":"12345678902"},
{"name":"tom","pass":"123","mobile":"12345678909"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"},
{"name":"lili","pass":"123","mobile":"1234"}
]
准备3：验证用户名是否存在的validataUsername.php文件
$_SERVER[‘REQUEST_METHOD’] 传递的方式
file_get_contents(） // 读取文件 得到的是一个字符集
file_put_contents(‘需要放入那个文件’,需要放入文件的数据);
json_decode（json字符串）// 将json 字符串转化为数组
json_encode（关联数组）// 将PHP数组转换为字符串
ＪＳＯＮ．ｐａｒｓｅ（ｊｓｏｎ字符串） 将ｊｓｏｎ字符串转换为数组 ｊｓ的方法
ＪＳＯＮ．ｓｔｒｉｎｇｉｆｙ（对象或者数组）将字面量对象或者数组转化为ｊｓｏｎ格式的字符串
<?php
if($_SERVER['REQUEST_METHOD'] == 'GET'){
/*1.读取文件*/
$dataStr = file_get_contents('data.json');
/*2.转换为数组，因为我们需要判断数组中的成员的name属性是否是指定的用户名--遍历*/
$dataArr = json_decode($dataStr);
/*3.遍历*/
／／ 在ＰＨＰ中 count（需要遍历的数组名称）方法就是用来得出数组成员个数的
for($i=0;$i<count($dataArr);$i++){
if($dataArr[$i] -> name == $_GET['name']){
$arr = array(
'code'=>0, //状态码
'msg'=>'用户名已存在' //状态信息
);
echo json_encode($arr);
return;
}
}
}
?>
准备4：收集用户数据，实现上传和写入
<?php
$name = $_POST['name'];
$pass = $_POST['pass'];
$mobile = $_POST['mobile'];
/*创建需要进行存储的当前用户注册对象*/
// array（）以字面量的方式来创建一个数组
$obj = array(
'name' => $name,
'pass' => $pass,
"mobile" => $mobile
);
重点！！！！！！！
/*php无法直接将一个数据存储到文件，它需要先将数据写入到数组，再将数组写入到文件*/
1.首先先把需要写入的文件读取出来存到一个变量里面
$arr = file_get_contents('data.json'); //字符串
2.接着把这个变量以PHP的方法转化为关系数组
$dataArr = json_decode($arr); //将json格式字符串转换为php数组
/*向数组中添加数据*/
3. 将这个关系数组的名字后面跟一个中括号 再把需要写入的数据赋值给它 就把数据存入了这个关系数组
$dataArr[] = $obj;
/*将数据写入到文件，写入到文件的数据只能是字符串*/
4.因为存入文件的数据只能是字符串，所以这里要把这个关系数组转化为字符串的格式
$resultStr = json_encode($dataArr); //将数组转换为json格式字符串
5. 把这个字符串存入咱们需要写入的文件
file_put_contents('data.json',$resultStr);
echo json_encode(array('code'=>1,"msg"=>'注册成功'));
?>
准备5：在前端页面引入jQuery文件
引入jQuery文件，创建开始任务的js标签
<script src="jquery-1.12.2.min.js" ></script>
<script>
// 1.0 获取验证码
// 2.0 完成验证操作
// 3.0 提交表单，进行上传操作
</script>
实现获取验证码
步骤1： 为按钮添加单击事件
步骤2：收集手机号，向服务器发送获取验证码的请求
步骤3：接收验证码，给出响应的提示信息
-
jQuery的方式给元素添加事件 : $("需要添加的元素名称").on("需要添加的事件类型（前面不带on）",function(){}); .hasClass("类名") // 判断这个元素有没有该类名 .addClass("类名") // 给这个元素添加类名 1. .values() 方法是获取一个对象的值 Object.values()返回一个数组，其元素是在对象上找到的可枚举属性值。属性的顺序与通过手动循环对象的属性值所给出的顺序相同。 var obj = { foo: 'bar', baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] // 数组跟对象一样 var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c'] 2. a.value; 可以获得a元素的value属性的值 任何标签都可以设置value属性 但是只有input button 等少数标签可以直接用这个方法来获取它的value值，其他的标签你想获取value属性的值只能用.getAttribute（"value"）来获取 **** 但是没有 .value(),这个方法 它不能支持设置元素的value属性的值 如果要设置 可以这样： a.value = "需要设置的value属性的值"; 3. .val()方法--->小括号中什么也不写,获取元素的value属性的值 注意 .val("内容");小括号中写内容就是设置元素的value属性 如果是复选框，value小括号里面有数值也可能是设置索引为这个值的那个复选框为选中状态 获取文本域中的内容用value会比较好 .text();如果小括号中写内容,就是设置文字内容相当于DOM中的innerText或者是textContent 如果.text();小括号什么也不写,表示的是获取这个元素中的文字内容 $("#dv").text("这是一个div");//设置 console.log($("#dv").text());//获取 .html();小括号中直接写标签的字符串内容,就是设置标签中间显示其他标签及内容,类似于innerHTML 小括号中什么也没有,表示的时候获取标签中的元素内容 a.test(b) // 判断b是否符合a 如果符合返回true .text() // 提示文本 Text() 构造方法返回一个最新创建的Text 对象，该对象带有可选参数 DOMString 作为文本节点的文本内容(textual content)。 text1 = new Text(); // 创建一个空的文本节点(text node),即它的textContent 为空字符 text2 = new Text("This is a text node");//该构造方法参数作为文本节点的textContent 的值。 ************* 总结 ：***************************************** 在jQuery 中 获取元素的value属性的值就用 .val() 这个方法 设置就在（）里面写入要设置的内容 设置标签之间的文本内容 就用 .text()方法 设置就在（）里面写入要设置的内容 $(".verify").on("click", function() { // 判断当前的请求是否正在进行 if($(this).hasClass("disabled")) { return; } var phone = $(".mobile").val(); // 发送请求 $.ajax({ type: "get", url: "./getCode.php", data: {"phone": phone}, beforeSend: function() { var reg = /^1\d{10}$/; // 在请求发送之前，进行验证手机号是否合法 if(!reg.test(phone)) { // 元素慢慢出来，提示完之后，再慢慢消失 $(".tips > p").fadeIn().delay(2000).fadeOut().text("请输入正确的手机号码!") } // 验证成功 则不可以再次点击 $(".verify").addClass("disabled"); var total = 5; var timerId = setInterval(function() { total--; $(".verify").val(total + "s之后重新获取") if(total <= 0) { $(".verify").val("重新获取").removeClass("disabled"); clearInterval(timerId) } }, 1000) }, success: function(res) { alert(res) } }) })
.test()详解
var str = "heima@itcast.cn";
// 使用正则的方式实现获取源字符串中的指定部分
// test():检测字符串是否与指定的正则表达式匹配，如果匹配则返回true,否则返回false。侧重于判断是否匹配
// exec():检测字符串是否与指定的正则表达式匹配，同时可以提取某些匹配的部分，侧重于匹配之后的提取
// 使用步骤：
// 1.创建一个符合源字符串规则的正则表达式
// 2.调用exec方法
// 3.实现返回值的接收--返回一个数组
// 4.如何实现提取：将你想提取的字符串的对应的正则表达式部分用()包含
var reg = /(\w+)[@]((\w+)[.](\w+))/;
var obj = reg.exec(str);
console.log(obj);
验证用户名是否存在
步骤1：添加事件，onblur
步骤2：收集用户数据，发送请求
步骤3：接收响应，给出提示
$(".name").on("blur", function() {
var name = $(this).val();
$.ajax({
type: "get",
url: "./server/validataUsername.php",
data: {"name":name},
dataType: "json", // 接收到的就是一个js的对象，不然就是一个字符串
success: function(res) {
// console.log(res)
if(res && res.code == 0) {
$(".tips > p").text(res.msg).fadeIn().delay(2000).fadeOut()
}
}
})
})
实现注册
步骤1：添加注册事件
步骤2：收集用户数据
步骤3：发起ajax请求
步骤4：接收响应，给出提示
.serialize(); 收集表单的数据
$(".submit").on("click", function() {
if($(this).hasClass("disabled")) {
return;
}
// 通过表单序列化的方式来收集用户数据
var data = $("#ajaxForm").serialize();
$.ajax({
type: "post",
url: "./server/register.php",
data: data,
dataType: "json",
beforeSend: function() {
// 用户输入合法的验证
// 如果验证通过，开启节流阀，避免重复提交
$(".submit").addClass("disabled").val("正在注册中");
},
success: function(res) {
if(res && res.code == 1) {
$(".tips > p").text(res.msg).fadeIn().delay(2000).fadeOut()
}
},
error: function() {
$(".tips > p").text("注册失败").fadeIn().delay(2000).fadeOut()
}, // 不管成功还是失败都会执行
complete: function() {
$(".submit").removeClass("disabled").val("注册");
}
})
})
在php文件最后加一句
echo json_encode(array('code'=>1, 'msg'=>'注册成功'));
| jquery的表单序列化方法 | |
|---|---|
| $("#ajaxForm").serialize(); | |
| 可以将表单中所有name属性的表单元素的值收集，生成key=value&key=value | |
| 在ajax中，支持两种格式的参数(1，对象，2，参数格式字符串) |
4.0 art-template模板引擎
音乐案例
渲染数据是开发中常见的活儿
准备工作
准备静态页面，准备json
[
{
"id": 1,
"title": "平凡之路",
"singer": "朴树",
"album": "平凡的生命",
"src": ".\/mp3\/zhangsan.mp3"
},
{
"id": 2,
"title": "为了遇见你",
"singer": "薜之谦",
"album": "为了遇见你",
"src": ".\/mp3\/See You Again.mp3"
},
{
"id": 3,
"title": "故乡",
"singer": "许巍",
"album": "许巍-作品全集",
"src": ".\/mp3\/See You Again.mp3"
}
]
步骤1：新建music.php
<?php
// 服务器读取json文件
echo file_get_contents("music.json");
?>
步骤2：前端功能
<script src="jquery-1.12.2.min.js"></script>
<script>
// 发送ajax请求
$.ajax({
url: "./music.php",
dataType: 'json',
success: function (result) {
var html = "";
// 生成动态页面结构
for (var i = 0; i < result.length; i++) {
html += '<tr>';
html += '<td>'+result[i].title+'</td>';
html += '<td>'+result[i].singer+'</td>';
html += '<td>'+result[i].album+'</td>';
html += '<td><audio src="'+result[i].src+'" controls></audio></td>';
html += '<td>';
html += '<a href="./edit.php?id='+result[i].id+'" class="btn btn-primary">编辑</a>';
html += '<a href="./delete.php?id='+result[i].id+'" class="btn btn-danger">删除</a>';
html += '</td>';
html += '</tr>';
}
$("tbody").html(html);
}
});
</script>
模板引擎介绍
有了模板引擎，再也不用那么复杂的去拼接字符串了
作用： 为了动态渲染的时候，简化拼接字符串
关键词语：创建模板标签、循环遍历、<% 逻辑语句 %>、<%= 输出语句 %>
5.0 模板引擎的2种语法
// 模板在哪里创建
// 1.不能将模板字符串内容直接添加页面结构中，因为它会被浏览器解析 渲染
// 2.也不能做成注释，因为我们后期需要获取到这个字符串值，做成注释就无法获取了
// 3.我们在script标签中创建
// 1.设置了text/template类型，浏览器不会进行解析
// 2.设置了id,方便后期的元素内容的获取。script本质上也是一个标签，所以可以通过dom的方式来获取里面的内容
// 模板如何创建
// 1.占位符可以采用<%=属性名称-值%>
// 2.占位符中的值的名称一定要参照数据的属性名称
原生语法
步骤1：引入文件
<script src="./js/template-native.js"></script>
步骤2：创建模板数据
<script type="text/template" id="navTemp">
<li>
<a href="#">
<img src="<%= src %>" alt="">
<p><%= text %></p>
</a>
</li>
</script>
步骤3：调用模板引擎
<script>
var obj = {
"src": "./images/nav-1.png",
"text": "京东超市"
}
// 调用函数 templete(模板id, 数据(对象)) 返回替换后的DOM结构
var html = template(navTemp, obj);
document.querySelector("ul").innerHTML = html;
</script>
// // 调用模板引擎中的函数，返回值为替换之后的动态结构
// // var html = template(模板id,数据(对象));
多个数据的数组动态生成
步骤1： 模板标签
<!-- 这里的item指的是将来传进来的对象的属性 -->
<script type="text/template" id="navTemp">
<% for(var i = 0; i < items.length; i++) { %>
<li>
<a href="#">
<img src="<%= items[i].src %>" alt="">
<p><%= items[i].text %></p>
</a>
</li>
<% } %>
</script>
如果是数组，那么在传入的时候需要包装为一个对象
// 如果数据是一个对象，就直接传入对象
// 如果数据是一个数组，就包装对对象再传递
// 因为在模板中只能使用当前传入的对象的属性，它会根据属性自动的去获取对应的值来使用
步骤2：调用模板
<script>
var arr = [
{
"src": "./images/nav-1.png",
"text": "京东超市"
},
{
"src": "./images/nav-2.png",
"text": "全球购物"
},
{
"src": "./images/nav-3.png",
"text": "京东市场"
}
]
// ！！！！！ 把数组转换为一个对象的方式
var html = template(navTemp, {"items": arr});
document.querySelector("ul").innerHTML = html;
</script>
标准语法
步骤1：引入插件
<script type="text/template" id="musicTemp">
// 循环语句
{{ each items as value index }}
<tr>
<td>{{ items[index].title }}</td>
<td>{{ value.singer }}</td>
<td>{{ value.album }}</td>
<td>
<audio src="{{ value.src }}" controls></audio>
</td>
<td>
<a href="./edit.php?id={{ value.id }}" class="btn btn-primary">编辑</a>
<a href="./edit.php?id={{ value.id }}" class="btn btn-danger">删除</a>
</td>
</tr>
{{ /each }}
</script>
步骤2：发送ajax请求
$.ajax({
url: "./music.php",
dataType: "json",
success: function(res) {
var html = temlpate("musicTemp", {"items": res});
$("tbody").html(html);
}
})
如果参数是对象，就直接传入对象，
如果参数是数组，就包装成对象
1.引入插件
<script src="template.js"></script>
2.逻辑表达式 ： {{ 与 }}符号包裹起来的语句则为模板的逻辑表达式
3.输出表达式： （编码可以防止数据中含有HTML字符串，避免引起xss攻击）
- 对内容编码输出：{{content}} （推荐）
- 不编码输出： {{#content}}
4.条件表达式：
{{if 条件}}
<p>内容</p>
{{else if 条件}}
<p>内容</p>
{{else}}
<p>内容</p>
{{/if}}
{{if index == 0}}
<tr bgcolor='red'>
{{else if index == 1}}
<tr bgcolor='green'>
{{else}}
<tr bgcolor='blue'>
{{/if}}
-
循环遍历表达式：无论数组或者对象都可以用each进行遍历
items 为需要遍历的数组（或对象名）名 value是值 index 是键
{{ each items as value index }} 把数组items以键值对的形式遍历 <li>{{index}}-{{value.user}}<li> {{/each}} 也可以简写为： {{each items}} <li>{{index}}-{{value.user}}<li> {{/each}}- 调用函数 templete(模板id, 数据(对象)) 返回替换后的DOM结构
例子：
{{items[index].title}} 等于 {{value.title}}
<script type="text/template" id="musicTemp">
{{each items as value index}}
{{if index == 0}}
<tr bgcolor='red'>
{{else if index == 1}}
<tr bgcolor='green'>
{{else}}
<tr bgcolor='blue'>
{{/if}}
<td>{{items[index].title}}</td>
<td>{{value.singer}}</td>
<td>{{value.album}}</td>
<td>
<audio src="{{value.src}}" controls></audio>
</td>
<td>
<a href="./edit.php?id={{value.id}}" class="btn btn-primary">编辑</a>
<a href="./delete.php?id={{value.id}}" class="btn btn-danger">删除</a>
</td>
</tr>
{{/each}}
</script>
<script src="./js/jquery.min.js"></script>
<script src="./js/template.js"></script>
<script>
// 发送ajax请求
$.ajax({
url: "./music.php",
dataType: 'json',
success: function (result) {
// 调用模板引擎动态生成页面结构
// 如果参数是对象是直接传入对象
// 如果参数是数组，就包装为对象
var html = template("musicTemp",{"items":result});
$("tbody").html(html);
}
});
</script>
day03
AJAX简要札记
1.0 跨域请求资源
JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。
当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
注意：跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致
| 说明 |
|---|
| 第一：如果是协议和端口造成的跨域问题“前端”是无能为力的 |
| 第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” |
域名为IP地址的别名 IP地址唯一 ，一个IP地址可能有多个域名
所有跨域都必须经信息提供方允许, 如果未经允许即可获取, 那是浏览器同源策略出现漏洞
实现跨域
这种实现方式较少设置，一来服务器端不归前端处理，二来这种限制浏览器版本
服务器端设置CORS跨域
<?php
// 设置跨域请求
header("Access-Control-Allow-Origin:*"); // * 允许代表所有域来请求
header("Access-Control-Allow-Origin:http://day09.com");
echo file_get_contens("nav.json");
?>
2.0 jsonp的实现原理
开发中常用jQuery的jsonp方式来解决跨域问题
通过jQuery实现jsonp的调用
步骤其实很简单，核心的代码没几句
步骤1： 发送请求的时候设置dataType类型
$.ajax({
type: "get",
url: "http://day8.com/getnav.php",
dataType: "jsonp",
success: function(res) {
var html = template("navTemp", {"items": res})
document.querySelector("ul").innerHTML = html
}
})
步骤2：查看jsonp请求
拿到了数据，但是由于没有调用，所以渲染不成功
步骤3：服务器端的配合
<?php
//接收客户端请求时传递过来的函数名称
$callback = $_GET["callback"];
// 读取数据 把它存到变量中
$data = file_get_contens("nav.json");
// 后台在拼接字符串 返回调用函数的形式，只不过要传递前端需要的数据
echo $callback."('.$data.')"; // acb($data)
?>
jsonp实现原理
页面中有几个标签允许跨域请求资源 a链接的href 、 img的src 、link的href 、script的src
在php文件中模拟返回数据
<?php
// echo "abc"; 去往js后由于未定义会报错
// echo "alert(123)"; // 以下的形式，符合js的语法
$callback = $_GET["callback"];
echo $callback."()";
?>
在前端接收数据
<script>
function test() {
console.log(123)
}
</script>
<!-- 通过本能的跨域执行请求，后面拼接一个回调函数 -->
<script src="corss.php?callback=test"></script>
完整实现
通过前后端整体实现
后端进行拼接
<?php
$callback = $_GET["callback"];
$arr = array(
"name" => "jack",
"age" => 20
);
// $data = json_encode($arr);
$data = file_get_contents("nav.json");
// 返回的数据最终只能是字符串
echo $callback."(".$data.")";
?>
前端进行请求和函数的调用
<script>
// 接收数据
function test(data) {
console.log(123)
}
</script>
<!-- 通过本能的跨域执行请求，后面拼接一个回调函数 -->
<script src="corss.php?callback=test"></script>
// 1.主要是利用了script标签的天然的跨域特性来发送请求
// 2.它的实现方式：在发送请求的时候传递一个函数名称给后台，后台返回数据的时候会返回这个函数的调用形式，并且在()中拼接参数
// 3.ajax和jsonp的本质不一样。ajax的核心是通过XMLHttpRequest来发送请求，而jsonp是通过script标签来实现请求的发送
3.0 jsonp的案例
以后的工作模式中会大量使用到jsonp跨域请求资源
接口化开发
在近几年的网站开发中，越来越成熟的表现出前后端分离，也就是说前端开发人员需要了解后端的需求，但并不需要操作后端的逻辑，因为后端有其自己的框架和一套熟练的规范
而后端做好了个各种的数据搭建之后，会针对性的给出一些接口通常叫做接口文档，里面会详细的描述了该请求的方式，请求的地址，所传的参数，参数的重要性 …
所以前端大部分做的事件，就是根据写好的开发文档，按需接收数据，然后通过模板技术动态生成页面
接口文档
开放的api接口
在线上也有一些开放的接口文档可以被拿来当前的网页使用，在使用的时候，也需要按照文档的提示
获取天气案例
使用jsonp方式获取其他平台提供的信息
引入文件，调用方法
<script src="./js/jquery.min.js"></script>
<script src="./js/template-native.js"></script>
<script>
$.ajax({
type:'post',
url:"http://api.map.baidu.com/telematics/v3/weather",
data:{
"ak":"zVo5SStav7IUiVON0kuCogecm87lonOj",
"location":"北京",
"output":'json'
},
dataType:'jsonp',
// jsonpCallback:function(){}
success:function(result){
console.log(result);
var html = template("weatherTemp",{"items":result.results[0].weather_data});
document.querySelector("tbody").innerHTML = html;
}
});
</script>
创建模板，渲染数据
<script type="text/template" id="weatherTemp">
<% for(var i=0;i<items.length;i++){ %>
<tr>
<td><%=items[i].date%></td>
<td><img src="<%=items[i].dayPictureUrl%>" alt=""></td>
<td><img src="<%=items[i].nightPictureUrl%>" alt=""></td>
<td><%=items[i].temperature%></td>
<td><%=items[i].weather%></td>
<td><%=items[i].wind%></td>
</tr>
<% }%>
</script>
4.0 XMLHttpRequest2.0-formdata
timeout
timeout代表延迟，可以当作属性设置延迟，单位为毫秒，也可以作为事件
document.querySelector("button").onclick = function(){
var xhr = new XMLHttpRequest();
// 设置请求行
xhr.open("get","01-timeout.php");
// 设置请求头:get不需要设置
// 设置请求体
xhr.send(null);
// 设置超时
xhr.timeout = 2000;
xhr.ontimeout = function(e){
console.log(e);
}
// 接收响应
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
alert(xhr.responseText);
}
}
}
FromData(form表单)
正常的post请求
form内表单元素的name属性是必须的，但是不需要再一个个获取了
注意使用的方式和细节
<script>
document.querySelector("#sub").onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("post","02-formData.php");
// 1.手动拼接
// 2.如果是jq,那么就可以使用表单序列化方法
// 3.现在在XMLHttpRequest2.0 ,我们可以使用FormData来收集表单数据
// 1.获取表单
var myform = document.querySelector("#form1");
// 2.将表单做为参数传递，在创建formData对象的时候
var formdata = new FormData(myform);
// 特点之一：可以自由的追加参数
formdata.append("address","传智播客");
// 3.生成的formData对象就可以直接做为异步对象的参数传递
xhr.send(formdata);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
</script>
上传文件的post请求
!!! 注意，这里设置了请求头的话，数据无法传递
<script>
document.querySelector("#sub").onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("post","03-uploadFile.php");
//如果设置了请求头，那么文件数据无法正确的传递 因为系统会默认设置一个请求头
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var myform = document.querySelector("#form1");
var formData = new FormData(myform);
xhr.send(formData);
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
</script>
onprogress事件的用法 监听文件上传的进度
！！！！__这段代码一定要在send方法之前__也就是在发送完成之前监听
// 监听文件上传的进度:这个监听必须在send之前来设置
xhr.upload.onprogress = function(e){
var current = e.loaded;//上传了多少
var total = e.total;//总共
var percent = current / total * 100 +"%";
document.querySelector(".in").style.width = percent;
document.querySelector("span").innerHTML = Math.floor(current / total * 100)+"%";
}
5.0 学生管理系统
初步体验以接口为开发流程的步骤
建立项目
打开服务器，打开数据库，找到demo文件夹中的test.sql
连接数据库，执行sql文件
查询sql文件中的语句
由于源文件有一些问题，所以只需要执行内部的一段语句即可
DROP TABLE IF EXISTS `teacher`;
CREATE TABLE `teacher` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(500) DEFAULT NULL,
`password` varchar(500) DEFAULT NULL,
`name` varchar(500) DEFAULT NULL,
`school` varchar(50) DEFAULT NULL,
`age` int(11) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=85 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Records of teacher
-- ----------------------------
INSERT INTO `teacher` VALUES ('1', 'jack', '123', '杰克', '传智播客', '19');
INSERT INTO `teacher` VALUES ('2', 'rose', '321', '罗丝', '黑马程序员', '19');
INSERT INTO `teacher` VALUES ('3', 'tom', '123', '汤姆', '传智播客', '19');
INSERT INTO `teacher` VALUES ('4', '张三', '321', '三哥', '黑马程序员', '19');
INSERT INTO `teacher` VALUES ('5', 'mary', '123456', '玛丽', '黑马程序员', '20');
INSERT INTO `teacher` VALUES ('6', 'tark', '123', '坦克', '传智学院', '20');
刷新数据库
请求数据渲染页面
<script src="../lib/js/jquery-1.12.4.js"></script>
<!--引入模板引擎js文件-->
<script src="../lib/js/template-native.js"></scrip
<script>
$.ajax({
type:'get',
url:'findUsers.php',
data:{
pageNum:cpage || 1,
pageSize:pageSize || 2
},
dataType:"json",
success:function(result){
console.log(result);
// 渲染数据列表
var html = template("stuListTemp",result);
$("tbody").html(html);
}
});
</script>
创建数据模板
<!-- 首页动态数据列表的模板 -->
<script type="text/template" id="stuListTemp">
<% for(var i=0;i<list.length;i++){%>
<tr>
<td><%= (pageNum - 1) * pageSize + i + 1 %></td>
<td><%=list[i].name%></td>
<td><%=list[i].age%></td>
<td><%=list[i].username%></td>
<td><%=list[i].school%></td>
<td><a href="javascript:;" data-id="<%=list[i].id%>" class="delete" title="删除"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr>
<% }%>
</script>
封装渲染的请求
// 动态展示首页数据
function render(cpage,pageSize){
$.ajax({
type:'get',
url:'findUsers.php',
data:{
pageNum:cpage || 1,
pageSize:pageSize || 2
},
dataType:"json",
success:function(result){
console.log(result);
// 渲染数据列表
var html = template("stuListTemp",result);
$("tbody").html(html);
}
});
}
render();
点击按钮增加数据
// 实现新增操作
$("#save").on("click",function(){
$.ajax({
type:'post',
url:'saveUser.php',
data:$("#newUser").serialize(),
dataType:'json',
beforeSend:function(){},
success:function(result){
console.log(result);
if(result.status == "ok"){
alert('新增成功');
render();
}
}
});
});
点击按钮删除数据
// 实现删除功能
$("tbody").on("click",".delete",function(){
// 底部用户是否真的需要删除
if(window.confirm('请问是否真的需要删除?')){
var id = $(this).attr("data-id");
$.ajax({
type:'post',
url:'removeUser.php',
data:{"id":id},
dataType:'json',
success:function(result){
if(result.status == "ok"){
alert('删除成功')
render();
}
}
});
}
});
253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
