PhP后台传送数据，JavaScript实现Ajax

最新推荐文章于 2025-04-26 16:39:13 发布

汤立

最新推荐文章于 2025-04-26 16:39:13 发布

阅读量156

点赞数

分类专栏： JavaScript杂项

本文链接：https://blog.youkuaiyun.com/weixin_42867002/article/details/102616636

版权

JavaScript杂项专栏收录该内容

8 篇文章

订阅专栏

一、JavaScript实现Ajax传输

第一步：

	创建异步对象

var xhr = new XMLHttpRequest();

第二步：

	绑定监听对象

xhr.onreadystatechange = function () {
        监听readyState和status
          if (xhr.readyState == 4 && xhr.status == 200) {
               var result = xhr.responseText;//获取数据
                alert(result);
            }
        }

第三步：

	绑定提交地址
	1.调用open发方法，
	2.指定请求的路径，
	3.是否是异步,true:异步

xhr.open("get", "文件名“, true);

第四步：

	发送send请求：get请求为空，post请求+要传的参数

send(null);

实例：
使用按钮触发Ajax传输

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border: 1px solid red;
        }
        td{
            border: 1px solid black;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>这是通过Ajax从b.html文件中传输过来的</td>
        <td>中传输过来的表格文件</td>
    </tr>
</table>
<p>这是通过Ajax从b.html文件中传输过来的段落</p>
</body>
</html>

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="点击触发Ajax">
<div id="div"></div>
<script>
    document.getElementById("btn").onclick=function(){
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                var result=xhr.responseText;
                var text=document.getElementById("div");
                text.innerHTML=result;
            }
        }
        xhr.open('get','./b.html');
        xhr.send();
    }
</script>
</body>
</html>