Question

我正在尝试使用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方法绑定，第二个表单与process_post方法绑定，按钮与process_test方法绑定。

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

为什么会这样？

Answer 1

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

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

完成后，您会注意到该按钮仍无效。这是因为script内部head在文档的其余部分完成之前执行，即。 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>

NodeJS：如何有多种发布方法

1 个答案: