必赢亚洲手机app下载


职场新人必读电脑软件

操作系统

自家和Ajax的传说

作者和Ajax结缘是在二〇一四年的一月份,当时的花色须求Ajax技术来落成,但对此作者来说完全是崭新的名词,本身就上网上寻找有关材质,结局很举世瞩目,知道概念但是具体的是怎样事物根本傻傻不掌握,后来以此技能是一个后台妹子弄好的,汗颜。

那当中笔者回头仔细分析了一下,最重点的正是祥和不懂服务器,记妥帖时正巧到那家公司,老板让自家设置Java运转环境,本身弄了一上午什么都没弄通晓,其余小伙伴也没弄领悟;因为唯有本人利用苹果电脑,本人刚刚买的,操作都不太精晓,最终是禁锢者给安装的。

旋即和好的前端技术只在HTML和CSS有恢宏的能量,在JS方面属于会用现成东西,加上自个儿全然不懂服务器,使得本人和Ajax拼杀了近七个月的命宫才逐步地停战,转变自个儿,自身1人单打大巴光阴即优伤又难忘,未来Ajax已经变为我光芒的一片段了,所以打算写一写本人上学Ajax的方法艺术,希望能给那一个最初完全不懂的仇人一些启发。

【服务器环境的设置】

不懂服务器的校友能够不用懂也足以,知道放里面运维就能够学习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="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></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

而应该是 http://localhost:8080/ajax/index.html,只用这样才是运行服务器端的页面,上面的只是打开页面,这是两种概念

图片 1

末尾的结果正是,如上海教室,每一回点击按钮,上部分就会添加一行新闻

Ajax在实际上中也是这么使用的,只是页面相对复杂,再不怕有关错误处理的题目,这几个分裂的后台有例外的错误处理情势,我们工作时协同商议来弄,快乐开发;

本次的指标是,让如当年作者那么的同学,尽快的感想Ajax的魔力,减弱独自探索的时刻

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图