2017-09-26 180 views
0

如何在瀏覽器頁面上顯示錶單的輸出,而不僅僅是在控制檯上顯示?發送瀏覽器響應

這裏是我的代碼:

var express = require('express') 
var bodyParser = require("body-parser"); 
var app = express() 
var http = require('http'); 

app.get('/', function(request, response, next) { 
    response.send("My Server"); 
}); 

app.use(express.static('public')) 


app.use(bodyParser.urlencoded({ extended: false })); 


app.post('/users', function (req, res, next) { 
    let username = req.body.name; 
    let password = req.body.password; 

    console.log("Just received POST data for users endpoint!"); 
    console.log(`Data includes: ${username}, ${password}`); 
}); 
+0

不要忘記分號 –

回答

0

假設你已經配置在服務器SISE這條路線:

app.post('/users', function (req, res, next) { 
    let _username = req.body.name; 
    let _password = req.body.password; 
    res.send({username: _username, pwd: _password}); 
}); 

而且,客戶端女士,你使用jQuery和你做的異步請求到服務器這個HTML表單:

<form name="module"> 
    <p>Username</p> 
    <p><input type="text" name="username" id="username"></p> 
    <p>Password</p> 
    <p><input type="text" name="password" id="password"></p> 
    <input type="button" id="submit" value="Send"> 
</form> 

<div id="result"></div> 

你可以做一個POST請求,並解析第e以這種方式響應數據:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#submit").click(function(){ 
    var _username= $("#username").val(); 
    var _password= $("#password").val(); 
    $.ajax({ 
     type: "POST", 
     url: "<YOUR_NODEJS_SERVER_URL>", 
     data: '{"username":_username, "password": _password}', 
     contentType: "application/json", 
     dataType: 'json', 
     success: function(response) 
     { 
     $("#result").html(response.username + "<br/>" + response.pwd); 
     }, 
     error: function(error) 
     { 
     alert(error); 
     } 
    }); 
    }); 
}); 
</script>