jQuery AJAX之异步访问和加载片段

HTML文件 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../Scripts/jquery-3.4.1.min.js"></script>
    <script src="ajaxindex.js"></script>
</head>
<body>
    <input type="text" id="namevalue" />
    <br />
    <button id="btn">Send</button>
    结果：<span id="result"></span>

    <!--加载片段-->
</body>
</html>

JS文件：

$(document).ready(function () {
    $("#btn").on("click", function () {
        $("#result").text("请求数据中，请稍后……");//防止延迟卡顿
        $.get("Server.php", { name: $("#namevalue").val() },function (data) {//参数1：网址，参数2：参数，参数3：返回值
            $("#result").text(data);//Ajax异步请求，只更新结果，不刷新页面
        }).error(function () {
            $("#result").text("通讯失败！");
        });
    });

    $("#btn").on("click", function () {
        $.post("Server.php", { name: $("#namevalue").val() }, function (data) {//参数1：网址，参数2：参数，参数3：返回值
            $("#result").text(data);//Ajax异步请求，只更新结果，不刷新页面
        });
    });

    //加载片段
    $("body").text("wait……");//等待加载
    $("body").load("HtmlPage1.htm", function (a, status, c) {//三个参数
        console.log(status);//观察状态
        if (status == "error") {
            $("body").text("加载失败");
        }
    });

    $.getScript("HelloJS.js").complete(function () {//加载JS文件
        sayHello();
    });
});

HTM文件：

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

HelloJS.JS文件：

function sayHello() {
alert("Hello AJAX！");
}

 

posted @ 2023-05-05 21:47  它的眼角开过光  阅读(24)  评论(0)    收藏  举报