提交表单以触发 ajax 请求

Submitting a form to trigger an ajax request

本文关键字：ajax 请求 表单 提交      更新时间：2023-09-26

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

我看到了一个不使用<form>或<input>标签的示例。

是否有可能用<form>做我想做的事？

你会如何在html方面做到这一点，你会使用哪些javascript事件？

试试这个例子：
.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
            }
        });
    });
});

正如我从您的问题中的行中所理解的那样 - "然后我将切换到同一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>

成功后，您想打开 id 为 page-two 的Page 2。现在Page 2的链接在div Page 1 的<a>标签中。所以最后，与其在 ajax 成功回调中使用 location.href，不如使用 jquery .trigger() 

success: function()
{
  $('a#toPage2').trigger('click',function(){})
}
  1. 将 jQuery 包含在您的 HTML 中
  2. 使用 $.ajax（） 将表单数据发送到 ASP 并相应地处理 JSON。

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

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

相关文章：