如何在不重新加载页面的情况下提交表单时使用 JQuery Ajax 发送请求答案

【问题标题】：How to send a request using JQuery Ajax when submitting a form without reloading the page如何在不重新加载页面的情况下提交表单时使用 JQuery Ajax 发送请求
【发布时间】：2012-12-26 03:20:05
【问题描述】：

我这里有一个要求用户输入值的表单。

<form id="result" name="result" action="/HelloStruts2/views/register.action" method="post">
    <label>UserName</label>
    <input type="text" name="userBean.username" value="" id="result_userBean_username"/>
    <input type="submit" id="registerSubmit" value="Submit"/>

</form>

这是我的脚本。

$(document).ready(function(){
     $('#registerSubmit').live('click',function(){
         alert("XD");
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",
             //pass the data           
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                 //if process.php returned 1/true (send mail success)
                $('#result').html(html);       
             }       
         });
     })
})

当我提交表单时，表单正在被成功验证，而不是发送请求，整个页面正在重新加载或刷新，如何防止这种情况发生？

更新我已经用这个更新了我的脚本。

$(document).ready(function(){
     $('#result').on('submit',function(e){
         e.preventDefault();
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",     
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                $('#content').html(html);       
             }       
         });
     })
})

但是当我第二次单击按钮时，页面正在重新加载而不是发送请求

【问题讨论】：

提交表单的方式不止一种，所以请不要绑定到可能不会实际用于提交的按钮。
#result 是否存在于#content 中？
具有 id 结果的表单是否存在于具有 id 内容的任何元素内？
我是这么认为的，看看我的编辑。

标签： jquery ajax forms jsp request

【解决方案1】：

要阻止它被提交（页面重新加载），请使用preventDefault();

但是，提交表单的方法不止一种，因此请不要绑定到实际上可能不会用于提交表单的按钮。在您的示例中，如果我在文本字段中按 Enter，则会在表单上触发提交；任何绑定到提交按钮的事件都不会被捕获，重要的脚本也不会被执行。

$(document).ready(function(){
     $('#result').live('submit',function(e){ // e is the event
           e.preventDefault(); // stop the event's default action
           alert("XD");
           ...

旁白：

live() 被贬值是有充分理由的。使用on()

如果表单已经存在（在执行 JS 时），只需替换 live()

$('#result').on('submit', function...

或者如果它是动态生成的，你必须绑定到已经存在的东西，#result 最终会在其中

$(document).on('submit', '#result', function()...

编辑

鉴于更新的代码和新问题，我怀疑带有 id 结果的表单存在于任何具有 id 内容的元素中，在这种情况下 on() 需要修复到已经存在的元素，正如我之前提到的。在这种情况下，#content 是合适的元素。

$('#content').on('submit', '#result', function()...

【讨论】：

为什么你更喜欢使用提交而不是点击？
动作绑定到表单而不是按钮。使用 on 'click' 意味着当用户在提交的表单中点击任何地方。
在您的示例中，如果我在文本字段中按回车键，则会在表单上触发提交；任何绑定到提交按钮的事件都不会被执行。
我做了你的建议，但如果我点击按钮两次，整个页面会重新加载。但在第一次提交时它正在工作。
不，它会破坏问题，但您可以将其添加到问题中

【解决方案2】：

添加一个可以使用“e”的事件变量

$('#registerSubmit').live('click',function(e){

并添加

e.preventDefault();

这将阻止页面重新加载。所以你有：

$(document).ready(function(){
     $('#registerSubmit').live('click',function(e){
         e.preventDefault();
         alert("XD");
         $.ajax({
             //this is the php file that processes the data and send mail
             url: "register.action", 
             //GET method is used
             type: "POST",
             //pass the data           
             //Do not cache the page
             cache: false,
             //success
             success: function (html) {              
                 //if process.php returned 1/true (send mail success)
                $('#result').html(html);       
             }       
         });
     })
})

【讨论】：

【解决方案3】：

    $('#registerSubmit').click(function(e){
        e.preventDefault();
    });

使用 jQuery .click 函数并设置 event.preventDefault() 以停止进入表单操作页面。

【讨论】：