枯燥的js php

请求PHP

GET

<button id="button">获取PHP数据</button>
        <br><br>
        <h1>正常表单提取数据到PHP</h1>
        <form action="https://api.vvhan.com/api/saorao?tel=1365655656" method="GET">
            <input type="text" name="name">
            <input type="submit"value="提交">
        </form>
        <h1>ajax请求数据</h1>
        <form id="getForm">
            <input type="text" name="name"  id="name1">
            <input type="submit"value="提交">
        </form>
        <script>
            document.getElementById('button').addEventListener('click',getData);
            document.getElementById('getForm').addEventListener('submit',getForm);
            function getData(){
                var xhr = new XMLHttpRequest();
                xhr.open('GET','https://api.vvhan.com/api/saorao?tel=1365655656',true);
                xhr.onreadystatechange = function(){
                    if(this.status==200&&this.readyState==4){
                         console.log(this.responseText);
                    }else if(this.status ==404){
                        alert('这个网页不存在');
                    }
                }
                xhr.send();
            }
            function getForm(e){
                e.preventDefault();//阻止submit默认事件
                var name = document.getElementById('name1').value;
                var xhr = new XMLHttpRequest();
                xhr.open('GET','https://api.vvhan.com/api/saorao?tel='+name,true);
                xhr.onreadystatechange = function(){
                    if(this.status==200&&this.readyState==4){
                         console.log(this.responseText);
                    }else if(this.status ==404){
                        alert('这个网页不存在');
                    }
                }
                xhr.send();
            }
        </script>

POST

<h1>ajax请求数据post</h1>
        <form id="postForm">
            <input type="text" name="name"  id="name2">
            <input type="submit"value="提交">
        </form>
        
document.getElementById('postForm').addEventListener('submit',postForm);
function postForm(e){
                e.preventDefault();//阻止submit默认事件
                var name = document.getElementById('name2').value;
                var xhr = new XMLHttpRequest();
                //区别
                var params = "name"+name;
                
                xhr.open('POST','https://api.vvhan.com/api/saorao',true);//post参数不在url里面传了
                //设置请求头
                xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                xhr.onreadystatechange = function(){
                    if(this.status==200&&this.readyState==4){
                         console.log(this.responseText);
                    }else if(this.status ==404){
                        alert('这个网页不存在');
                    }
                }
                xhr.send();
            }