MVC下$.post第一次提交依旧是get方式，第二次才是post，怎么回事

需求：在login页面输入userId和pwd，如果都输入，就跳转到Home页面，我最开始使用的是$.post方式
html代码：

 <form id='form1'>
    <input type="text" name='userId'/>
    <input type="text" name='pwd'/>
    <input type="submit" value="login"  id="btn"/>
</form>
Jquery代码：
 $(function(){
    $("#btn").click(function(){
        $.post(
                '/Home/CheckLogin',
                $("#form1").serialize(),
                function(data)
                {
                    windows.location.href=‘@url.Action("Index","Home")’;
                }
            )
    });
});

运行起来，输入了用户名和密码后，点击提交，能看到还是Get方式，浏览器的url上出现了？参数，第二次再提交，就可以跳转到home页面了，这是怎么回事呢？
我换了另一种提交方式 Ajax.beginForm()的方式，依旧是post，这回完全可以实现。但依旧比较困扰第一种方式，求高手解答！！！
javaScript的外部文件依次是
`
`

展开

收起

小旋风柴进 2016-06-01 10:49:11 2816 0

2 条回答

写回答

取消提交回答

我是小七

问题总能找到解决方案的
1、form元素的属性
- action 表单提交的后端地址，若没有设置这个属性，则默认为当前页面的地址
- method 表单提交的方式：post、get、put等，默认不设置为 get
```
    <form action="/login" method="post">
        <input type="text" name="userName">
        <button>submit</button>
    </form>
```
2、触发 form 表单提交的条件
在不使用js的前提下默认，当 form 表单中存在以下两种元素时会自动提交表单：
```
1）button 元素
    <button>submit</button>
2）input ，type=submit
<input type="submit" value="submit" >
```
由以上两点即可知道，您代码中的button 设置的type错误才导致两次请求。

3、顺序问题
我们将代码改为：

然后随便输入框输入内容，打开“网络”选项，点击按钮后：

由此可以看到代码先执行按钮的click事件，再执行 form 的提交。
2023-07-20 11:46:40

赞同 1 展开评论打赏

小旋风柴进

    $(function(){
     $("#btn").click(function(){
         $.post(
                 '/Home/CheckLogin',
                 $("#form1").serialize(),
                 function(data)
                 {
                     windows.location.href='@url.Action("Index","Home")';
                 }
             );
         return false;/////////阻止表单提交
     });
    });

要么

<input type="submit" value="login" id="btn"/>
改为type="button"

2019-07-17 19:22:52

赞同展开评论打赏

MVC下$.post第一次提交依旧是get方式，第二次才是post，怎么回事

相关文章

相关电子书