javascript - NodeJS : How to have multiple methods for post-6ren

javascript - NodeJS : How to have multiple methods for post

转载作者：行者123 更新时间：2023-12-02 15:02:21

25

4

我正在尝试使用nodejs制作一个迭代表单。

这是我的网页

<!DOCTYPE html>
 <html>
 <script>
     $('#ping-button').click(function() {
        $.ajax({
            type: 'POST',
            url: 'http://localhost:3000/process_test'
        });
    });
 </script>
    <body>
        <form action="http://127.0.0.1:3000/process_get" method="GET">
        First Name: <input type="text" name="first_name">  <br>

        Last Name: <input type="text" name="last_name">
        <input type="submit" value="Submit">
        </form>
        <br>
        <form action="http://127.0.0.1:3000/process_post" method="POST">
        Team: <input type="text" name="team">  <br>

        Player: <input type="text" name="player">
        <input type="submit" value="Submit">

        <br><br>

        <button id='ping-button'>Ping</button>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        </form>
    </body>
</html>

这是我的 app.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');

// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })

app.use(express.static('test'));

app.get('/index.html', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})

app.get('/process_get', function (req, res) {

   // Prepare output in JSON format
   response = {
       first_name:req.query.first_name,
       last_name:req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})

app.post('/process_test', urlencodedParser, function (req, res) {


   console.log("Ping");
   res.end(JSON.stringify("Ping"));
})

app.post('/process_post', urlencodedParser, function (req, res) {

   // Prepare output in JSON format
   response = {
       team:req.body.team,
       player:req.body.player
   };
   console.log(response);
   res.end(JSON.stringify(response));
})



var server = app.listen(3000, function () {

  var host = server.address().address
  var port = server.address().port

  console.log("Example app listening at http://%s:%s", host, port)

})

所以我有两个表单和一个按钮。第一个表单与 process_get 方法绑定(bind)，第二个表单与 process_post 方法绑定(bind)，按钮与 process_test 方法绑定(bind)。

两种形式都给出了预期的结果。当我单击按钮时，它会转到 process_post 方法，而不是 process_test

为什么会发生这种情况？

最佳答案

Ping 按钮之所以将表单提交到/process_post是因为它位于表单内部，并且由于错误而未设置点击处理程序。

如果您在浏览器中打开控制台，您将看到Uncaught ReferenceError:$未定义。这是因为您在代码中使用了 $，但您稍后在页面中包含了 jQuery。您可以通过在 script 标记之前加载 jQuery 来解决此问题。

完成后，您会发现该按钮仍然不起作用。这是因为 head 内的 script 在文档的其余部分完成之前执行，即。 body 内容还不存在，$('#ping_button') 将找不到任何内容。您可以通过将代码包装在 $(document).ready(function() {//code here }); 中来解决此问题，以便在加载整个页面后执行它。

不过，单击该按钮会将您发送至 /process_post，因为单击事件不会在您的单击处理程序中停止。返回 false 或使用 e.preventDefault() 禁用浏览器默认操作。

所有这些结合 head 部分(丢失的)将变成

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $('#ping-button').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'http://localhost:3000/process_test'
            });
            return false;
        });
    }); 
    </script>
</head>
<body>
<!-- Rest of your page -->
</body>
</html>

关于javascript - NodeJS : How to have multiple methods for post，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35345067/

25

4

0

文章推荐：使用 stringr 和 dplyr 重命名所有数据框列

文章推荐： java - 分割字符串

文章推荐： WPF 与分辨率无关

jquery - 从文件输入中获取文件名或文本 multiple=multiple
我正在尝试设计我的输入:文件。以下 SO 问题让我完成了 95% 的任务。区别在于我使用的是 HTML5 multiple=multiple 属性。 How to style "input file"
Python Pandas : Store multiple time series of variable length for multiple attributes for multiple users
我一直在进行一项实验，其中多个调查参与者使用可穿戴技术聆听多首音乐来跟踪多条信息，两个例子是 BPM(心率)和 T(体温)。目标是衡量每首音乐(以用户反馈为特征)对人类情感的影响。目前，所有数据都
PHP : multiple inputs into other multiple inputs
我使用 jquery 添加/删除输入我使用append为日期/收入添加多个Tr 我还使用另一个附加来添加多个 td 以获取同一日期 Tr 中的收入我添加多个日期输入，并在此表中添加多个收入输入我
安卓工作室 : Multiple APKs for Multiple Modules
在 Android 中，有一种方法可以为项目中的所有模块生成签名的 APK。例如。我有以下项目 Project -- Library Module -- Module 1 -- Modul
mysql - 数据库设计: How to query multiple to multiple table
我有一个用于网站展示的系统。展览数据可能来自差异表中的多个数据。喜欢这个设计: Table [ExhibitionType] used for differentiate category. Ta
ios - 什么是最佳实践 : Multiple UIViews or Multiple UIViewControllers
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
iOS : Handle multiple uilocalnotification with multiple same viewcontroller
我正在使用 UILocalnotification...收到通知时，当应用程序处于事件模式时我打开 viewcontroller...但是如果同时收到多个通知...我如何打开多个 viewcontro
PHP/MySQL : UPDATE multiples values with multiples WHERE
我遇到的问题是一个策略浏览器游戏，它有 7 种类型的值。问题如下: 我在 $_POST 中获得了 7 个不同的值，包括从索引 unit_1 到索引 unit_7。这 7 个值是 0 到 20 之间的整
python : How to search for multiple paterns in multiple files
这个问题已经有答案了: Search Large Text File for Thousands of strings (3 个回答) 已关闭10 年前。我想在多个文件上“grep”多个正则表达式。
javascript - 大型数据集的单个 + SQL 查询搜索
我正在尝试根据进行搜索我通过运行代码从 select 中获取值: for($i=0;$i= '$age_from' AND users.user_age = '$age_from' AND u

首页

博学

6Ren·AI

商城

javascript - NodeJS : How to have multiple methods for post