2

我这里有这个表单，需要用户输入一个值。

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

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

4

3 回答 3

4

要阻止它被提交（页面重新加载）使用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()...
于 2012-12-26T03:24:56.817 回答
1

添加一个可以使用“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);       
             }       
         });
     })
})
于 2012-12-26T03:23:07.207 回答
1 
    $('#registerSubmit').click(function(e){
        e.preventDefault();
    });

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

于 2012-12-26T03:37:26.020 回答