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

Submitting a form triggers an ajax call which posts to the action page on success

本文关键字：调用 成功 操作 表单 ajax 提交      更新时间：2023-09-26

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

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

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

$（'#form1'）.submit（function（） {                $（'#sajax-loader'）.show（）;               $.ajax（{            类型："开机自检"，            内容类型："应用程序/json;字符集=UTF-8"，            data： '{user："' + $（"#user"）.val（） + '"，pass："' + $（"#pass"）.val（） + '"}'，            网址： "URL.asmx/validate"，            数据类型："json"，            成功：函数（数据）{                $（'#id'）.val（data.d）;                               $（'#sajax-loader'）.hide（）;                                                            $（'#form1'）.post（）;                $（'#login-notification'）.show（）;                                           },            错误： 函数 （错误） {                $（'#login-notification'）.html（"发生错误" + err）;            }        });        返回假;    });

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

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

开头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() },

相关文章：