JQuery整合Ajax的方式及应用

最新推荐文章于 2022-06-15 15:29:57 发布

宇宙第一帅

最新推荐文章于 2022-06-15 15:29:57 发布

阅读量909

点赞数

本文链接：https://blog.csdn.net/MyCodeDream/article/details/44622809

版权

PHP 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

JQuery

13 篇文章 0 订阅

订阅专栏

Ajax

8 篇文章 0 订阅

订阅专栏

JQuery作为一个JavaScript的一个类库，不仅体积小，而且强大，这在之前的所有测试中都是知道的，而Ajax这一个技术又是在提高用户的体验方面是必不可少的，以前，我们都知道，用JavaScript纯粹的手写Ajax的复杂度相对是很大的，要建立Ajax对象，定义发送方式，确定回调函数，输送数据，服务器返回给Ajax，Ajax再应用到当前页面，只是说一下流程，感觉就很麻烦，但是，但我用JQuery的方法去实现Ajax的时候，发现是那么的简单，前提是一定要有Ajax的手写基础才行，之前要用很多的方法才能实现，而现在，仅仅只用Load(),这一个方法就能很简单就的实现，尽管在理解上并没有多大的改善，但是在代码的复杂度上面大大的减少了，我觉得这样更有利于代码的维护，其次，我个人认为，还是一定要对Ajax的内部机制一定要了解，能用原生的JavaScript写出Ajax的代码，然后再去学习JQuery的方法，这样应该会对自己有很大的帮助。下面是我在编程的过中代码的测试实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Jquery整合Ajax</title>
	<style type="text/css">
		#div_1{
			width: 200px;
			height: 200px;
			background-color: red;
		}
		#div_2{
			width: 200px;
			height: 200px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript" src="./file/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#sub").click(function() {
				/*这是LOAD的GET方式提交*/
				/*  $("#div_1").load("Loadprocess.php?"+"usename="+$("#usename").val(),null,function(data,textStatus,xmlHttpRequest){
				  		//这测试这里的时候出现了一个严重的错误，就是取到的usename没有加val();
				  		//回调函数的参数是从服务器会送的数据，数据，状态（4个） Ajax对象
				  		//alert("服务器"+data);
				  		//$(this).test(data);
				  });//有数据以post提交，否则以get提交
				*/
				var send_data={"usename":$("#usename").val(),'age':'18'};
				/*由上面也可以知道，虽然JSON严谨但是可以允许这种书写形式的*/
				//alert(send_data);//这里发送的数据不是串，而是两个对象
				$("#div_1").load("Loadprocess.php",send_data,function(data,textStatus,xmlHttpRequest){
					var obj=eval("("+data+")");//如果是json数据，需要进行转化
				//	$(this).test(data);
					$(this).text(obj.res);
				});
				//从这里可以看到，的页面上面部分可以是多个的。
				$("#div_2").load("Loadprocess.php",send_data,function(data,textStatus,xmlHttpRequest){
					var obj=eval("("+data+")");
					$(this).text(obj.res);
				});
			});
		});
	</script>
</head>
<body>
	<form>
		<input type="text" name="usename" id="usename"><br/>
		<input type"password" name="password" id="password"><br/>
		<input type="button" value="提交" id="sub">
	</form>
	<div id="div_1"></div>
	<div id="div_2"></div>
</body>
</html>

宇宙第一帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery整合Ajax的方式及应用

JQuery作为一个JavaScript的一个类库，不仅体积小，而且强大，这在之前的所有测试中都是知道的，而Ajax这一个技术又是在提高用户的体验方面是必不可少的，以前，我们都知道，用JavaScript纯粹的手写Ajax的复杂度相对是很大的，要建立Ajax对象，定义发送方式，确定回调函数，输送数据，服务器返回给Ajax，Ajax再应用到当前页面，只是说一下流程，感觉就很麻烦，但是，但我用JQue
复制链接

扫一扫

专栏目录