提交表單以觸發ajax請求

Question

我希望在我的jquery-mobile網頁上有一個「聯繫我們」表單。當用戶輸入所有數據並按下提交時，應該向asp腳本發出ajax post請求。如果asp腳本成功，它將通過json向發出請求的javascript代碼回覆成功狀態。然後，我將切換到另一個頁面，在同一個html文檔中顯示「您的郵件已發送」。

我見過一個例子，它不使用<form>或<input>標籤。

是否有可能通過<form>做我想要的東西？

你會如何做到這一點在HTML方面和你會使用什麼JavaScript事件？

Answer 1

1. 包括jQuery的到HTML
2. 使用$。阿賈克斯（），以數據的形式發送到您的ASP和相應的處理JSON。

下面是使用$阿賈克斯文檔： http://api.jquery.com/jQuery.ajax/

一些例子： http://www.w3schools.com/jquery/ajax_ajax.asp

Answer 2

試試這個例子：
HTML

<form name="contactForm" id="contactForm"> 
    <input type="text" name="firstname" value=""> 
    <input type="submit" name="submit" id="submitBtn" value="Submit"> 
</form> 

JS

$(document).ready(function() { 
    $("#submitBtn").click(function() { 
     var formData = $("#contactForm").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "YOUR FILE PATH", //serverside 
      data: formData, 
      beforeSend: function() { 
       //show loading image 
      }, 
      success: function (result) { 
       console.log(result); //use this to see the response from serverside 
      }, 
      error: function (e) { 
       console.log(e); //use this to see an error in ajax request 
      } 
     }); 
    }); 
}); 

Answer 3

因爲我從你的問題行了解 - 「我會再切換到另一個網頁非常相同的HTML文檔中，並顯示‘你的消息已發送’。 「 - 除了衛生署...的答案，如果你想要去到另一頁上的成功ajax調用之前您序列化表單數據後添加此

var goto=$('#yourFormId').attr('href') 

，並在隨後成功回調使用goto。 。

success: function() 
{ 
    //at the end include this: 
    location.href=goto; 

} 

注：你可以將任何地址分配給goto，在成功的時候打開地址

爲JQM多頁面結構，你可以觸發AJAX的單擊事件成功。假設你在你的html頁面中有這個。

<div data-role="page" id="page-one" data-title="Page 1"> 
    <div data-role="header"> 
     <h1>Page 1</h1> 
    </div> 
    <div data-role="content"> 
     <p>Body copy for page 1</p> 
     <p><a href="#page-two" id="toPage2">Link to page 2</a></p> 
    </div> 
    <div data-role="footer"> 
     Copyright 
    </div> 
</div> 
<div data-role="page" id="page-two" data-title="Page 2"> 
    <div data-role="header"> 
     <h1>Page 2</h1> 
    </div> 
    <div data-role="content"> 
     <p>Body copy for page 2</p> 
     <a href="#page-one" id="toPage1">Link to page 1</a> 
    </div> 
    <div data-role="footer"> 
     Copyright 
    </div> 
</div> 

而且成功要打開Page 2 id爲page-two。現在的Page 2鏈接是在div Page 1的<a>標籤。所以最後，而不是在阿賈克斯成功回調使用location.href你可以使用jQuery .trigger()

success: function() 
{ 
    $('a#toPage2').trigger('click',function(){}) 

}