weixin_33704234 2015-06-11 09:37 采纳率: 0%
浏览 12

Node.js Ajax请求

I am running a node server that has no data on it. I want to push data up to the server and then take it down again on a button click.I've tried following other examples but I'm quite new to ajax requests and I want to understand the code that I'm writing this is what I have so far:

***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: 
method: ' + req.method + '
url: ' + 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');

Please help. Thanks so much!

  • 写回答

1条回答 默认 最新

  • bug^君 2015-06-11 13:55
    关注

    I implemented a server in a way to serve your requests of showing the index html, saving the user on server memory, and sending the user (stored on the memory server) to the client.

    My index.js file looks like this:

    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');
});

    And the index html file looks like this:

    <!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>

    But look how the code and complexity reduces when you use a framework when you are creating your HTTP Server, in this case Express.JS, first install express and body parser:

    so my index.js looked like:

    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');
});
    评论

报告相同问题？

悬赏问题

  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化
  • ¥15 Mirare PLUS 进行密钥认证？（详解）
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥20 想用ollama做一个自己的AI数据库
  • ¥15 关于qualoth编辑及缝合服装领子的问题解决方案探寻
  • ¥15 请问怎么才能复现这样的图呀