Question

我完全按照这两个教程，

在Rails中实现一个简单的注释系统。但是，我遇到了处理提交的问题。我实现了一个简单的AJAX POST请求来发送我的表单数据（作为状态）。它看起来像这样：

var CommentForm = React.createClass({
    handleChange: function(e) {
    var name, obj;
    name = e.target.name;
    return this.setState((
      obj = {},
      obj["" + name] = e.target.value,
      obj
    ));
  },
    handleSubmit: function(e) {
        e.preventDefault();
        var author = React.findDOMNode(this.refs.author).value.trim();
        var text   = React.findDOMNode(this.refs.text).value.trim();
        if(!text || !author) {
            return;
        }
        $.post(this.props.postUrl, {comment: this.state}, null, "application/json");
        React.findDOMNode(this.refs.author).value = '';
        React.findDOMNode(this.refs.text).value = '';
    },
    render: function() {
        return (
            <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" name="author" onChange={this.handleChange} />
        <input type="text" placeholder="Say something..." ref="text" name="text" onChange={this.handleChange} />
        <input type="submit" value="Post" />
      </form>
        );
    }
});

当我检查控制台时，看起来它正在传递到正确的路线和右侧参数，除了没有authenticity_token参数。这是控制台中的内容的屏幕截图。

在我提供的第一个链接中，据说jquery_ujs处理生成并将真实性令牌传递给Ajax POST。但是，在我的情况下，情况并非如此。我错过了什么？

修改我有几个答案可以解决我的问题。但是，我仍然很好奇我的代码和本教程中的代码之间的区别是什么？

Answer 1

这是因为您render方法中缺少传递authenticity_token的方法。您可以禁用真实性检查（不推荐），也可以使用真实性令牌提交呈现的表单。

在这种情况下，我建议使用Gon将控制器变量干净地传递给JS：https://github.com/gazay/gon

安装时：

在您的控制器方法中：

gon.authenticity_token = form_authenticity_token

在你的反应课中：

<form className="commentForm" onSubmit={this.handleSubmit}>
    <input type="hidden" name="authenticity_token" value={gon.authenticity_token}  />
    <input type="text" placeholder="Your name" ref="author" name="author" onChange={this.handleChange} />
    <input type="text" placeholder="Say something..." ref="text" name="text" onChange={this.handleChange} />
    <input type="submit" value="Post" />
</form>

Answer 2

您可以将authenticity_token属性添加到AJAX POST：

你可以替换这一行：

$.post(this.props.postUrl, {comment: this.state}, null, "application/json");

用这个：

$.post(this.props.postUrl, {
    comment: this.state,
    authenticity_token: $('meta[name=csrf-token]').attr('content')
  }, null, "application/json");

Answer 3

<强>解决。删除了

行

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

来自application.html.erb的

。事实证明，它在制作AJAX请求时会影响jquery_rails。

Rails不会生成真实性令牌

3 个答案: