js调用php函数不刷新页面返回值

在前端开发中，我们经常需要与后端进行交互，使用 JavaScript 调用 PHP 函数是一种常见的方式。本文将介绍在不刷新页面的情况下如何使用 JavaScript 调用 PHP 函数，并返回值。

一、基本概念

在介绍如何使用 JavaScript 调用 PHP 函数之前，我们需要了解 AJAX。AJAX（Asynchronous JavaScript And XML），即异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。使用 AJAX 可以在不刷新页面的情况下向服务器请求数据，并将数据显示在页面上。

二、JavaScript 调用 PHP 函数

JavaScript 可以通过 AJAX 调用 PHP 函数，并获取函数的返回值。下面是一个简单的例子：

```

//JavaScript 代码

function getResult() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

alert(this.responseText);

}

};

xhttp.open("GET", "test.php", true);

xhttp.send();

}

```

上述 JavaScript 代码首先创建了一个 XMLHttpRequest 对象，然后设置了 onreadystatechange 属性。当 readyState 改变时，onreadystatechange 函数会被调用。如果 readyState 等于 4（即完成），并且 status 等于 200（即 OK），则表示服务器返回了正确的数据。最后，我们使用 open() 方法指定了请求的 URL（即 test.php），并调用 send() 方法向服务器发送请求。

下面是一个简单的 PHP 函数，用于返回当前时间：

```

//PHP 代码

function getCurrentTime() {

return date("Y-m-d H:i:s");

}

```

然后，我们将这个 PHP 函数作为 test.php 文件的内容，即：

```

//test.php 代码

function getCurrentTime() {

return date("Y-m-d H:i:s");

}

echo getCurrentTime();

?>

```

当 JavaScript 代码中的 getResult() 函数被调用时，会向 test.php 发送一个请求，并获取函数 getCurrentTime() 的返回值。服务器将返回当前时间（例如 2022-01-01 00:00:00），然后 JavaScript 代码会将返回值弹出一个提示框。

三、注意事项

1. 跨域请求

在实际开发中，需要注意跨域请求的问题。如果 JavaScript 和 PHP 不在同一个域名下，就会引起跨域问题。为了解决这个问题，可以在 PHP 中添加一个跨域的 header，如下所示：

```

//PHP 代码

header("Access-Control-Allow-Origin: *");

```

这将允许从任何域名下发送 AJAX 请求。

2. 安全性问题

在使用 JavaScript 调用 PHP 函数时，应该注意安全性问题。一个常见的攻击方式是 SQL 注入，可以通过向 PHP 函数传递恶意参数来执行 SQL 注入攻击。为了防止 SQL 注入，可以使用 PHP 的内置函数 mysqli_real_escape_string() 或者 PDO 中的 PDO::quote() 函数进行参数过滤。

```

//PHP 代码

function getUserInfo($username) {

$username = mysqli_real_escape_string($conn, $username);

$sql = "SELECT * FROM user WHERE username='$username'";

//执行 SQL 查询

}

```

三、延伸学习

除了使用 PHP 函数，JavaScript 还可以调用 RESTful API。RESTful API 是一种基于 HTTP 协议的 Web API，使用起来较为简便。通常使用 JSON 格式传递数据。

在使用 RESTful API 时，可以使用 jQuery 中的 AJAX 方法或者原生 JavaScript 创建 XMLHttpRequest 对象。下面是一个使用 jQuery 的例子：

```

//JavaScript 代码

$.ajax({

url: "https://api.example.com/user",

method: "POST",

data: {username: "hello", password: "world"},

success: function(result) {

alert(result);

},

error: function() {

alert("Error!");

}

});

```

上述代码将通过 POST 方法向 https://api.example.com/user 发送一个数据包，并传递了两个参数 username 和 password。如果请求成功，则将服务器返回的数据弹出提示框。如果请求失败，则弹出“Error!”提示框。

四、总结

JavaScript 调用 PHP 函数并不是一件复杂的事情。在学习实践中，我们还需要了解 AJAX、跨域请求和安全性问题等相关知识点。同时，我们还可以学习如何使用 RESTful API，并进一步熟悉 Web 开发的技术和流程。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！