2018-09-29 Day30 - ajax

ajax = Asynchronous + JavaScript + And + XML(现在XML慢慢已经被JSON取代)

Asynchronous:异步请求(没有中断浏览器的用户体验)从服务器获取数据。
JSON : 通过DOM操作对页面进行局部刷新

ajax作用:异步加载数据 + 局部刷新页面

效果一:利用api查看美女图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <button id="beauty">换一组</button><br/>
        <script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#beauty").on("click",function(){
                    $("a").empty();
                    var url = "http://api.tianapi.com/meinv/?key=3cedb24a8f5af4277b3de0b9c841e1d6&num=20"
                    $.getJSON(url,function(jsonOBJ){
                        for (var i = 0; i < jsonOBJ.newslist.length ; i += 1){
                            $(document.body).append(
                                $("<a>").html(jsonOBJ.newslist[i].title+"<br/>").attr("href",jsonOBJ.newslist[i].picUrl).attr("width","400")
    
                            );
                        }
                    });
                });
            });
        </script>
    </body>
</html>

效果二:api-周公解梦

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>周公解梦在线版</title>
        <style type="text/css">
            #main{
                position: absolute;
                margin: 100px 200px;
                float: left;
                width: 800px;
                height: 400px;
                border: solid black;
            }

        </style>
    </head>
    <body>
        <div id="main">
            <span>解梦:</span>
            <input placeholder="输入您想查询梦的关键字" id="text">
            <button id="confirm">查询</button>
            <hr />
            <span>解析:</span>
            
        </div>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#confirm").on("click",function(){
                    var content = $("#text").val().trim();
                    if (content.length>0){
                        
                        //getJSON方法
//                      var str1 = encodeURIComponent(content,"utf-8");
//                      var url = "http://api.tianapi.com/txapi/dream/?key=3cedb24a8f5af4277b3de0b9c841e1d6&word=" + str1;
//                      $.getJSON(url,function(jsonOBJ){
//                          $("#main>p").empty();
//                          if (jsonOBJ.code == 250){
//                              alert("未检索到相关信息!");
//                          }else{  
//                              $("#main").append($("<p>").text(jsonOBJ.newslist[0].result));
//                          }
//                      });

                        //ajax方法
                        $.ajax({
                            "url":"http://api.tianapi.com/txapi/dream/",
                            "type":"get",
                            "data":{
                                "key":"3cedb24a8f5af4277b3de0b9c841e1d6",
                                "word":content
                            },
                            "dataType": "json",
                            "success": function(jsonOBJ){
                                if (jsonOBJ.code == 250) {
                                    alert("未检索到相关信息!");
                                }else{
                                    $("#main").append($("<p>").text(jsonOBJ.newslist[0].result));
                                }
                            }
                    
                        });
                    }
                    

                });
            });
        </script>
    </body>
</html>

Bootstrap响应式布局
Bootstrap

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 摩天大楼 我抬头仰望 这片摩天大楼 感到天旋地转 紧闭的窗户令人生厌 我穿得单薄浑身麻木 径直往狭窄的小巷里钻 混...
    欧阳小川阅读 660评论 26 30
  • 我们通常会很好地照顾自己的脸,在面部产品上花很多钱,让它看起来无懈可击。但是,别忘了,疏于颈部护理可能会暴露年龄的...
    洋风物志阅读 323评论 0 1
  • 带孩子看画展,走了一圈下来,孩子说,我发现那些大家都喜欢看的画,往往是那些想象与现实结合的画,画的特别真实的大家也...
    潘的斑点马阅读 478评论 2 2