jQueryAjax学习笔记

一：JqueryAjax导入

第一步：

找到需要的jquery版本然后复制网页内容，在本地新建文本文档把内容粘贴到文档中，然后把文件后缀更改为js。

第二步：

新建一个文件夹命名为js然后把 “.js” 文件移到js文件夹中，并把js文件复制到web项目的webcontent下。

第三步：

新建一个jsp文件，然后通过命令导入jquery
<script type="text/javascript" src="<%=request.getContextPath()%>js文件的路径"></script>

可以通过页面就绪函数来测试jquery是否成功导入。
<script type="text/javascript">
	/**页面就绪函数页面加载时自动执行*/
	$(function(){
		alert("11");
	})

</script>

二：JqueryAjax三种请求方式使用

(导入了ajax之后$=jQuery)

1：GET请求

$.get(url,[data],[callback],[type])
$.get(“请求地址”,{“请求参数一般以json格式传输”},“回调函数”,“返回数据类型”);
例如：

没有参数所以不用填参数。
<script type="text/javascript" src="<%=request.getContextPath()%>/js/Jquery.js">
<script type="text/javascript">

	function showMsg(){
		setInterval(sendRequest,1000);
	}

	function sendRequest(){
		$.get("hello.do",function(data){
			document.getElementById("msg0").innerHTML =data;
			document.getElementById("msg0").style.color="red";
		},"text")
	}


</script>

2：POST请求

$.post(url,[data],[callback],[type])
$.post(“请求地址”,{“请求参数一般以json格式传输”},“回调函数”,“返回数据类型”);
例如：

<script type="text/javascript" src="<%=request.getContextPath()%>/js/Jquery.js">
<script type="text/javascript">
function showTable(){
		document.getElementById("tb").innerHTML ="数据加载中";
		$.post("list.do",function(data){
			//返回类型为json  后台穿的是json字符串，前台自动帮你转换成json对象
			for (var i in data) {
				var row = document.getElementById("tb").insertRow(i);
				row.insertCell(0).innerHTML = data[i].id;
				row.insertCell(1).innerHTML = data[i].name;
			}
		},"json")
</script>

3：AJAX请求(既能实现get请求也能实现post请求)

$.ajax({url："请求地址"，
	 	type："设置请求类型"，
		async:"设置同步异步"，
		data："{数据}"，
		dataType：“返回数据类型”，
		success:function(){"成功回调函数"}，
		error:function{"失败回调函数"})

例如：

<script type="text/javascript" src="<%=request.getContextPath()%>/js/Jquery.js">
<script type="text/javascript">
function showTable(){
		$.ajax({
			url:"list.do",
			type:"get",					//请求类型get 或 post
			async:true,					//默认为true 异步  如果fals同步
			//data:{},					//发送的数据如果没有删除
			dataType:"json",			//服务器返回的数据类型
			success:function(data){		//成功回调函数
				for (var i in data) {
					var row = document.getElementById("tb").insertRow(i);
					row.insertCell(0).innerHTML = data[i].id;
					row.insertCell(1).innerHTML = data[i].name;
				}
			},
			error:function(){			//失败回调函数
				alert("服务器异常");	
			}	
		})	
	}
</script>