Ajax 请求PHP接口

一. 请求PHP接口

1. 建立process.php文件，文件内容为，判断是否有get传送过来的name参数。即，前台ajax在请求时，会给PHP后台传一个参数，参数的名字叫name，是以get的形式传送过来的。如果存在就将echo拼接出来的东西返回给ajax4.html文件

2. ajax4.html中如何传参给PHP呢？在open方法中的请求路径中，路径后面加上?问号，再加上参数名称和参数值，如果有多个参数以&连接。

3. 操作原理就是，点击按钮后，html文件会将name=Henry这个参数传给PHP文件，php文件再将其拼接的字符串返回给html文件，进行展示。

二. 正常表单GET提交数据到PHP和ajax请求数据GET的不同

1. 正常表单form提交数据

• html文件，form表单action提交信息到process.php文件中，运用get方法获取数据。第一个input标签用于输入我们的参数name，以传给php文件。第二个input标签为提交按钮。

    <h1>正常表单数据提交到PHP</h1>
    <form action="process.php" method="GET">
        <input type="text" name="name">
        <input type="submit" value="提交">
    </form>

• 这里php文件接收参数name，并判断返回给html文件。

<?php
    if(isset($_GET['name'])){
        echo "GET:你的名字是".$_GET['name'];
    }
?>

• 页面正常显示，这里注意url从html文件跳转到php文件并加上了？和参数

2. ajax请求数据，可以在不刷新页面的情况下拿到数据

<h1>Ajax请求数据</h1>
<form id="getForm">
    <input type="text" name="name" id="name1">
    <input type="submit" value="提交">
</form>
<br>
<script>
    document.getElementById("getForm").addEventListener("submit",getForm);
    function getForm(e){
        e.preventDefault();
        let name = document.getElementById('name1').value;
        let xhr = new XMLHttpRequest();
        xhr.open("GET","process.php?name="+name, true);
        xhr.onload = function(){
            console.log(this.responseText);
        }
        xhr.send();
   }
</script>

• 页面没有跳转，参数于控制台中输出

!

三. 正常表单POST提交数据到PHP和ajax请求数据POST的不同

<h1>正常表单POST数据提交到PHP</h1>
    <form action="process.php" method="POST">
        <input type="text" name="name">
        <input type="submit" value="提交">
    </form>

    <h1>Ajax请求数据POST</h1>
    <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementById("postForm").addEventListener("submit",postForm);
       function postForm(e){
            e.preventDefault();
            let name = document.getElementById('name2').value;
            let params = "name="+name;
            let xhr = new XMLHttpRequest();
            xhr.open("POST","process.php", true);
            //设置请求头
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }
    </script>

<?php
    if(isset($_POST['name'])){
        echo "POST:你的名字是".$_POST['name'];
    }
?>

1. form表单

2. ajax

3. get和post的区别在于，get将参数放在url中传递过去，而post是以密文的形式传送。所以将参数用send形式传送过去。
4. 如果以post请求的话，还需设置请求头