【Ajax】实现网页与服务器之间的数据交互

作者：System 时间：2024年08月16日分类：所有,ajax 字数：938

以下是使用Ajax实现简单的数据交互的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById("data").innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "server.php", true);
            xhr.send();
        }
    </script>
</head>
<body>
 
<button onclick="fetchData()">Fetch Data</button>
<div id="data">Data will appear here after fetching.</div>
 
</body>
</html>

PHP部分（server.php）:




<?php
// 假设这是一个简单的服务器响应
echo "Hello, this is the server response!";
?>

这个例子中，当用户点击按钮时，会触发fetchData函数，该函数使用Ajax向服务器发送GET请求，请求server.php文件。服务器响应后，Ajax会处理响应并将其内容显示在页面的data元素中。

【Ajax】实现网页与服务器之间的数据交互

评论已关闭

推荐阅读