Jquery实现基础Ajax

首先,个人可以在本地搭建服务器环境,就是像在本地搭建网站前的第一个工作,基于php+mysql集成包有phpnow,wampserver等;
其次,有个编辑器吧,sublime,notepad,editplus,dreamweaver等等都可以;
然后,百度一下Jquery,去官网下载个Jquery库就ok了,然后放在同目录下调试就会相对方便;
学Jquery的好处,代码简洁易用,做SEO的绝对够用了,非得用Javascript也只是重复机械性工作罢了(知乎上面的大神说的);
Jquery各式各样的选择器,几乎就跟CSS的用法一模一样,用过都说好.
下面是Jquery实现ajax最简单的代码,具体html放的地方可以百度解决,只为记录学习的点滴,蔸雨seo博客原创,未经允许不得转载!

一、简单请求url地址,load()方法:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
	<style type="text/css">
		.load{width:600px; height: 600px; border: 1px solid #abcdef;}
	</style>
	<script src='jquery.js' type="text/javascript"></script>         <!--引入Jquery库-->
</head>
<body>
	<input type="button" value="加载"/>
	<div class="loading"></div>
	<script>
		$('input[type=button]').click(function(){
			$('.loading').load('06-ajax.txt?data='+Math.random());    //Math.random()解决浏览器缓存问题,06-ajax的txt文件随便写点什么就OK,使用的是load方法
		});
	</script>
</body>
</html>

二、实现和ajax交互,不但请求数据,并接受数据:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax-html</title>
	<script src="jquery.js" type="text/javascript"></script>
	<style type="text/css">
		div{color:red;}
	</style>
</head>
<body>
	<input type="text" name="username" id="username"/>
	<input type="button" value="检验" />
	<div></div>
	<script type="text/javascript">
		$('input[type=button]').click(function(){
			//$('div').load('test.txt?data='+Math.random());
			//发送的参数格式必须是json格式
			var send={'username':$('#username').val()}        //json格式,js中的对象,python中的字典
			$('div').load('test.php',send,function(data){    //发送数据,send后面是回调函数,用来接收数据,最后直接放到div
				alert(data);
			});
		});
	</script>
</body>
</html>

三、使用$.get()和$.post()方法:(一样的做操作)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax-html</title>
	<script src="jquery.js" type="text/javascript"></script>
	<style type="text/css">
		div{color:red;}
	</style>
</head>
<body>
	<input type="text" name="username" id="username"/>
	<input type="button" value="检验" />
	<div></div>
	<script type="text/javascript">
		var url='test.php';
		var data={'username':$('#username').val()};
		$('input[type=button]').click(function(){
			$.get(url,data,function(data){
				if (data=='true') {
					$('div').html('用户名可以注册');
				}else{
					$('div').html('用户名不能使用admin');
				};
			});
		});
	</script>
</body>
</html>

四、使用$.ajax()方法:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax-html</title>
	<script src="jquery.js" type="text/javascript"></script>
	<style type="text/css">
		div{color:red;}
	</style>
</head>
<body>
	<input type="text" name="username" id="username"/>
	<input type="button" value="检验" />
	<div></div>
	<script type="text/javascript">		
		$('input[type=button]').click(function(){
			var url='test.php';                           //声明变量,不要放在这个function的上面会出问题
			var data={'username':$('#username').val()};
			$.ajax({                                      //.ajax()格式就这样写的,有编程经验的好点
				url:url,                                  //请求的url
				type:'get',                               //请求方式
				data:data,                                //发送的数据
				success:function(data){                   //回调函数
					if(data=='true'){
						$('div').html('用户名可以使用');
					}else{
						$('div').html('用户名不能使用admin');
					}
				}
			});
		});
	</script>
</body>
</html>

最后test.php脚本

<?php
header('Content-type:text/html;chartset=utf-8');  //声明头部

//$username=$_POST['username'];                     //POST方式接收
$username=$_GET['username'];                         //GET方式接收
if($username=='admin'){
	echo 'false';                           //输出
}else{
	echo 'true';
}
?>

以上所有的test.php都是同一个,post的时候改成用post就ok!
蔸雨seo博客原创,未经允许不得转载,谢谢!

3 thoughts on “Jquery实现基础Ajax”

Leave a Comment