这实际上对初学者来说并不容易。一种方法是使用 AJAX（JavaScript 客户端向服务器发出的请求）。
不久前，我编写了一个 AJAX 函数，它处理 AJAX 调用的执行，并将所需的参数发送到服务器。该请求由一个将返回数据的 PHP 文件接收。然后，JavaScript 可以在回调函数中使用此数据。
以下函数使用 GET 运行 AJAX 调用，允许我们将参数 (object) 发送到文件 (string) 并在请求结束时启动回调 (function)。
function ajax(file, params, callback) {
var url = file + '?';
// loop through object and assemble the url
var notFirst = false;
for (var key in params) {
if (params.hasOwnProperty(key)) {
url += (notFirst ? '&' : '') + key + "=" + params[key];
}
notFirst = true;
}
// create a AJAX call with url as parameter
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
以下是我们在您的情况下使用它的方式：
function sendData() {
parameters = {
name: document.querySelector('#contact_form_name').value,
email: document.querySelector('#contact_form_email').value,
subject: document.querySelector('#contact_form_subject').value,
message: document.querySelector('#contact_form_message').value
};
ajax('send.php', parameters, function(response) {
// add here the code to be executed when data comes back to client side
// e.g. console.log(response) will show the AJAX response in the console
});
}
然后在你的文件send.php中你可以放下面的代码来处理AJAX调用发送的url参数。
if (isset($_REQUEST['name'], $_REQUEST['email'], $_REQUEST['subject'], $_REQUEST['message'])) {
// they are set, you can use them by accessing $_REQUEST
// return the desired output with `echo` not `return`!
echo $_REQUEST['name'] . ', you have sent a message.';
}
使用上述过程，您无需在 HTML 中使用form。您可以简单地使用input 标签，当然还有button 来启动函数sendData()。使用button的标签中的onclick属性来指定点击按钮时要执行的动作。
<!-- Contact Us Form -->
<div class="contact_form_container">
<input id="contact_form_name" class="input_field contact_form_name" type="text" name="name" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" class="input_field contact_form_email" type="email" name="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_subject" class="input_field contact_form_subject" type="text" name="subject" placeholder="Subject" required="required" data-error="Subject is required.">
<textarea id="contact_form_message" class="text_field contact_form_message" name="message" placeholder="Message" rows="4" required data-error="Please, write us a message."></textarea>
</div>
<div>
<button onclick="sendData()" id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit">
send<img src="images/arrow_right.svg" alt="">
</button>
</div>
返回一个对象而不是字符串：
您甚至可以使用 PHP，以便它在回调中返回一个实际的 Javascript 对象，而不仅仅是一个字符串。如果您想将各种信息返回给客户端，这将非常有帮助。
您必须使用内置的 json_encode() 函数来获取 PHP 数组的 JSON 表示。例如：
$array = array({
'name' => $_REQUEST['name'],
'subject' => $_REQUEST['subject']
});
echo json_encode($array);
然后在JavaScript里面回调函数使用：
let obj = JSON.parse(response);
您实际上已将响应转换为 Javascript 对象（不确定它是否是 JSON 对象...，但它是 JavaScript 对象，这很重要）。这意味着您可以访问obj 的属性：例如，obj.name 将具有用户的名称，obj.subject 将具有消息的主题等...
注意：在这个例子中，我刚刚返回了最初发送到服务器的信息，但是你可以返回任何你想要的。您可以在 PHP 文件中有一个过程来将数据保存到数据库并返回一些其他类型的信息。使用 AJAX 的可能性无穷无尽！