NodeJS: Как иметь несколько методов для сообщения

Я пытаюсь сделать итеративную форму с помощью nodejs.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 намного позже на странице. Это можно исправить, загрузив jQuery до тэга script.

Как только это будет сделано, вы заметите, что кнопка все еще не работает. Это связано с тем, что script внутри head выполняется до завершения остальной части документа, т.е. содержимого 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: Как иметь несколько методов для сообщения

ответ

Смежные вопросы