ajax能否请求php文件,Ajax 请求PHP接口

一. 请求PHP接口

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

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

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

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

1. 正常表单form提交数据

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

正常表单数据提交到PHP

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

if(isset($_GET['name'])){

echo "GET:你的名字是".$_GET['name'];

}

?>

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

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

Ajax请求数据

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();

}

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

!

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

正常表单POST数据提交到PHP

Ajax请求数据POST

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);

}

if(isset($_POST['name'])){

echo "POST:你的名字是".$_POST['name'];

}

?>

form表单

ajax

get和post的区别在于，get将参数放在url中传递过去，而post是以密文的形式传送。所以将参数用send形式传送过去。

如果以post请求的话，还需设置请求头