Question

我希望在我的jquery-mobile网页上有一个“联系我们”表格。当用户正确输入所有数据并按下提交时，应该向asp脚本发出ajax post请求。如果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的{{1}}标记中。最后，不是在ajax成功回调中使用<a>，而是可以使用jquery location.href

.trigger()

Answer 3

将jquery包含在您的html中
使用$ .ajax（）将表单数据发送到您的asp并相应地处理json。

以下是使用$ .ajax的文档： http://api.jquery.com/jQuery.ajax/

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

提交表单以触发ajax请求

3 个答案: