108 使用Ajax请求获取PHP自制接口

1、编写php文件

新建process.php文件如下：

"Hello World!"; //返回给前端Hello World!
?>
1
2
3

2、使用Ajax请求获取PHP自制接口

新建ajax3.html文件，如下：


找到xampp下的hotdocs，新建目录ajaxstudy，将上述创建的process.php和ajax4.html放入其中，如下所示：

输入http://localhost/ajaxstudy/ajax4.html，效果如下：

单击按钮，效果如下：

3、表单GET提交数据到PHP和Ajax请求数据GET

前端以get的形式传递一个参数name到php，修改process.php文件如下：

表单GET提交数据到PHP

页面创建一个表单，用于Get方式提交数据到PHP

效果如下：

观察发现，通过表单get方式提交数据到php这种方式，单击提交后会跳转到一个php文件，并且在url地址栏后面拼接上一个name参数。

Ajax请求数据GET

js部分如下：

运行效果如下：

通过Ajax GET请求提交数据，发现地址栏的url并没有发生变化，并没有发生跳转，直接在当前页面实现数据，不刷新页面的情况下获取数据。

4、正常表单POST提交数据到PHP和Ajax请求数据POST

前端以post的形式传递一个参数name到php，修改process.php文件如下：

表单POST提交数据到PHP

观察发现，通过表单post方式提交数据到php这种方式，单击提交后会跳转到一个php文件。

Ajax请求数据POST

通过Ajax POST请求提交数据，发现地址栏的url并没有发生变化，并没有发生跳转，直接在当前页面实现数据，不刷新页面的情况下获取数据。