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

2018-09-29 Day30 - ajax

推荐阅读更多精彩内容