总结：Ajax(二)

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>