JQUERY中的Ajax:
工作中一般使用jquery封装ajax。
jquery中的Ajax方法:
get方法:
语法:
$.get(url,callback);
$.get(url,{"k":v,"k":"v"},callback);
$.get("url?id=4&name=XXX",callback);
Jquery的Ajax底层做了一些事情:
1.encodeingURIComponent() get请求处理中文
2.假如请求的文件不存在,是404等错误状态,不会执行回调函数。
3.jquery会识别传回来的数据,帮我们转成JSON。
get请求的实现,如:
$.get("1.json",{"id":4,"name":"wangwu"},function(data){
console.log(data);
});
$.get("1.json?id=4&name=XXX",function(data){
console.log(data);
});
post方法:
语法:
$.post(url,{"k":v,"k":"v"},callback);
post方法的实现,如:
$.post("1.json", {"id": 5,"name":"lucy"}, function(data, textStatus, xhr) {
console.log(data);
});
ajax方法:既能写get,又能写post,ajax方法的实现:
$.ajax("1.json",{
"type":"get",
"data":{//传到服务器上的数据
"name":"xiaohong",
"age":22
},
"success":function(data){
console.log(data);
},
"error":function(XMLHttpRequest,textStatus,errorThrow){
console.log(errorThrow);
}
});
JQuery表单的序列化:
jQuery表单的序列化非常简单,只需调用jQuery的serialize()方法即可。如:
<form id="biaodan">
<p>
<label>请输入姓名:<input type="text" name="username"></label>
</p>
<p><label>请输入密码:<input type="password" name="psw"></label></p>
<p>
<label>请选择你的性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
</label>
</p>
<p>
<label>请选择你的性别:
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="打豆豆">打豆豆
<input type="checkbox" name="hobby" value="编程">编程
</label>
</p>
<p>
<label>请选择你所在身份
<select name="prov" id="prov">
<option value="江苏">江苏</option>
<option value="广东">广东</option>
<option value="湖南">湖南</option>
</select>
</label>
</p>
<p>
<label>
请谈谈你的建议<input type="textarea" name="message" cols="30" row="10">
</label>
</p>
<p>
<input type="button" name="" value="点击提交" id="btn"/>
</p>
</form>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$("#btn").click(function() {
//jq的表单序列化,只能是表单调用serialize()方法
var str=$("#biaodan").serialize();
console.log(str);
$.get("check.php?"+str,function(data){});
});
</script>
ajax的缓存问题:
ajax存在严重缓存吧,假如发两次get请求,都是往一个url,并且携带的参数一样吧,即使服务器返回的是200状态码,也会被当304那样的缓存。
注意:有的把浏览器默认处理了缓存,有的浏览器没有做不缓存处理。
解决方案:---宗旨:只要更改参数,就不会有缓存。
解决方法1:利用随机数:在url后加个随机数,如:"url?x="+Math.random()
$.ajax("1.json?x="+Math.random(),{//在URL的key后面加个随机数
"type":"get",
"data":{//传到服务器上的数据
"name":"xiaohong",
"age":22
},
"success":function(data){
console.log(data);
},
"error":function(XMLHttpRequest,textStatus,errorThrow){
console.log(errorThrow);
}
});
解决方法2:利用时间戳:ajax方法的第一个参数:"1.json?t="+Date.parse(new Date())
Data new Data()--->生成系统时间
Data.parse(new Data());//把日期生成时间戳
$.ajax("1.json?t="+Date.parse(new Date()),{//利用时间截
"type":"get",
"data":{//传到服务器上的数据
"name":"xiaohong",
"age":22
},
"success":function(data){
console.log(data);
},
"error":function(XMLHttpRequest,textStatus,errorThrow){
console.log(errorThrow);
}
});
模板引擎原理:
模板的出现就是解决拼接字符串很繁琐,容易出错的问题。
模板引擎:在完整的字符串中,用特殊语法表示未定的量。
如:var str="今天是个@rizi@的日子,我的心情非常@mood@";
@rizi@、@mood@都是模板引擎。
模板引擎有3种写法:
第一种:
//模板写法一
$("#btn").click(function() {
$.post("1.json", {"id": 5,"name":"lucy"}, function(data, textStatus, xhr) {
// console.log(data);
for(var i=0;i<data.content.length;i++){
var $li=$("<li></li>");//创建一个模板
$li.html(data.content[i].name);//通过html的形式写入
$("ul").append($li);
}
});
});
第二种:
//模板写法二
var str="今天是个@rizi@的日子,我的心情非常@mood@";//建立模板字符
// 数据字典---到时使用服务器的数据
var dictionary={
"rizi":"伟大",
"mood":"激动"
}
//模板字符和数据字典建立连接,把数据字典的值替代模板字符
function compile(templateString,dictionaryObj){
return templateString.replace(/\@([a-z]+)\@/g,function(match,$1,index,string){
return dictionaryObj[$1];
});
}
str=compile(str,dictionary);
document.getElementsByTagName("h1")[0].innerHTML=str;
第三种:使用<script type="text/template" id="template"></script>的写法
//模板写法三
<table id="tb">
<tr>
<td>学号</td>
<td>姓名</td>
<td>年龄</td>
<td>成绩</td>
</tr>
</table>
<script type="text/template" id="template">
<!-- 故意写错type类型。工程上一般把模板放在这里 -->
//建立模板
<tr><td>@xuehao@</td><td>@name@</td><td>@age@</td><td>@score@</td></tr>
</script>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
// var str="<tr><td>@xuehao@</td><td>@name@</td><td>@age@</td><td>@score@</td></tr>";
var str=$("#template").html();
//拿到服务器数据---使用服务器的数据党数据字典
$.get("a.json",function(data){
for(var i=0;i<=data.students.length;i++){
var student=data.students[i];
// console.log(student);
var DOMString=compile(str,student);
//把DOMString追加到表格末尾
$("#tb").append(DOMString);
}
});
function compile(templateString,dictionaryObj){
return templateString.replace(/\@([a-z]+)\@/g,function(match,$1,index,string){
return dictionaryObj[$1];
});
}
</script>