前端（jQuery）（5）-- jQuery AJAX异步访问和加载片段

异步访问

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <!--<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>-->
    <script>
        /*AJAX请求非常方便，底层已经封装好了*/
        /*实现只修改页面一部分内容而不使页面刷新*/
        $(document).ready(function(){
            $("#btn").click(function(){
                $("#result").text("请求数据中，请稍后");/*提升用户体验*/
                $.get("Server2.php",{name:$("#namevalue").val()},function(data){
                    alert("hello");
                    $("#result").text(data);
                    /*这里是get方式，如果想改成post方式直接把js文件中的get和php文件中的get改成post就行了*/
                }).fail(function(){
                    $("#result").text("通讯有问题");
                    /*视频教程里面用的是.error函数，但是视频是12年的太老了，所以可能会有错误，这里要用fail函数，
                    * 看来视频也还是要跟着时代走的啊！！！*/
                });
            });
        }).ajaxError(function(event, jqxhr, settings, exception) {
            console.log(event);
            console.log(jqxhr);
            alert(settings.url);/*setting可以获得到底是哪一个请求出错了。*/
            // if ( settings.url == "http://localhost:9090/Server1.php" ) {
            //     $( "#result" ).text( "Triggered ajaxError handler." );
            // }
        });
    </script>
</head>
<body>
<input type="text" id="namevalue">
<br/>
<button id="btn">send</button>
结果：<span id="result"></span>
</body>
</html>

 

Server.php

<?php
/**
 * Created by PhpStorm.
 * User: lin
 * Date: 2018/12/14
 * Time: 14:39
 */
if(isset($_GET['name'])){
    echo "hello:".$_GET['name'];
}else{
    echo "Args Error(参数错误)";
}

 

加载片段：

加载片段.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").text("wait....");
            // alert("hello");
            $("body").load("box.htm",function(a,status,c){/*加载一个盒子*/
                console.log(status);
                if(status == "error"){
                    $("body").text("片段加载失败！");
                }
            })
            $.getScript("helloJS.js",function(){
                sayHello();/*这样是可以的，可能是教学视频有点老了，有很多不对应的地方，他居然用了complete方法，
                            我在官方文档中就没有查到这个方法。*/
                /*getScript方法使用.fail()方法处理错误。并不是error方法*/
            });
        });
            /*.ajaxComplete(function( event, xhr, settings ) {
            alert(settings.url);
            if ( settings.url === "helloJS.js" ) {
                /!*这里的setting无法获得helloJS.js的信息，但是能获得box.htm的信息*!/
                sayHello();
                /!*异步加载的方式就是为了更好的用户体验。
                这里可以实现当加载完js文件的时候弹出一个对话框*!/
            }
        });*/
    </script>

</head>
<body>

</body>
</html>

box.htm

<div style="width:100px; height:100px; background-color: #ff0000"></div>

helloJS.js

function sayHello(){
    alert("hello ajax");
}

 

posted @ 2018-12-14 16:45  林丶  阅读(757)  评论(0)  编辑  收藏  举报