摘要:本篇教程介绍了jQuery教程 Ajax学习,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery教程 Ajax学习,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
【服务器环境的安装】
不懂服务器的同学可以不用懂也可以,知道放里面运行就可以学习Ajax了
我推荐使用:XAMPP是最流行的PHP开发环境,直接一键安装,方便快捷
对于XAMPP的文章和使用方式大家可以自己研究一下,耐得住心思,很好弄的
有了服务器环境大家可以尽情的和Ajax玩耍了
先来个例子:顺序为【CSS样式】【HTML结构】【JAvascript/jQuery】【JSON数据】
<style>
body{margin:0;background:#f2f2f2;}
.ajax_box{border:solid 10px purple;padding:30px;margin:30px;}
.ajax_box .box{border:solid 1px black;padding:10px;overflow:hidden;margin:10px;}
.ajax_box .box div{float:left;width:25%;text-align:center;}
.ajax_btn{background:purple;color:#fff;height:50px;line-height:50px;margin:0 30px;text-align:center;font-size:20px;cursor:pointer;}
.ajax_btn:hover{opacity:.8;}
</style>
<div class="ajax_box">
<div class="box">
<div>姓名</div>
<div>年龄</div>
<div>性别</div>
<div>格言</div>
</div>
</div>
<div class="ajax_btn">点击我进行Ajax请求数据</div>
<script src=""></script>
<script>
$(function(){
$('.ajax_btn').on('click',function(){
$.ajax({
type:"GET",
url:"ajax.json",
success:function(data){
$('.ajax_box').append('<div class="box">'+
' <div>'+data.ajax.name+'</div>'+
' <div>'+data.ajax.age+'</div>'+
' <div>'+data.ajax.sex+'</div>'+
' <div>'+data.ajax.maxim+'</div>'+
'</div>');
},
error:function(xhr,errorText){
console.log(errorText);
}
})
})
})
</script>
{
"ajax":{
"name":"奔跑的蜗牛",
"age":"27",
"sex":"男",
"maxim":"学习失败,在失败中成长"
}
}
把我上面的代码进行组装,json数据放在同一个目录下面,把他们一起放在服务器环境中View层,然后打开
页面地址不能为 file:///Applications/XAMPP/xamppfiles/htdocs/dashboard/ajax/index.html
而应该是 //localhost:8080/ajax/index.html,只用这样才是运行服务器端的页面,上面的只是打开页面,这是两种概念
最终的结果就是,如上图,每次点击按钮,上部分就会添加一行信息
Ajax在实际中也是这样使用的,只是页面相对复杂,再就是关于错误处理的问题,这个不同的后台有不同的错误处理方式。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号