首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么POST方法要向服务器发送两次表单数据?

为什么POST方法要向服务器发送两次表单数据?
EN

Stack Overflow用户
提问于 2015-01-17 15:35:30
回答 3查看 2.2K关注 0票数 1

为什么这个表单要发送两次数据?另外,第二次,数据是“未定义的”。

表格:

代码语言:javascript
运行
复制
<form action="/loginPage" method="POST" >

        Username: <input type="text" id="username"> <br><br>
        Password: <input type="text" id="password"> <br><br>

        <input type="submit" id="Login" value="Login" > 

    </form>

客户端脚本:

代码语言:javascript
运行
复制
$(document).ready(function(){

    $('form').submit(function(event){

    //event.preventDefault(); This prevents from sending data twice, but     then the page doesn't redirect to "Hi, <username>"

      $.post("/loginPage",{username: $("#username").val(),password: $("#password").val()}, function(data){
            ;
        });

    });
  });

服务器端脚本:

代码语言:javascript
运行
复制
app.post('/loginPage', function(req, res) {

var username = req.body.username;
console.log("Now, "+username);
res.send("Hi, "+username);

//res.sendFile(__dirname + '/lobby.html');
});

这是我在运行以下代码时得到的输出:

代码语言:javascript
运行
复制
Hi, Sho
Hi, undefined

在过去的一天里,我都被困在这个地方了。请帮帮我。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-01-17 15:39:35

当您第一次提交时,jQuery触发并通过AJAX发送帖子。第二个提交是HTML表单的触发。您希望阻止HTML表单提交并使用自定义处理程序。

获得undefined的原因是在表单中的输入中没有name属性。

您应该在return false;处理程序中使用jQuery来防止表单触发,并对响应数据进行处理。

票数 6
EN

Stack Overflow用户

发布于 2015-01-17 15:38:46

您的代码是通过ajax发布的,但它并不妨碍普通浏览器发布表单的操作。您不会从普通表单post中获得任何参数,因为您的<input>元素没有"name“属性。

您可以从"submit“处理程序中return false;以防止正常的表单提交。

票数 3
EN

Stack Overflow用户

发布于 2019-07-19 11:19:09

尝试这样做:在onsubmit的表单中返回false,以防止它提交两次<form action="/loginPage" method="POST" onSubmit="return false" >

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28001065

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档