Question

我这里有这个表格，要求用户输入一个值。

<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);       
             }       
         });
     })
})

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

Answer 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()...

Answer 2

添加一个可以使用的事件变量＆＃34; e＆＃34;

$('#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);       
             }       
         });
     })
})

Answer 3

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

使用jQuery .click函数并将event.preventDefault（）停止转到表单操作页面。

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

3 个答案: