您的位置：首页 > Web前端 > JavaScript

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

2013-08-30 01:24 183 查看

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

言归正传啦，那什么是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，看到结果了吗？

对，就是这样~~Ajax挺好玩的吧~~

OK啦，夜深了，今天就先讲$.get,$.post, $.getJSON这三个ajax的函数吧~~师父~ 我先挑我会的整理出来，记不清楚的我慢慢的使劲儿的酝酿~~所以~~我就不按顺序来啦~~good night~~明天去装win8咯~下午回来给你显摆显摆，哈哈 \(≧▽≦)/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航