持续上文的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" */);
})();上述代码中就用到了 ${}来获取变量的值,利用在“符号的外部,用来代替传统的””字符串拼接,能够缩小字符串拼接所占用的内存.
发表回复