0

我希望在我的 jquery-mobile 网页上有一个“联系我们”表单。当用户正确输入所有数据并按下提交时，应该向 ASP 脚本发出 ajax 发布请求。如果 asp 脚本成功，它将通过 json 向发出请求的 javascript 代码回复成功状态。然后，我将切换到同一个 html 文档中的另一个页面，并显示“您的消息已发送”。

我已经看到了一个这样做的例子，它使用 no<form>或<input>标签。

可以用 a 做我想做的事<form>吗？

您将如何在 html 方面执行此操作以及您将使用哪些 javascript 事件？

4

3 回答 3

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
            }
        });
    });
});
于 2013-10-17T06:10:58.190 回答
0

正如我从你的问题中所理解的那样——“然后我将切换到同一个 html 文档中的另一个页面并显示“你的消息已发送”。“——除了 Dh ......的回答如果您想在成功后转到另一个页面，请在序列化表单数据后在 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 2id 为page-two.Now 的链接Page 2在 divPage 1的<a>标签中。所以最后，location.href你可以使用 jquery 而不是在 ajax 成功回调中使用.trigger()

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

}
于 2013-10-17T07:46:58.283 回答
-1
  1. 将 jquery 包含到您的 html 中
  2. 使用 $.ajax() 将表单数据发送到您的 asp 并相应地处理 json。

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

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

于 2013-10-17T06:01:12.727 回答