javascript - 如何使此联系​​表具有互动性并反射(reflect)信息？

Question

我该如何让这个 HTML 联系表单具有交互性？

<!-- Contact Us Form -->
<div class="contact_form_container">
  <form id="reply_form" action="send.php" method="POST">
    <div>
      <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 id="contact_form_submit" type="submit" class="contact_submit_btn trans_300" value="Submit">
                                        send<img src="images/arrow_right.svg" alt="">
                                    </button>
    </div>

  </form>

</div>

我希望通过 PHP 脚本将用户输入的信息发送给我，但我不确定该 PHP 脚本是什么样子。

成功提交后，我希望用户的姓名能够显示在页面上(即“谢谢您的提交，Joe，我们会尽快回复您!”) .

Answer 1

这对于初学者来说实际上并不容易。实现此目的的一种方法是使用 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 中使用表单。您可以简单地使用 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 带来无限可能!