NodeJS：如何使用多种发布方法

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来解决此问题。

完成后，您会注意到该按钮仍然不起作用。 这是因为head内部的script是在文档的其余部分完成之前执行的。 body内容尚不存在，并且$('#ping_button')将什么也找不到。 您可以通过将代码包装在$(document).ready(function() { // code here }); 因此，一旦整个页面加载完毕，就会执行它。

不过，单击按钮会将您发送到/process_post因为click事件并未在您的点击处理程序中停止。 返回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 个解决方案

解决方案1
2 已采纳 2016-02-11 18:40:15

NodeJS：如何使用多种发布方法

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-02-11 18:40:15

解决方案1
2 已采纳 2016-02-11 18:40:15