使用React.js和Ajax

时间:2015-07-18 03:59:29

标签: ajax laravel-5 reactjs laravel-validation

我正在运行一个Laravel 5应用程序,它的主视图使用React.js进行渲染。在页面上,我有一个简单的输入表单,我正在使用Ajax处理(在没有页面刷新的情况下发回输入)。我在UserController中验证输入数据。我想要做的是在我的视图中显示错误消息(如果输入未通过验证)。

我还希望根据React.js代码中的状态(提交或未提交)显示验证错误。

如何使用React.js并且不刷新页面?

以下是一些代码:

React.js代码:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var SignupForm = React.createClass({
  getInitialState: function() {
    return {email: '', submitted: false, error: false};
  },

  _updateInputValue(e) {
    this.setState({email: e.target.value});
  },

  render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
      <div>
{this.state.submitted ? null :
                              <div className="overall-input">
                                  <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
                                      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

                                      <div className="button-row">
                                          <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
                                      </div> 
                                  </ReactCSSTransitionGroup>
                              </div>                            
}
      </div>
    )
  },

  saveAndContinue: function(e) {
    e.preventDefault()

    if(this.state.submitted==false) {
        email = this.refs.email.getDOMNode().value
        this.setState({email: email})
        this.setState({submitted: !this.state.submitted});

        request = $.ajax({ 
              url: "/user", 
              type: "post", 
              data: 'email=' + email + '&_token={{ csrf_token() }}',
              data: {'email': email, '_token': $('meta[name=_token]').attr('content')},
              beforeSend: function(data){console.log(data);},
              success:function(data){},  
        });


        setTimeout(function(){
             this.setState({submitted:false});
        }.bind(this),5000);

    }

  }
});

React.render(<SignupForm/>, document.getElementById('content'));

UserController中:

public function store(Request $request) {

    $this->validate($request, [
        'email' => 'Required|Email|Min:2|Max:80'
    ]);

    $email = $request->input('email');;

        $user = new User;
        $user->email = $email;
        $user->save();

    return $email;

}

感谢您的帮助!

1 个答案:

答案 0 :(得分:9)

根据Laravel文档,他们会在验证失败时发送422代码的回复:

  

如果传入请求是AJAX请求,则不会进行重定向   产生。相反,具有422状态代码的HTTP响应将是   返回到包含JSON表示的浏览器   验证错误

因此,您只需要处理响应,如果验证失败,则向状态添加验证消息,如下面的代码片段所示:

deleteToken()

之后,在&#39;渲染&#39;方法,只需检查是否设置了this.state.validationErrorMessage并在某处呈现消息:

deleteInstanceID()