如何在 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 调用

<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

已在 Chat 中解决

我们必须修复几个语法错误并将输入按钮更改为 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 语句之后的代码块内分配的 - 它在该块之外不可用。

您可以通过在if 语句之前添加$data = null; 来解决此问题，但是...这只会向您表明您遇到了不同的问题。原因如下：

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

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

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

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