如何使用 javascript 根據 http 狀態顯示消息？

Question

這是我的 html 代碼，我想使用谷歌表格將詳細信息發送到我的郵件，請幫助我更改 javascript 代碼。

<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>

Answer 1

這是一個 jQuery AJAX 示例。

 $(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回調並阻止默認事件。 然后，我們可以對所需的操作進行編程。

AJAX 仍然需要知道 URL、方法類型和要發送到操作的數據。 然后我們可以處理success或error回調。

看更多：

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