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

爲什麼會發生這種情況？

來源

2016-02-11 AbtPst

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>

來源

2016-02-11 18:40:15 vesse

完美！非常感謝:)現在它變得更有意義 – AbtPst

NodeJS：如何有多個方法發佈

回答

相關問題