我正在运行一个没有数据的 Node 服务器。我想将数据推送到服务器，然后在单击按钮时再次将其取下。我尝试过其他示例，但我对 ajax 请求很陌生，我想了解我正在编写的代码这是到目前为止我所拥有的:
***script.js(Client file)***
$(document).ready(function() {
$.ajax({
url: 'http://localhost:8080',
dataType: "jsonp",
data: '{"data": "TEST"}',
type: 'POST',
jsonpCallback: 'callback',
success: function (data) {
var ret = jQuery.parseJSON(data);
console.log(data)
console.log('Success: ')
},
error: function (xhr, status, error) {
console.log('Error: ' + error.message);
},
});
$('#button').click(function(){
$.ajax({
url: 'http://localhost:8080',
dataType: "jsonp",
type: 'GET',
jsonpCallback: "callback",
success: function (data) {
var ret = jQuery.parseJSON(data);
console.log(data)
console.log('Success: Kick Ass!')
},
error: function (xhr, status, error) {
console.log('SOMETHING HAS GONE WRONG :(');
},
});
});
});
***Index.js(Server File)***
var http = require('http');
var util = require('util')
http.createServer(function (req, res) {
console.log('Request received: ');
util.log(util.inspect(req)) // this line helps you inspect the request so you can see whether the data is in the url (GET) or the req body (POST)
util.log('Request recieved: \nmethod: ' + req.method + '\nurl: ' + req.url) // this line logs just the method and url
res.writeHead(200, { 'Content-Type': 'text/plain' });
req.on('data', function (chunk) {
console.log('GOT DATA!');
});
res.end('callback(\'{\"msg\": \"OK\"}\')');
}).listen(8080);
console.log('Server running on port 8080');
请帮忙。非常感谢!
最佳答案
我实现了一个服务器来满足您显示索引 html 的请求，将用户保存在服务器内存中，并将用户(存储在内存服务器上)发送到客户端。
我的 index.js 文件如下所示:
var http = require('http');
var url = require('url');
var querystring = require('querystring');
var fs = require('fs');
var server = http.createServer();
var userStoredInMemory = {};
// listening requests from clients
server.on('request', function (request, response) {
var currentRoute = url.format(request.url);
var currentMethod = request.method;
var requestBody = '';
switch (currentRoute) {
// serving the html index to client
case '/':
fs.readFile(__dirname + '/index.html', function (err, data) {
var headers = {
'Content-Type': 'text/html'
};
response.writeHead(200, headers);
response.end(data);
});
break;
// handling requests from client with route /api/user
case '/api/user':
// if request is a POST, then the user is sending a user
if (currentMethod === 'POST') {
// reading the body of the request
request.on('data', function (chunk) {
requestBody += chunk.toString();
});
// once the body of the request was loaded
request.on('end', function () {
// saving the user sent on the request body
userStoredInMemory = querystring.parse(requestBody);
// responding to the user
var headers = {
'Content-Type': 'text/plain'
};
response.writeHead(200, headers);
response.end('User was already stored.');
});
}
// if request is a GET, then the client is requesting
// to see the user stored.
else if (currentMethod === 'GET') {
var headers = {
'Content-Type': 'application/json'
};
response.writeHead(200, headers);
response.end(JSON.stringify(userStoredInMemory));
}
break;
}
});
server.listen(8080, function () {
console.log('server up and running at 8080 port');
});
索引 html 文件如下所示:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Hello World!</h1>
<div>
<h1>Sending User</h1>
<form id="userForm">
<label for="name">Name</label>
<input id="name" name="name"/>
<br/>
<label for="age">Age</label>
<input id="age" name="age"/>
<br/>
<input type="submit" value="Send"/>
</form>
</div>
<br/>
<br/>
<div>
<h2>Click the button below for getting User from server and showing it</h2>
<button id="getUserButton">Get User</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
$('#userForm').submit(function (e) {
var user = {
name: $('input[name=name]').val(),
age: $('input[name=age]').val()
};
$.ajax({
type: 'POST',
url: 'http://localhost:8080/api/user',
data: user
})
.done(function (data) {
// clear form
$('input[name=name]').val('');
$('input[name=age]').val('')
alert(data);
});
e.preventDefault();
});
$('#getUserButton').click(function (e) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/api/user'
})
.done(function (data) {
alert(JSON.stringify(data));
});
});
});
</script>
</body>
</html>
但是看看在创建 HTTP 服务器时使用框架时代码和复杂性如何降低，在本例中为 Express.JS，首先安装 express和 body parser :
所以我的 index.js 看起来像:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var userStoredInMemory = {};
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/api/user', function (req, res) {
res.json(userStoredInMemory);
});
app.post('/api/user', function (req, res) {
userStoredInMemory = req.body;
res.send('User was already stored from express.');
});
app.listen(8080, function () {
console.log('server up and running at 8080 port');
});
关于javascript - Node.js Ajax 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30777010/