2017-08-02 43 views
3

我目前正在嘗試構建簡單的在線論壇,人們可以發表評論;然而,我不確定我寫的是正確的做法。通過選擇type =「POST」提交表單後,Ajax是否自動調用?如何使用Node.js發送和獲取Node.js中的JSON數據到HTML中

我也不確定我是否在路由文件中寫入正確的程序。

這是我的代碼。

<!DOCTYPE> 
<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
// $(function(){ 
//  $("#target").submit(function(event){ 
//   event.preventDefault(); 
//   $.post("/users", function(data){ 
//    $("#result").html(JSON.stringify(data)); 
//   }); 
//  }); 
// }); 
//Not sure which way I should use ↑↓ 

$.ajax({ 
type: "GET", 
url: 'http://localhost3000/users', 
data: data, 
dataType: 'json' 
}) 

.done(function(data){ 
    console.log("GET Succeeded"); 
    $('#result').html(JSON.stringify); //What should I put after JSON.stringify? 
}); 

$(function(){ 
    $("#target").submit(function(event){ 
     $.ajax({ 
     type: "POST", 
     url: 'http://localhost3000/users', 
     data: data, 
     dataType: 'json' 
     }) 

     .done(function(data){ 
     console.log("POST Succeeded"); 
     $('#result').html(JSON.stringify); //What should I put after JSON.stringify? 
     }); 
    }); 
}); 



</script> 
</head> 
<body> 

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

<form action="/users" method="post" id="target"> 
    Username:<input type="text" name="username"> 
    <input type="submit" value="Post"> 
</form> 

</body> 
</html> 

這裏是我的路線文件

var express = require('express'); 
var bodyParser = require('body-parser'); 
var mongoose = require('mongoose'); 

var Users = require('../models/users'); 

var userRouter = express.Router(); 
userRouter.use(bodyParser.json()); 

userRouter.route('/') 

.get('/users', function (req, res, next) { 
     Users.find({}).then(function(user){ 
      res.json(user) 
     }).catch(next); 
}) 

.post(function(req, res, next){ 
// res.send("Confirmed"); 
    Users.create(req.body).then(function(user){ 
    res.send(user); 
    }).catch(next); 

    res.json(newUser); 
}); 

module.exports = userRouter; 

這裏是我的app.js

var express = require('express'); 
var path = require('path'); 
var favicon = require('serve-favicon'); 
var logger = require('morgan'); 
var cookieParser = require('cookie-parser'); 
var bodyParser = require('body-parser'); 
var mongoose = require('mongoose'); 

var url = 'my database'; 
mongoose.connect(url); 

mongoose.Promise = global.Promise; 

var db = mongoose.connection; 
db.on('error', console.error.bind(console, 'connection error:')); 
db.once('open', function() { 
    // we're connected! 
    console.log("Connected correctly to server"); 
}); 


var routes = require('./router/index'); 
var userRouter = require('./router/users'); 

var app = express(); 

// view engine setup 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'jade'); 

// uncomment after placing your favicon in /public 
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); 
app.use(logger('dev')); 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ extended: false })); 
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.use('/users', userRouter); 
//Error handler for user 
app.use(function(err, req, res, next){ 
    res.status(422).send({error: err.message}); 
}); 

//catch 404 and forward to error handler 
app.use(function(req, res, next) { 
    var err = new Error('Not Found'); 
    err.status = 404; 
    next(err); 
}); 

// error handler 
if (app.get('env') === 'development'){ 
    app.use(function(err, req, res, next){ 
    res.status(err.status || 500); 
    res.render('error', { 
     message: err.message, 
     error: err 
    }); 
    }); 
    }); 

app.use(function(err, req, res, next){ 
    res.status(err.status || 500); 
    res.render('error', { 
    message: err.message, 
    error: {} 
    }); 
}); 

module.exports = app; 

謝謝:)

+0

你指的是用戶按下'enter'當窗體處於焦點或點擊提交按鈕的那一刻? –

+0

我正在嘗試構建所有發表的評論均已在評論表單上方的論壇,並且當用戶單擊提交按鈕時,該評論也應發佈在其他人發佈的所有評論下。 – Asu

+0

哦。當提交按鈕被點擊 – Asu

回答

0

您的ajax帖子不會在提交表單時自動調用。然而,這就是說,瀏覽器發送一個post到你的表單標籤中的指定端點。

如果您需要在發佈帖子時自動顯示評論,那麼您可以在腳本中使用註釋的代碼塊。

另一種方法是做到以下幾點....

$(function(){ 
    $("#target").submit(function(event){ 
     // add code here to append the form data to the DOM 

     // dont call event.preventDefault() 

     // doing so will take advantage of the browser's 
     // post functionality while giving you a chance 
     // to handle the form data locally prior to the post 

    }); 
}); 
0

我建議postman鉻插件,它是一個restful api客戶端,你首先通過它調用api,然後如果api執行完美,你可以編寫th e阿賈克斯後其他。

+0

,如果你寫ajax文章,不要忘了讓節點服務器發送響應與Access-Control-Allow-Origin頭,因爲跨域不允許在js – godtree

+0

好吧,我會用 – Asu

相關問題