非常简单的Ajax请求实例附源码

2023年6月11日上午11:08 • JavaScript

非常简单的Ajax请求实例附源码指的是使用Ajax技术实现异步请求后端数据并解析的过程，实现网页无需刷新即可展示新内容或更新信息。下面我们将通过两个示例来详细讲解该攻略。

示例1

首先，我们创建一个包含以下内容的HTML页面，该页面包含了一个文本输入框、一个按钮和用于显示结果的空div：

<!DOCTYPE html>
<html>
<head>
    <title>异步请求示例</title>
</head>
<body>
    <input type="text" id="input">
    <button id="button">提交</button>
    <div id="resDiv"></div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(function(){
            $("#button").click(function(){
                var text = $("#input").val();
                $.ajax({
                    "url": "https://api.github.com/users/" + text,
                    "type": "GET",
                    "success": function(data){
                        $("#resDiv").html("用户名：" + data.login + "<br>介绍：" + data.bio);
                    },
                    "error": function(){
                        alert("请求失败");
                    }
                });
            });
        });
    </script>
</body>
</html>

在该页面中，我们引入了jQuery库，并使用其提供的click()函数来绑定点击事件。当用户点击按钮时，我们使用jQuery提供的$.ajax()函数来发送一个异步GET请求，并获取GitHub的用户信息。如果请求成功，我们从返回的数据中提取用户名和介绍，并使用html()函数将这些信息显示在空的div标签中。

示例2

下面是另一个示例，它使用原生JS来实现异步请求：

<!DOCTYPE html>
<html>
<head>
    <title>异步请求示例</title>
</head>
<body>
    <button id="button">加载数据</button>
    <div id="resDiv"></div>

    <script>
        document.getElementById("button").onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "https://api.github.com/users/soasme");
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var data = JSON.parse(xhr.responseText);
                        document.getElementById("resDiv").innerHTML = "用户名：" + data.login + "<br>介绍：" + data.bio;
                    }else{
                        alert("请求失败");
                    }
                }
            };
            xhr.send();
        };
    </script>
</body>
</html>

在该页面中，我们首先使用getElementById()函数获取到按钮和用于显示结果的div标签，然后使用原生JS提供的XMLHttpRequest()对象来创建一个异步GET请求，并指定URL为GitHub的用户信息API。当请求状态改变时，我们通过读取readystate和status属性来确定请求是否成功。如果请求成功，我们使用JS内置函数JSON.parse()从返回的数据中提取JSON对象，然后将用户名和介绍写入到div标签中。

以上是非常简单的Ajax请求实例附源码的攻略和示例说明。希望能对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：非常简单的Ajax请求实例附源码 - Python技术站