如何使用javascript根据http状态显示消息? [英] how to show the message according to the http status using javascript?

问题描述

这是我的html代码，我想使用Google表格将详细信息发送到我的邮件中，请帮助我更改javascript代码.

this is my html code and i want to send the details to my mail using google sheets please help me to change the javascript code.

<form id="ajax-contact" method="post" action="https://script.google.com/macros/s/AKfycbz3apZ3HKNd_dqdaZSeemKcSEQVslwb8CCtHEFB/"> 
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" id="name" name="name" required>
</div>
<div class="form-group">                
<input type="email" class="form-control" placeholder="Enter Email" id="email" name="email" required>
</div> 
<div class="form-group">                
<input type="tel" class="form-control" placeholder="Mobile Number" id="phone" name="phone" pattern="[0-9]{10}" required>
</div> 
<div class="form-group">
<textarea class="form-control" placeholder="Message" id="message" name="message" required></textarea>
</div>
<button type="submit" onclick="myFunction()" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<p id="thank"></p>
 <script>
      function myFunction(){
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
               if (this.readyState == 4 && this.status == 200) {
                   document.getElementById("thank").innerHTML="Thankyou! for contacting us, will get back to you soon.";
               }
               else{
                  document.getElementById("thank").innerHTML="Sorry! please try again."
               }
          }
      }
</script>

推荐答案

这是一个jQuery AJAX示例.

Here is a jQuery AJAX example.

$(function() {
  $("#ajax-contact").submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: $(this).attr("action"),
      type: $(this).attr("method"),
      data: $(this).serialize(),
      success: function(results) {
        $("#thank").html("Thank you for contacting us! We will get back to you soon.");
      },
      error: function() {
        $("#thank").html("Sorry! Please try again.");
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="ajax-contact" method="post" action="https://script.google.com/macros/s/AKfycbz3apZ3HKNd_dqdaZSeemKcSEQVslwb8CCtHEFB/">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Name" id="name" name="name" required>
  </div>
  <div class="form-group">
    <input type="email" class="form-control" placeholder="Enter Email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <input type="tel" class="form-control" placeholder="Mobile Number" id="phone" name="phone" pattern="[0-9]{10}" required>
  </div>
  <div class="form-group">
    <textarea class="form-control" placeholder="Message" id="message" name="message" required></textarea>
  </div>
  <button type="submit" class="mu-send-msg-btn"><span>SUBMIT</span></button>
</form>
<p id="thank"></p>

通常，HTML表单将直接提交到action属性.我们创建一个submit回调并阻止默认事件.然后，我们可以对所需的动作进行编程.

Normally, the HTML Form would be submitted directly to the action attribute. We create a submit callback and prevent the default event. We can then program the actions that are desired.

AJAX仍然需要知道要发送到操作的URL，方法类型和数据.然后，我们可以处理success或error回调.

AJAX will still need to know the URL, Method Type, and Data that is to be sent to the Action. We can then handle success or error callbacks.

查看更多:

• https://api.jquery.com/jquery.ajax/
• jQuery AJAX提交表单

• https://api.jquery.com/jquery.ajax/
• jQuery AJAX submit form

这篇关于如何使用javascript根据http状态显示消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！