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

最新推荐文章于 2023-03-22 14:06:12 发布

汤立

最新推荐文章于 2023-03-22 14:06:12 发布

阅读量135

点赞数

分类专栏： JavaScript杂项

本文链接：https://blog.csdn.net/weixin_42867002/article/details/102616636

版权

JavaScript杂项专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、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>

汤立

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PhP后台传送数据，JavaScript实现Ajax

一、JavaScript实现Ajax传输第一步：创建异步对象var xhr = new XMLHttpRequest();第二步：绑定监听对象xhr.onreadystatechange = function () { 监听readyState和status if (xhr.readyState == 4 && xhr.st...
复制链接

扫一扫

专栏目录