ajax get方式传递参数

最新推荐文章于 2024-08-03 16:20:05 发布

weixin_30835923

最新推荐文章于 2024-08-03 16:20:05 发布

阅读量1.8k

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/shanyansheng/p/5125827.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #box{
            width:600px;
            height:200px;
            padding:20px;
            border:1px solid #999;
        }
    </style>
</head>
<body>
    <h1>ajax get方式传递参数</h1>
    <hr>
    Number1: <input type="text" id="num1"><br>
    Number2: <input type="text" id="num2"><br>
    <button onclick="loadHtml()">加载</button>
    <div id="box"></div>
    <script>
        function loadHtml(){
            //获取表单中的数据
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
            //实例化 XMLHttpRequest对象
            if(window.XMLHttpRequest){
                //非IE
                var xhr = new XMLHttpRequest();

            }else{
                var xhr = new ActiveXobject('Microsoft.XMLHTTP');
            }
            //给xhr 绑定事件 检测请求的过程
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                //如果成功接收到响应
                if(xhr.status == 200 && xhr.readyState == 4){
                    document.getElementById('box').innerHTML = xhr.responseText;
                }
            }
            //进行请求的初始化
            xhr.open('get', 'js.php?n1='+num1+'&n2='+num2, true);
            //正式发送请求
            xhr.send();
        }
    </script>
</body>
</html>

<?php 
echo $_GET['n1'] + $_GET['n2'];
 ?>

转载于:https://www.cnblogs.com/shanyansheng/p/5125827.html

weixin_30835923

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫