Question

我正在尝试为用户创建一个简单的文本框输入表单，以输入他们的名字和姓氏，然后单击提交。我希望在我的SQL Server中更新数据。每当我尝试发出请求时，都会出现错误

JSON的意外令牌S在位置0

这是我正在使用的代码：

server.js ：

var express = require('express');
var app = express();
var sql = require("mssql");

var config = {
    user: 'username',
    password: 'password',
    server: 'localhost', 
    database: 'Master' 
};

app.post('/', function(req, res) {
    res.set('Access-Control-Allow-Origin', '*');
    var user = req.body;
    var connection = new sql.ConnectionPool(config, function(err) {
    var request = new sql.Request(connection);
    request.query('INSERT INTO Persons SET ?', user);
    });
    res.end('Success');
  });

app.listen(5000, () => {console.log('Server is running..')});

这是react的代码：

import React, { Component } from 'react';

class postData extends Component {

    constructor() {
        super();
        this.state = { user: {} };
        this.onSubmit = this.handleSubmit.bind(this);
      }
      handleSubmit(e) {
        e.preventDefault();
        var self = this;
        // On submit of the form, send a POST request with the data to the server.
        fetch('http://localhost:5000', { 
            method: 'POST',
            data: {
              FirstName: self.refs.FirstName,
              LastName: self.refs.LastName
            }
          })
         .then(function(response) {
            //this is the line that is giving me the error
            return response.json()
          }).then(function(body) {
            console.log(body);
          });
          }
      render() {
        return (
          <form onSubmit={this.onSubmit}>
            <input type="text" placeholder="First Name" ref="FirstName"/>
            <input type="text" placeholder="Last Name" ref="LastName"/>
            <input type="submit" />
          </form>
        );
      }
}

export default postData;

我从反应方面得到了错误。不确定如何设置。有什么想法我可能会搞砸吗？谢谢!!!

Answer 1

通常，您会收到该错误，因为响应是字符串而不是JSON对象。尝试更改快递：

res.send({ message: 'Success'})

我也不确定您是否正确使用了引用。我可以尝试使用on change函数将这些值置于状态：

handleChange = (e) => {
    this.setState(
        {
            [e.target.name]: e.target.value
        }
    )
}

并将您的输入更改为：

<input type="text" placeholder="First Name" name="FirstName" onChange={this.handleChange}/>

然后在您的提交功能中：

FirstName: this.state.FirstName

希望有帮助

Answer 2

您的应用程序传递来表达的数据只是原始文本。尝试将body-parser添加到您的express应用程序中，然后解构传入的值。您可以手动将主体解析为JSON格式，但是包含body-parser会容易得多。 body-parser还可让您根据需要将请求的正文解析为其他格式。

将身体分析器添加到您的快速应用中：

const bodyParser = require('body-parser');
app.use(bodyParser.json());

然后在您的POST请求中，像这样解构主体：

const { firstName, lastName } = req.body;
let connection = new sql.ConnectionPool(config, function(err) {
    let request = new sql.Request(connection);
    request.query(/* Your query to insert these values */);
});
res.end('Success');

通过React向SQL Server发出POST请求

2 个答案: