持续上文的 ajax 学习, 说一说一些点.
调试
上次说了编写 ajax 对根本的四步, 那么会写就要会调试.
调试办法有三种:
1)debugger
再 JS 函数第一行写上 debugger, 而后关上浏览器 F12 开发者模式 sources 就能够进行调试了.
次要会用到以上四个按键, 别离是: 开始暂停 (以后断点完结进入下一断电), 单步调试, 进入办法, 出办法
状态值会在 0 - 4 发生变化.
2)console.log()
这就是打桩办法, 等同于 java 中的 system.out.println.
3)排除法
能够逐渐排除, 没有问题的能够先删掉或剪切, 之后再撤销即可.
POST 提交
上次仅仅说了 GET 提交, 这次说一下 POST 提交:
//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){document.getElementById("result").innerHTML=xhr.responseText;
}
};
//3. 关上链接
var name=document.forms[0].name.value;
xhr.open("POST","/doSave",true);
//post 申请要设置申请头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4. 发送申请
xhr.send("name="+name);//Post 申请 send 办法传值 步骤都根本和 GET 提交雷同, 次要说一下与 GET 提交的不同点:
1)POST 须要写一个申请头:
//post 申请要设置申请头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");这是规定, 再 open()办法之后 send()办法之前写, 固定就是这个格局, 必须要写, 咱们只须要恪守不要忘写即可.
2)POST 不是在 url 地址后通过 ”?” 连贯数据进行传值, 再 open 办法中第二个参数只写 url 地址即可.
3)POST 在 send 办法中传值
说几个客户端界面罕用的办法,onclick 点击事件,onfocus 失去焦点事件,onblur 失去焦点事件
onclick 罕用不多说
onfocus 失去焦点是指, 鼠标从新点击了设置办法的中央
onblur 失去焦点就是指, 鼠标从设置办法的中央移开点击了别的中央
Ajax 封装
大家都会发现,Ajax 的几个步骤和 JDBC 一样都是几步固定且反复, 每次都写很浪费时间, 所以咱们能够将其封装起来.
封装次要是要将其共性封装 / 个性提取, 以此晋升代码的可重用性.
/Ajax Post 申请的封装
function doAjaxPost(url,params,callback){
//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);
}
};
//3. 关上链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST",url,true);
//post 申请要设置申请头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4. 发送申请
xhr.send(params);//Post 申请 send 办法传值
}
// 定义一个函数这个函数次要用于发送 Ajax GET 申请, 目标封装共性, 提取个性, 以实现代码的可重用性
function doAjaxGet(url,params,callback){
//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);// 解决服务端响应的后果数据
}
};
//3. 关上链接
xhr.open("GET",url+"?"+params,true);
//4. 发送申请
xhr.send(null);//Get 申请 send 办法传值
}以上代码是 GET/POST 提交的别离封装, 将他们共性的步骤进行封装, 把个性的 url 地址, 传入参数 params, 回调函数 callback 作为参数进行提取.
而后咱们能够将共性封装到一个.js 文件中, 在 html 页面能够通过 script 标签的 src 属性引入该 js 文件, 就能够在 html 中间接应用了.
jQuery 中的 ajax
次要说四个办法:
// 向服务端发送 Ajax Get 申请
function doGet(){
//1. 定义申请 url
var url="doAjaxGet";
//2. 定义申请参数
var params="msg=hello jquery ajax get";
//3. 发送申请 Get 异步
// 这里的 $ 符号为 jquery 中的一个对象
//get(url[,params][,callback])为 jquery 中的一个 ajax 函数
$.get(url,params,function(result){//document.getElementById("result").innerHTML=result;
$("#result").html(result);
})
}
// 向服务端发送 Ajax Post 申请
function doPost(){
//1. 定义申请 url
var url="doAjaxPost";
//2. 定义申请参数
var params="msg=hello jquery ajax post";
//3. 发送申请 Get 异步
// 这里的 $ 符号为 jquery 中的一个对象
//post(url[,params][,callback])为 jquery 中的一个 ajax 函数
$.post(url,params,function(result){//post 申请用于向服务端提交数据
//document.getElementById("result").innerHTML=result;
$("#result").html(result);
})
}
// 向服务端发送 Ajax Post 申请
function doAjax(){
//1. 定义申请 url
var url="doAjaxGet";
//2. 定义申请参数
var params="msg=hello jquery ajax post";
//3. 发送申请 Get 异步
// 这里的 $ 符号为 jquery 中的一个对象
$.ajax({type:"Get",// 示意 get 申请(默认为 get)
url:url,//":" 右边的内容为语法定义, 咱们不能批改;":" 左边为咱们本人定义
data:params,
acync:true,//true 示意异步
success:function(result){// 回调函数
$("#result").html(result);
}
});
}
function doLoad(){
//1. 定义申请 url
var url="doAjaxGet";
//2. 定义申请参数
var params="msg=hello jquery ajax post";
//3. 发送申请 Get 异步
// 在指定地位异步加载 url 对象的资源
// 在以后利用中示意把 url 对象的资源出现到 #result 地位
$("#result").load(url,params,function(){console.log("load complete");
});
}对于 jquery 中的 ajax 无关的办法打击都能够在官网中进行查阅.
JSON
JSON 是一种数据格式
var jsonObj={id:100,title:"ta"};//JSON 格局的 JS 对象
jsonObj.id// 拜访 json 格局的 js 对象中的数据
var jsonStr=JSON.Stringify(jsonObj);// 将 JSON 格局的 js 对象转换为 JSON 格局的字符串
jsonObj=JSON.parse(jsonStr);// 将 JSON 格局的字符串转换为 JSON 格局的对象在我的项目中用 Ajax
须要先援用 ajax 的共性步骤:
(function(){var ajax=function(){};
ajax.prototype={doAjaxGet:function(url,params,callback){
//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);// 解决服务端响应的后果数据
}
};
//3. 关上链接
xhr.open("GET",url+"?"+params,true);
//4. 发送申请
xhr.send(null);//Get 申请 send 办法传值
},
doAjaxPost:function(url,params,callback){
//1. 创立 XHR 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听
xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200){callback(xhr.responseText);
}
};
//3. 关上链接
//var name=document.getElementById("nameId").value;
var name=document.forms[0].name.value;
xhr.open("POST",url,true);
//post 申请要设置申请头(规定)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4. 发送申请
xhr.send(params);//Post 申请 send 办法传值
}
}
// 将咱们构建的对象通过一个全局变量来指向它
window.Ajax=new ajax();})();// 函数自调用 () 基于此形式来避免 js 的净化事件. 放在函数中从全局变量 --> 局部变量而后再 html 引入该 js 文件.
应用 ajax 时咱们会把页面和数据别离返回, 当返回数据时, 当后端办法返回值为一个或多个 pojo 对象(也可能是 map),springmvc 还会检测办法上是否有 @ResponseBody 注解, 若有 springmvc 会将返回的对象转换成 json 格局的字符串.
如果有日期类型的值返回, 能够在返回数据类型的 pojo 类中对应的属性上加上 @JsonFormat(pattern = “yyyy/MM/dd HH:mm:ss”)注解来指定日期工夫类型数据的格局.
JS 中的 ${}表达式:
在 ajax 中要拿到多条返回的数据, 是由数组模式传回来的, 就须要遍历数组, 再将其拼接成一条一条数据:
(function(){
var url="/activity/doFindActivitys";
// 启动 ajax 技术, 基于 get 申请形式获取服务端 json 数据
$.getJSON(url,function(result){//getJSON 函数默认会将服务器返回的 json 串转换成 js 对象
var tbody=$("#tbodyId");
tbody.empty();// 清空原有 body 内容
for(var i=0;i<result.length;i++){// 循环一次, 迭代一行
// 构建以后行对象
var tr=`<tr>
<td>${result[i].title}</td>
<td>${result[i].category}</td>
<td>${result[i].startTime}</td>
<td>${result[i].endTime}</td>
<td>${result[i].state==1?'无效':'有效'}</td>
<td><button type='button' class='btn btn-danger btn-sm'>delete</button></td>
</tr>`
// 将每一行的内容都加到 tbody 中
tbody.append(tr);
}
}/* ,"json" */);
})();上述代码中就用到了 ${}来获取变量的值, 利用在 “ 符号的外部, 用来代替传统的 ”” 字符串拼接, 能够缩小字符串拼接所占用的内存.