提交 AJAX 表单以表达 api - 位置 0 处 JSON 中的 Unexpected token #答案

【问题标题】：Submit AJAX form to express api - Unexpected token # in JSON at position 0提交 AJAX 表单以表达 api - 位置 0 处 JSON 中的 Unexpected token #
【发布时间】：2018-01-27 15:28:49
【问题描述】：

我在 Node.js express 中有一个非常基本的 rest API。

我的网站上有一个非常简单的表单，我想将数据发布到我的 API。

我收到了一个跨域请求错误，所以我记得使用 cors 中间件。

现在，每当我尝试提交表单时，都会收到错误“Unexpected token # in JSON at position 0”。

我整天都在寻找解决方案，但我找不到问题的原因或解决方案。

我的表单页面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>

<header>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
</header>
<div class="container-fluid">
    <div class="card">
        
<div class="card">

    <form id="submitableform" name="submitableform" method="POST" action="http://localhost:3033/listings">
        <div class="form-group">
            <label for="formGroupExampleInput">Name</label>
            <input id="name" name="name" type="text" class="form-control" placeholder="Enter item name..."/>
        </div>
        <button type="submit" name="submit" class="btn btn-primary" value="Submit">submit</button>
    </form>

    <script>
        $(document).ready(function() {
            let form = $("#submitableform");
            form.submit(function (event) {
                event.preventDefault();
                $.ajax({
                    type: $(form).attr('method'),
                    url: $(form).attr('action'),
                    dataType : 'json',
                    data: JSON.stringify($(form).serialize()),
                    headers: {
                        'Content-Type':'application/json'
                    },
                    success: function (result) {
                        console.log(result);
                    },
                    error: function (xhr, resp, text) {
                        console.log(xhr, resp, text);
                    }
                });
            });
        });
    </script>
</div>
    </div>
</div>

<footer>
    footer.com
</footer>


</body>
</html>

我的 express 的 app.js 文件如下：

var express = require('express');
var db = require('../datasource/mongodb.js');
var app = express();
var cors = require('cors');

var Routers = require('./routers');
app.use(cors());
app.use(Routers);

module.exports = app;

Mr api 路由器：

const express = require('express');
const router = express.Router();
const ListingController = require('./listing_controller');
const bodyParser = require('body-parser');

router.use(bodyParser());

router.post('/listings', (req, res) => {
    ListingController.createUser(req, res);
});

module.exports = router;

最后，我只想显示表单输出的控制器：

const bodyParser = require('body-parser');

module.exports = {

    createUser: (req, res) => {
        res.send("request body : " + req.body);
    }
};

我找到了讨论类似错误的帖子，但我找不到任何与此匹配的内容或有效的解决方案。

有人有什么建议吗？提前致谢。

【问题讨论】：

标签： javascript node.js ajax forms express

【解决方案1】：

好的，所以问题源于此.... 我正在使用dataType : 'json' 并将Content-Type 标头设置为application/json。由于某种原因，这引起了一些冲突。我很惊讶，但是嘿嘿，它解决了这个问题。

【讨论】：