如何使用Laravel中的Ajax调用将数据发布到数据库？

Question

我有一个订阅框：

我的目标是当用户输入电子邮件时，我想将其保存到我的数据库中。

我已经知道如何使用Laravel的表格发布。

通过Laravel形成POST

public function postSubscribe() {

    // Validation
    $validator = Validator::make( Input::only('subscribe_email'),

        array(

            'subscribe_email'  => 'email|unique:subscribes,email',
            )
        );

    if ($validator->fails()) {

        return Redirect::to('/#footer')
        ->with('subscribe_error','This email is already subscribed to us.')
        ->withErrors($validator)->withInput();

    }else{

        $subscribe        = new Subscribe;
        $subscribe->email = Input::get('subscribe_email');
        $subscribe->save();

        return Redirect::to('/thank-you');

    }

}

现在，我希望使用 Ajax 调用来实现此目的，以避免页面加载，并了解有关Ajax的更多信息。以下是我尝试过的内容：

表格

{!! Form::open(array('url' => '/subscribe', 'class' => 'subscribe-form', 'role' =>'form')) !!}

<div class="form-group col-lg-7 col-md-8 col-sm-8 col-lg-offset-1">
  <label class="sr-only" for="mce-EMAIL">Email address</label>
  <input type="email" name="subscribe_email" class="form-control" id="mce-EMAIL" placeholder="Enter email" required>

  <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
  <div style="position: absolute; left: -5000px;"><input type="text" name="b_168a366a98d3248fbc35c0b67_73d49e0d23" value=""></div>
</div>
<div class="form-group col-lg-3 col-md-4 col-sm-4"><input type="submit" value="Subscribe" name="subscribe" id="subscribe" class="btn btn-primary btn-block"></div>


{!! Form::close() !!}

Ajax Call

<script type="text/javascript">
  $(document).ready(function(){
    $('#subscribe').click(function(){
      $.ajax({
        url: '/subscribe',
        type: "post",
        data: {'subscribe_email':$('input[name=subscribe_email]').val(), '_token': $('input[name=_token]').val()},
        dataType: 'JSON',
        success: function (data) {
          console.log(data);

        });
    });
  });
</script>

控制器

public function postSubscribeAjax() {

        // Getting all post data

        if(Request::ajax()) {
            $data = Input::all();
            die;
        }

        dd($data);
    }

路线

Route::post('/subscribe','SubscribeController@postSubscribeAjax');

结果

我一直在：

  

未定义的变量：数据

这意味着我的Request::ajax()没有包含任何内容？那是为什么？

如何使用Ajax调用实现此目的？

Answer 1

这已在聊天中解决

我们必须修复一些语法错误并将输入按钮更改为html按钮，以防止表单提交。还有其他方法可以做到这一点，但这很有用。

所以我要在这里解决一些问题。从底部开始向上移动!!

<强>路线

您可以在没有斜线的情况下执行此操作。 Route::post('subscribe','SubscribeController@postSubscribeAjax');

<强>控制器

您的控制器足够好，但您需要实际显示ajax的结果。我们会处理。

如果有Ajax请求，请删除支票中的die。

<强>的Ajax

<script type="text/javascript">
  $(document).ready(function(){
    $('#subscribe').click(function(e){
         e.preventDefault(); // this prevents the form from submitting
      $.ajax({
        url: '/subscribe',
        type: "post",
        data: {'subscribe_email':$('input[name=subscribe_email]').val(), '_token': $('input[name=_token]').val()},
        dataType: 'JSON',
        success: function (data) {
          console.log(data); // this is good
        }
      });
    });
  });
</script>

<强>表格

很确定表格很好。

Answer 2

假设postSubscribeAjax方法中出现“未定义变量”错误，看起来您的范围有问题。具体来说，当PHP解释器到达行dd($data)时，变量$data尚未定义。

这并不奇怪，因为$data是在if语句之后的代码块内分配的 - 它在该块之外是不可用的。

您可以通过在$data = null;语句之前添加if来解决此问题，但这只会向您显示您遇到了其他问题。原因如下：

您收到“未定义变量”错误。这意味着你的代码正在跳过if块（我怎么知道这个？因为如果它没有跳过它，它将执行die语句并且你永远不会看到错误）。这意味着您的代码没有正确地将请求标识为AJAX请求。

我要做的是：完全跳过if块。只需获取数据并进行处理即可。

自从我查看这些内容已经有一段时间了，但是IIRC，没有可靠的方法来检测AJAX请求。对于服务器，AJAX请求就像任何其他请求一样。一些Javascript库（包括jQuery，如果我没有弄错的话）在请求上设置一个标题以将其标识为AJAX，但它既不是普遍需要也不是普遍检测到的。

此AJAX检测的唯一好处是阻止您的用户直接从浏览器访问AJAX URL。而且，最终，如果某人真的想要这样做，你就无法阻止他们，因为他们可以（通过一点点工作）欺骗任何请求。

Answer 3

请传递csrf令牌

  <script type="text/javascript">
      $(document).ready(function(){
        $('#subscribe').click(function(e){
             e.preventDefault(); // this prevents the form from submitting
          $.ajax({
            url: '/subscribe',
            type: "post",
            headers: {
                          'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
            data: {'subscribe_email':$('input[name=subscribe_email]').val(), '_token': $('input[name=_token]').val()},
            dataType: 'JSON',
            success: function (data) {
              console.log(data); // this is good
            }
          });
        });
      });
    </script>