NodeJS :如何有多种发布方法

NodeJS : How to have multiple methods for post

本文关键字：布方法 方法 NodeJS      更新时间：2023-09-26

我正在尝试使用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>

这是我的应用程序.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方法相关联，第二种形式与process_post方法相关联，按钮与process_test方法相关联。

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

为什么会这样？

Ping button将表单提交到/process_post的原因是因为它位于表单内部，并且由于错误而未设置单击处理程序。

如果在浏览器中打开控制台，您将看到 Uncaught ReferenceError: $ is not defined .这是因为您在代码中使用了$，但您在页面的后面才包含 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>
相关文章：