如何使用jquery发出POST请求?

时间:2017-05-24 09:10:31

标签: jquery reactjs

我很难向我的休息api发出POST请求。我尝试使用Postman并且它可以工作但是通过代码我得到了错误。 所以我在localhost:3000上运行我的休息api,在localhost:8080上运行我的反应应用程序。 所以这是一个正在运行的脚本:

"scripts": {
"start": "webpack-dev-server --open",
"build": "NODE_ENV='production' webpack -p",
"build:prod": "webpack -p",
"deploy": "npm run build && firebase deploy",
"firebase-init": "firebase login && firebase init",
"server": "nodemon index.js",
"dev":"concurrently \"npm run start\" \"npm run server\""


},

我正在使用npm run dev运行我的应用。 现在我的server.js(在我的例子中是index.js)看起来像这样:

const express = require("express");
const routes = require("./routes/api"); 
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

const app = express();

mongoose.connect("mongodb://localhost/blog");
mongoose.Promise = global.Promise;

app.use(express.static("src"));
app.use(bodyParser.json());

app.use("/api", routes);

app.use(function (err, req, res, next) {
    res.status(422).send({error: err.message});
});
var PORT = 3000;
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', "*");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
}  
app.use(allowCrossDomain);  
app.listen(process.env.port || PORT, function () {
    console.log("Now listening for requests on localhost:"+PORT);
    console.log(process.env.PORT);
})

和我的api.js看起来像

const express = require("express");
const router = express.Router();
const Post = require("../models/post");  

router.get("/posts", function (req, res, next) {
    Post.find({})
        .then(function (posts) {
            res.send(posts);
        });
});
router.post("/posts", function (req, res, next) {
    Post.create(req.body)
        .then(function (post) {
            res.send(post);
        }).catch(next);
        console.log(req.url);
});
module.exports = router;

最后我的功能看起来像这个

handleAdd(){
    var dataaa = {"text":"This is my first post!"}
$.ajax({ 
    type:"POST",
    url:" http://localhost:3000/api/posts",
    data: JSON.stringify(dataaa), 
    contentType: 'application/json',
    success: function(res) {
        console.log(res);
        console.log("Added");
    }.bind(this),
    error: function(xhr, status, err) {
        console.error(url, status, err.toString());
    }.bind(this)
}); 
}

我收到错误http://localhost:3000/api/posts 422 (Unprocessable Entity),我被困在这里差不多3天...... 那么如何使这两个端口3000和8080通信,所以我可以正常工作?任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

自己解决了。所以错误发生在我正在传递的领域

handleAdd(){
        var dataaa = {"description":"This is my first post!"}
    $.ajax({ 
        type:"POST",
        url:"http://localhost:3000/api/posts/",
        data: JSON.stringify(dataaa), 
        contentType: 'application/json',
        success: function(res) {
            console.log(res);
            console.log("Added");
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(xhr, status, err.toString());
        }.bind(this)
    });  
    }

这现在有效!而不是" text"我的dataaa对象中的字段应该是" description"。我收到了url is not defined,因为console.error(url, status, err.toString());应该是console.error(xhr, status, err.toString()); ... xhr而不是网址。所以,当我改为xhr时,我可以扩展,看到那个错误就在我传递字段时,因为"描述"字段是必需的,我得到了那个错误。只需更改" text"到"描述"并且工作了!