我揭开了Ajax的红盖头~$.get,$.post, $.getJSON~

最新推荐文章于 2024-04-25 21:50:47 发布

Mathilda91

最新推荐文章于 2024-04-25 21:50:47 发布

阅读量62

点赞数

文章标签： json 后端 javascript ViewUI

原文链接：https://my.oschina.net/tirzah/blog/157911

版权

师父我牛吧，起了个文艺范儿的名字，还带着喜气洋洋的味儿呢~~哈哈~

言归正传啦，那什么是Ajax呢，它是做什么的用的呢？

阿，稍等，友情提示：Ajax需要用到一个工具，可以去http://alphapixels.com/prepros/下载噢~

来，我们先看一个小例子：
首先呢，我们要先新建一个目录,js里面放的是jquery.js，demo.html的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
	$.get('2.html',function(text){  
	//$.get('这里是url', function(这里是从服务器端返回的数据){
		$('#text').html(text); 
		//$('#test').html('这里是把数据添加到test 这个元素上');
});
</script>
</head>
<body>
<div id="text"></div>
</body>
</html>

然后呢，我们在2.html里面随便写点什么，比如：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>我是2.html的内容~~</h1>
</body>
</html>

所以呢，我们现在可以运行demo.html看看有什么惊喜 ~\(≧▽≦)/~

当当当当，看我们发现了什么，2.html里面的内容在demo.html里面显示了~~没错，这就是Ajax了，当我希望页面里出现服务器端返回的数据通常都是需要刷新页面或者跳转才可以，那么现在就不需要了,使用Ajax 就可以指定要显示服务器端的url,把得到的数据直接显示到一个元素当中，其实Ajax 本身还是有些复杂的,我们现在用的jquery,帮我们简化了许多~（这段我盗用了师父的原话，哈哈~）

我们在chrome看看这个例子的请求方法：

OK，我们看到啦，这个例子请求的方法是GET，（当然了，http的请求方法有四种，还有post和基本没人用的put及delete。）然后再关注下请求的url。

下面让我们改造下demo.html里面的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
	$(function() {
		$.post('2.html', { str: '你好！' }，function(text) {
			$('#text').html(text);
		});
	});
</script>
</head>
<body>
<div id="text"></div>
</body>
</html>

然后同样在chrome里面查看，会发现请求方法变成了post，而且还多了个比get的时候多一个Form Data，这个就是我们向后端传递的数据，比如注册的时候，我们写了一个名字，过一小会就出现用户名重复，就是使用的ajax，把当前我们输入的用户名传给后端，后端去查询数据库，发现有重名的，就返回给前端一个错误信息。

我们再来看一个，首先新建一个data.json，放在刚刚的目录下就可以,然后我们继续改造下demo.html的内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script>
	$(function() {
		$.getJSON('data.json', function(json) {
			alert('用户名是：'+json.username);
			alert('说的话是：'+json.text);
		});
	});
</script>
</head>
<body>
<div id="text"></div>
</body>
</html>

运行demo.html，看到结果了吗？