无法使用 Ajax 和 Laravel 将数据发送到数据库答案

【问题标题】：Cannot send data to database using Ajax and Laravel无法使用 Ajax 和 Laravel 将数据发送到数据库
【发布时间】：2022-07-28 00:50:47
【问题描述】：

我正在尝试通过 Ajax 和 Laravel 将数据插入数据库。但是当我点击提交按钮时，什么也没有发生。我试图在第一次使用“警报”时查看是否可以访问 javascript，是的。但是 $ajax 的部分根本无法访问。

代码如下：

HTML：

  <div class="form-group">
    <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
    <label for="email">Name:</label>
    <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter Email" 
   name="email">
  </div>
  <div class="form-group">
       <label for="email">Phone:</label>
        <input type="text" class="form-control" id="phone" placeholder="Enter Phone" 
        name="phone">
  </div>
   <div class="form-group">
      <label for="email">City:</label>
      <input type="text" class="form-control" id="city" placeholder="Enter City" name="city">
    </div>
   <button type="submit" class="btn btn-primary" id="butsave">Submit</button>
   </div>

Javascript：

$(document).ready(function() {

$('#butsave').on('click', function() {
    alert("hello");
  var name = $('#name').val();
  var email = $('#email').val();
  var phone = $('#phone').val();
  var city = $('#city').val();
  var password = $('#password').val();
  if(name!="" && email!="" && phone!="" && city!=""){
    /*  $("#butsave").attr("disabled", "disabled"); */
      $.ajax({
          url: "/userData",
          type: "POST",
          data: {
              _token: $("#csrf").val(),
              type: 1,
              name: name,
              email: email,
              phone: phone,
              city: city
          },
          cache: false,
          success: function(dataResult){
              console.log(dataResult);
              var dataResult = JSON.parse(dataResult);
              if(dataResult.statusCode==200){
                window.location = "/userData";              
              }
              else if(dataResult.statusCode==201){
                 alert("Error occured !");
              }
              
          }
      });
  }
  else{
      alert('Please fill all the field !');
  }
   });
   });

对于控制器代码：

 public function create()
     {
    return view('userData');
     }
  
 public function store(Request $request)
  {
    $request->validate([
        'name' => 'required',
        'email' => 'required',
    ]);
    UserData::create($request->all());
    return json_encode(array(
        "statusCode"=>200
    ));
   }

【问题讨论】：

检查浏览器的调试工具。控制台上是否有任何错误？在网络选项卡上，是否发出了 AJAX 请求？服务器的响应是什么？在脚本调试器中，当您放置断点以单步执行函数时，具体会发生什么？
上面显示的 HTML 在末尾有一个备用的结束 div 标签...AJAX 请求工作正常，如在 sn-p 中测试的那样，所以问题必须出在 PHP 上
可以提供路线吗？是获取还是发布请求？这可能是很多事情，包括错误的中间件调用，我们需要更多信息。

标签： javascript php jquery mysql laravel

【解决方案1】：

先去掉submit类型，替换button类型，防止页面刷新，

<button type="button" class="btn btn-primary" id="butsave">Submit</button>

并将您的 JavaScript 代码放在 <script> </script> 标记之间的同一个刀片文件中。

为了更好，

给你的route 起这样的名字，

Route::post('/userData', [ControllerHere::class, 'method_name_here'])->name('userData');

之后将您的 ajax 请求 url 更改为类似的内容，

$.ajax({
    url: '{{ 'userData' }}', //put your route name here

【讨论】：