原生ajax在PHP的使用方法

原生ajax在PHP的使用方法

表单页面（使用了get方法）

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax</title>
    <script type="text/javascript">
    window.onload = function(){
            var btn = document.getElementById('btn');
            btn.onclick = function(){
　　　　　　　　　　//得到两输入框的值
                var username = document.getElementById("username").value;
                var password = document.getElementById('password').value;
                //第一步：创建xhr对象
                var xhr = null;
                if(window.XMLHttpRequest){//标准浏览器
                    xhr = new XMLHttpRequest();
                }else{//早期的IE浏览器
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }                
                //第二步：准备发送请求-配置发送请求的一些行为
                var url = '02form.php?username='+username+'&password='+password;                   
                xhr.open('get',url);

                //第三步：执行发送的动作                
                xhr.send(null);
                //第四步：指定一些回调函数
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            var data = xhr.responseText;//回调过来的值
                            console.log(data);
                            
                        }
                    }
    
                }    
            }
        }
    </script>
</head>
<body>

    <div>
        <div id="showInfo"></div>
        <form>
            用户名：<input type="text" name="username" id="username"><br>
            密码：<input type="password" name="password" id="password"><br>
            <input type="button" value="提交" id="btn">
        </form>
    </div>
</body>
</html>
复制代码

02form.php 页面

复制代码
<?php 

header("Content-Type:text/html;charset=utf-8");
$username = $_GET['username'];
$password = $_GET['password'];

echo '用户名：'.$username.'密码：'.$password."中文";
echo 'hello world';
?>
复制代码

 在页面用户输入小明，密码输入pass

控制台结果： 用户名：小明密码：pass中文hello world

这样我们就客户端传递值到服务器端，服务器端并且可以返回值到客户端。

下面介绍一下post方法

复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生ajax-状态值得含义</title>
    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var username = document.getElementById("username").value;
            var password = document.getElementById('password').value;
            //第一步：创建xhr对象
            var xhr = null;
            if(window.XMLHttpRequest){//标准浏览器
                xhr = new XMLHttpRequest();
            }else{//早期的IE浏览器
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            
            //第二步：准备发送请求-配置发送请求的一些行为
            // var url = '02form.php?username='+ username+'&password='+password;//get方法
           
            var url = '02form.php';//post方法
            xhr.open('post',url,true);//
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//post 发送字符内容
            //第三步：执行发送的动作
            
            var param = 'username='+username+'&password='+password;//post方法xhr.send(param);
            xhr.send(param);
            //第四步：指定一些回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var data = xhr.responseText;//json
                        console.log(data);
                      
                    }
                }

            }    
        }
    }
    </script>
</head>
<body>

    <div>
        <div id="showInfo"></div>
        <form>
            用户名：<input type="text" name="username" id="username"><br>
            密码：<input type="password" name="password" id="password"><br>
            <input type="button" value="提交" id="btn">
        </form>
    </div>
</body>
</html>
复制代码

 

<?php 

$username = $_POST['username'];
$password = $_POST['password'];

echo '用户名：'.$username.'密码：'.$password."中文";
echo 'hello world';
?>

 

posted @   三线码工  阅读(568)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示