使用$ .ajax发布将数据发送到node.js服务器

Question

First of all my questions might get you relate to others but I have got many solutions but they did not work. So I am posting my problem hope you guys can help me.!

I have created two file posts.ejs and app.js(routes implemented in this file).

Post.ejs

Ajax call:-

 function SaveLocalNews(postData, cb) {

        var headerSetting = {
            "api-key": 1,
            "UDID": getUDID(),
            "device-type": getDeviceType(),
            "Authorization": "Authorization"
        };
        var requestMedia = $.ajax({
            url: "/posts",
            type: "POST",
            data: postData,
            dataType: "json",
            cache: false,
            processData: false,
            contentType: false,
            headers: headerSetting
        });

        requestMedia.done(function (data) {
            if (data.status) {
                alert_message("success");
            } else {
                alert_message("fail" + "success");
                // TODO: Handle not uploaded media
            }
            return;
        });
        requestMedia.fail(function (jqXHR, textStatus) {
            // TODO: Handle not uploaded media
            alert_message("fail");
            return
        });

}

App.js

var express = require("express"),
app = express(),
bodyParser = require("body-parser"),
mysql = require("mysql");

var session = require('express-session');

app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));

app.use(express.static(__dirname + '/public'));

app.post("/posts",  function (req, res) {
//I am not getting body/data what I have passed in ajax request. 
    console.log(req.body); // Output:-  {}
});

I hope you clear with my problem.

Answer 1

It seems that you need to make at least few changes:

On the server side

add app.use( bodyParser.json());

---

On the client side

Update your ajax to:

  var requestMedia = $.ajax({
        url: "/posts",
        type: "POST",
        data: JSON.stringify(postData),
        dataType: "json",
        cache: false, 
        contentType: "application/json",
        headers: headerSetting
    });

---

Reasons for these changes

I would change the ajax to data: JSON.stringify(postData), instead of using processData: false, . I think the two are basically equivalent, I just prefer this way personally.

From the docs

data

Type: PlainObject or String or Array

Data to be sent to the server. It is converted to a query string, if not already a string . It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

---

change your ajax to contentType: 'application/json', since false will cause it to set no content type header and might be causing node to not see the post body correctly.

From the docs

contentType (default: 'application/x-www-form-urlencoded; charset=UTF-8')

Type: Boolean or String

When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it is always sent to the server (even if no data is sent). As of jQuery 1.6 you can pass false to tell jQuery to not set any content type header.

---

You also want to change dataType: false, to dataType: 'json', since your done handler is looking for data.status which means you are in fact expecting json to be returned (even though your server side code doesnt seem to do that yet)

From the docs

dataType (default: Intelligent Guess (xml, json, script, or html))

Type: String

The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response (an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string).

---

If you updated to use JSON.stringify(postData) , remove the processData: false, .

From the docs

processData (default: true)

Type: Boolean

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.