提交表单会触发 ajax 调用，该调用会在成功时发布到操作页面

Posted 2023-05-08

【中文标题】提交表单会触发 ajax 调用，该调用会在成功时发布到操作页面

【英文标题】：Submitting a form triggers an ajax call which posts to the action page on success

【发布时间】：2012-08-05 15:37:18

【问题描述】：

我有一个带有用户名和密码的登录表单。 我与用户一起向 Web 服务发帖并作为参数传递，然后我取回该用户的 ID。

我想要实现的是，在提交表单时，会进行 ajax 调用，该调用依次填充 ID 字段（我需要），然后使用 $('#form1').post(); 提交表单。

为了防止默认行为，我在.submit() 事件的开头有一个return false;。

$('#form1').submit(function() $('#sajax-loader').show(); $.ajax( 类型：“发布”， contentType: "应用程序/json; charset=utf-8", 数据：'user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"', url: "URL.asmx/validate", 数据类型：“json”， 成功：函数（数据） $('#id').val(data.d); $('#sajax-loader').hide(); $('#form1').post(); $('#login-notification').show(); , 错误：函数（错误） $('#login-notification').html("发生错误" + err); ); 返回假； );

显然这是错误的方法，因为我在提交时没有得到任何响应。

谁能指引我正确的方向？就如何调整我在这里的提交功能给出一些建议，或者可能是一种完全不同的更实用的方法？

【问题讨论】：

您是否在 fiddler 或浏览器会话检查器中看到请求发出？

@imparator 我想知道你为什么有这个$('#form1').post();？你看过控制台吗？有什么错误吗？

将其更改为 ~document.getElementById("form1").submit()~ 并且有效

【参考方案1】：

从return false 开始将在您return 的位置停止执行submit() 函数，并且其余代码不会执行。所以，把你的return false放在最后。

另外，使用 .preventDefault() 将停止默认的表单提交行为。

$('#form1').submit(function(e)  

        // instead of return false
        // use e.preventDefault()           

        e.preventDefault();
        $('#sajax-loader').show();        
        $.ajax(
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: 'user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"',
            url: "URL.asmx/validate",
            dataType: "json",
            success: function (data) 
                $('#id').val(data.d);                
                $('#sajax-loader').hide();                                             
                $('#form1').post();
                $('#login-notification').show();                                
            ,
            error: function (err) 
                $('#login-notification').html("An Error Occured " + err);
            
        );
    );

还有一件事

代替

data: 'user:"' + $("#user").val() + '",pass:"' + $("#pass").val() + '"',

你可以使用：

data: user: $("#user").val() ,pass: $("#pass").val() ,

【讨论】：

问题不在于他返回 false，问题在于他在语句的开头使用了 return false，如果他将它移到代码的末尾它会起作用正如预期的那样......

@thecodeparadox：来自 jquery 文档“我们可以通过在事件对象上调用 .preventDefault() 或从我们的处理程序返回 false 来取消提交操作。”返回 false 做同样的事情。

#ohgodwhy：我将 return false 移到最后，但它仍然没有发布到所需的页面......只是想知道 $('#form1').post(); 是否发起帖子？

#thecodeparadox：我仍然无法让这个工作...... ~$('#form1').post();~ 似乎根本没有发布