提交表单以触发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(){}) 

}