原生ajax与php的交互
时间: 2023-08-18 16:06:14 浏览: 55
以下是一个使用原生 AJAX 和 PHP 进行交互的示例:
在 HTML 页面中添加一个按钮,并绑定一个点击事件:
```html
<button id="btn">点击获取数据</button>
```
使用 JavaScript 代码监听按钮点击事件,并使用 AJAX 发送请求到后端 PHP 文件:
```javascript
document.getElementById("btn").addEventListener("click", function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText); // 输出后端返回的数据
}
};
xhr.open("GET", "backend.php?param1=value1¶m2=value2", true);
xhr.send();
});
```
在后端 PHP 文件中接收请求,并返回处理结果:
```php
<?php
$param1 = $_GET["param1"];
$param2 = $_GET["param2"];
// 进行相应的处理
$result = $param1 . " " . $param2;
// 返回处理结果
echo $result;
?>
```
以上示例中,我们使用原生 JavaScript 创建一个 XMLHttpRequest 对象,并监听其状态变化事件。在按钮被点击时,我们使用 open 方法打开一个 GET 请求,并将参数 param1 和 param2 传递给后端 PHP 文件。当 AJAX 请求成功返回时,我们使用 responseText 属性获取后端 PHP 文件返回的数据,并将其输出到控制台。
在后端 PHP 文件中,我们使用 $_GET 方法获取前端传递的参数 param1 和 param2,并进行相应的处理。在处理完成后,我们使用 echo 方法将处理结果返回给前端页面。
需要注意的是,以上示例中使用的是 GET 请求方式,如果需要使用 POST 请求方式,需要使用 setRequestHeader 方法设置请求头,并将参数传递给 send 方法。此外,为了防止 SQL 注入等安全问题,需要对接收到的参数进行过滤和验证。