提交表單以觸發Ajax請求

Question

我希望在我的jquery-mobile網站上有一個“聯系我們”表格。 當用戶正確輸入所有數據並按Submit后，應向asp腳本發出ajax發布請求。 如果asp腳本成功，它將通過json答復發出請求的javascript代碼的成功狀態。 然后，我將切換到完全相同的html文檔中的另一頁，並顯示“您的消息已發送”。

我看過一個不使用<form>或<input>標記的示例。

是否可以用<form>做我想做的事情？

就html而言，您將如何做？您將使用什么javascript事件？

Answer 1

試試這個例子：
的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 2

正如我從您的問題所在的行中所了解的-“然后，我將在相同的html文檔中切換到另一頁，並顯示“您的消息已發送”。”-除了Dh ...的答復如果要成功轉到另一個頁面，請在序列化表單數據后在ajax調用之前添加此頁面。

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

然后在成功回調中使用goto 。

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

}

注意：您可以將任何地址分配給goto並在成功時打開該地址

對於JQM多頁面結構，您可以在ajax成功時觸發click事件。 假設您在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>標簽。 因此，最后，可以使用jquery .trigger()代替在ajax成功回調中使用location.href 。

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

}

Answer 3

1. 將jquery包含到您的html中
2. 使用$ .ajax（）將表單數據發送到您的asp並相應地處理json。

這是使用$ .ajax的文檔： http : //api.jquery.com/jQuery.ajax/

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