前端（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");

}

巴特西

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

异步访问

最新文章

热门文章