【问题标题】:Unable to submit a modal form using Ajax Request in Laravel无法在 Laravel 中使用 Ajax 请求提交模式表单
【发布时间】:2021-01-24 10:35:08
【问题描述】:

我正在尝试根据 modal 表单中的用户输入删除用户,但我无法执行此操作。控制台中没有错误消息。由于我最近才开始学习,所以我无法确定自己哪里做错了。

我直接得到了 error: Ajax 请求的一部分。

这是我的代码

只有 Blade 的模态部分

<button type="button" id="delete_user" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>

<div class="modal fade" id="deleteModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header ">
      
        <h5 class="modal-title text-danger text-center"  id="exampleModalLabel" >Are you sure you want to delete this user?</h5>
       
      </div>
      <div class="modal-body ">
        <strong class="text-info text-center ">Please Confirm your Details</strong>
        <form id="delete_user_form" method="POST">
          @csrf
          <div class="form-group">
             <input type="hidden" name="_token" id="d_csrf" value="{{Session::token()}}">
            <input type="hidden" class="form-control" id="d_id" name="d_id" value="{{Auth::user()->id}}">
            <label for="d_full_name" class="col-form-label">Full Name:</label>
            <input type="text" class="form-control" id="d_full_name" name="d_full_name">
          </div>
          <div class="form-group">
            <label for="d_password" class="col-form-label">Confirm Your Password:</label>
            <input type="password" class="form-control" name="d_password" id="d_password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" id="final_delete">Delete User</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
   $(document).ready(function(){
    $('#delete_user').click(function(e){
      e.preventDefault();
       // $("#deleteModal").modal('show');
      
         $('#final_delete').on('click', function(e) {
            e.preventDefault();
             $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
       
            $.ajax({
               method:"POST",
               url:"delete_user",
               cache: false,
               processData:true,   //Required
               contentType: 'application/x-www-form-urlencoded',
               data:{
                      'd_token'             :    $("#csrf").val(),
                     'id' : $('#d_id').val(),
                     'd_full_name' : $('#d_full_name').val(),
                     'd_password' : $('#d_password').val(),

                },
                dataType :"JSON",
                success:function(){
                  swal({
                   title: "User deleted Successfully",
                   text: "You will now be logged out.Sorry to see you go!!",
                   icon: "warning",
                   buttons: true,
                  dangerMode: true,
                  });

                   
                },
                error:function(e){
                  swal({
                   title: "Oops! Some Error",
                   text: "Please try again later",
                   icon: "warning",
                   buttons: true,
                  dangerMode: true,
                  });
console.log(e);
                   

                },
            }); //ajax ends here

          }); //$("#final_delete").click ends
 ////$('#delete_user').click(function(e) ends

 });
  });
</script>

和控制器

public function delete_user(Request $request){
   $d_id =  $request->id;
   $d_fname = $request->full_name;
   $d_password   =   $request->password;
   date_default_timezone_set("Asia/Kolkata"); 
   $d_time                 =   date("Y-m-d,H:i:s ");
$user_data  =    array(
        'id'  => $d_id,
         'full_name'     =>    $d_fname,
       'password'  =>   $d_password
    );
$act2= "DELETE";
if(Auth::attempt($user_data)){
     DB::select('CALL my_stored_procedures(?,?,?,?,?,?,?,?,?,?,?,?)', array($act2,$u_id,"","","","","",$$d_time, "","","",$d_time  ));
       return response()->json(
           [
               'success' => true,
               
           ]
       );
       Auth::logout();
       Session::flush();
       return redirect('login');
  }
  





} // delete_user ends

然后查看

Route::post('delete_user', 'userController@delete_user')->middleware('auth');

这是在控制台中获得的响应(Ajax 请求的error: 部分)


dashboard:226 
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort: ƒ ( statusText )
always: ƒ ()
catch: ƒ ( fn )
done: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ ( key )
overrideMimeType: ƒ ( type )
pipe: ƒ ( /* fnDone, fnFail, fnProgress */ )
progress: ƒ ()
promise: ƒ ( obj )
readyState: 4
responseText: ""
setRequestHeader: ƒ ( name, value )
state: ƒ ()
status: 200
statusCode: ƒ ( map )
statusText: "OK"
then: ƒ ( onFulfilled, onRejected, onProgress )
__proto__: Object

感谢任何帮助。

【问题讨论】:

  • 检查 chrome 控制台的响应。
  • @itachi 没有回应。 Chrome浏览器的控制台或任何东西都没有错误消息
  • 您如何为中间件提供授权持有者或身份验证令牌?
  • @Al-Amin 我不明白你在问什么
  • @Skumar,您在路由中使用中间件。您是删除该用户的授权用户吗?如果您已获得授权或已登录,那么您将如何提供授权凭据?

标签: php html jquery ajax laravel


【解决方案1】:

试试这个代码。

<button type="button" id="delete_user" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>

<div class="modal fade" id="deleteModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header ">
      
        <h5 class="modal-title text-danger text-center"  id="exampleModalLabel" >Are you sure you want to delete this user?</h5>
       
      </div>
      <div class="modal-body ">
        <strong class="text-info text-center ">Please Confirm your Details</strong>
        <form id="delete_user_form" method="POST">
          @csrf
          <div class="form-group">
             <input type="hidden" name="_token" id="d_csrf" value="{{Session::token()}}">
            <input type="hidden" class="form-control" id="d_id" name="d_id" value="{{Auth::user()->id}}">
            <label for="d_full_name" class="col-form-label">Full Name:</label>
            <input type="text" class="form-control" id="d_full_name" name="d_full_name">
          </div>
          <div class="form-group">
            <label for="d_password" class="col-form-label">Confirm Your Password:</label>
            <input type="password" class="form-control" name="d_password" id="d_password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" id="final_delete">Delete User</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
      
        $('#final_delete').on('click', function(e) {
            e.preventDefault();
             $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
          });

          var get_data = $("#delete_user_form").serialize();   
       
          $.ajax({
             method:"POST",
             url:"delete_user",
             cache: false,
             processData:true,   //Required
             contentType: 'application/x-www-form-urlencoded',
             data : get_data,
              success:function(){
                swal({
                 title: "User deleted Successfully",
                 text: "You will now be logged out.Sorry to see you go!!",
                 icon: "warning",
                 buttons: true,
                dangerMode: true,
                });

                 
              },
              error:function(){
                swal({
                 title: "Oops! Some Error",
                 text: "Please try again later",
                 icon: "warning",
                 buttons: true,
                dangerMode: true,
                });
                 

              },
          });

        });
</script>

【讨论】:

    【解决方案2】:

    确保元标记存在于主刀片文件的头部

    这里 -

    url: "{{ url('/delete_user') }}",

    以这种方式尝试你的 URL,同样在你在 routes/web.php 中注册路由之后,运行命令 php 工匠优化:清除。此命令将清除所有缓存文件。硬刷新您的浏览器并再次检查。你也可以使用 axios。 Laravel 现在已经内置了对它的支持。

    【讨论】:

      【解决方案3】:

      复制并粘贴到您各自的控制器代码中

      DB::select('CALL my_stored_procedures(?,?,?,?,?,?,?,?,?,?,?,?)', array($act2,$d_id,"","","","","",$d_time, "","","",$d_time  ));
      

      你打错了$d_id 而不是$u_id

      【讨论】:

        猜你喜欢
        • 2016-06-11
        • 2011-11-09
        • 2016-12-16
        • 1970-01-01
        • 2015-02-05
        • 2015-10-16
        • 1970-01-01
        • 1970-01-01
        • 2019-05-04
        相关资源
        最近更新 更多