php - 如何在不刷新页面的情况下使用 AJAX 和 LARAVEL 在 MySQL 中插入数据

Question

我尝试使用 LARAVEL 和 AJAX 在数据库中插入一行，而不刷新页面，但是当我单击提交按钮时，我在浏览器控制台响应中收到以下错误:

SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'writer_id2' cannot be null.

我猜，输入数据还没有被提交并且值为空，但是我如何在 Controller 中接收响应/输入数据并同时将它插入到数据库中呢？

路线:

Route::post('writers', ['as'=>'add-writer' ,'uses'=> 'HomeController@addWriter'])->name('add-writer');

Controller :

 public function addWriter(){
  $i = new Input();
  $dm=  new DataModel();
  $data= response()->json(['data'=>$i::all()]);
  $encode = json_encode($data);
  $decode = json_decode($encode,true);
  $decoded = [];
  $decodedNeeded = [];
  $inc = 0;
  $i2 = 0;




  foreach ($decode as $k=>$v){
      $inc++;
      $decoded[$inc] = $v;

  }
  foreach($decoded[2] as $k3 =>$v3){
      $i2++;
       $decodedNeeded[$i2] = $v3;
  }

  $this->insertUser = $decodedNeeded;



 $dm->addWriterMethod($decodedNeeded[1]['writer_id2'],$decodedNeeded[1]['status'],$decodedNeeded[1]['writer-skills']);

AJAX

 $('#add-writer-btn').click(function(e) {
   e.preventDefault();
     var id = $('input[name=writer_id2]').val();
     var status = $("input[name=status]").val();
     var skills = $('textarea').val();



     var form2 = $(this);
     var url2 = form2.attr('action');

     $.ajax({
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         method: "POST",
         ContentType: 'application/json',
         url: url2,
         dataType: 'json',

         data: {

             'id': id,
             'status': status,
             'skills': skills

         },

         success: function (data) {
           alert('Added successfully!');
         }


     });



 });

HTML

 <div id="add-writer">
               <b>Add writer</b>

                       <form action="{{url('add-writer')}}" method="POST">    
                  <input type="hidden" name="_token" value="{{csrf_token()}}">

             Writer_id2 <input type="number" id="writer-id-2" name="writer_id2">
                  <br>
               Open to suggestions   <input type="radio" value="Open to suggestions"  name="status">
                  <br>
                 Searching for orders  <input type="radio" value="Searching for orders"  name="status">

                  <br><br>
                  Writer skills <textarea   name="writer-skills"></textarea>



                  <input type="submit" value="Add" id="add-writer-btn" >

                       </form>

          </div>

Answer 1

根据您的评论，当您不使用 ajax 时，它似乎有效 - 但重定向 - 但当您使用 ajax 时它不起作用。

这看起来合乎逻辑:当您不使用 ajax 时，您向服务器发送 4 个键值对:

• _ token
• writer_id2
• 状态
• 写作技巧

而当你使用 ajax 时，你只发送 3 个键值对，其中只有 1 个具有正确的键:

• 编号
• 状态
• 技能

所以至少您需要更改使用 ajax 时发送的数据。

所以这样:

     data: {
         'id': id,
         'status': status,
         'skills': skills
     },

应该是:

     data: {
         'writer_id2': id,
         'status': status,
         'writer-skills': skills
     },

现在您至少已经对数据部分进行了排序，但是由于缺少 _token 它仍然可能会失败，如果是这种情况，您也需要添加那个。

然而，奇怪的是，您收到的错误消息表明 token 是不必要的，这可能表示配置错误。

要简单地添加所有内容而无需手动分配变量，我建议改用它:

 data: $('form').serialize(),

现在您将收到与“普通”/非 ajax 帖子完全相同的数据。

除此之外，我还建议监听表单提交事件而不是按钮单击，这样您的 javascript 也将处理任何提交，例如使用回车键。