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

Posted 2023-02-24

技术标签:

【中文标题】如何在 Laravel 中使用 Ajax 调用将数据发布到数据库？【英文标题】：How to post data to database using Ajax call in Laravel? 【发布时间】：2015-07-18 08:36:08 【问题描述】：

我有一个订阅框：

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

我已经知道如何通过 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 调用来实现这一点？

【问题讨论】：

【参考方案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>

表格

很确定表格是好的。

【讨论】：

天哪，你太棒了。感谢您分享您的知识。 :D 在我的控制器中，我尝试了dd(Request::ajax()); 我得到了false，我想看到真假？我不知道我现在该怎么办，$data = Input::all(); 永远不会跑。当它是一个 ajax 请求时，您应该会看到 true。所以我们需要在这里仔细检查一些东西......页面是使用 ajax 提交还是显示给你一个控制台？？ Request::all() 有什么好处？？【参考方案2】：

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

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

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

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

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

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

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