Laravel 7.24- Кнопка отправки Jquery и Ajax-Clicking не срабатывает

ProgramBox

Laravel 7.24- Кнопка отправки Jquery и Ajax-Clicking не срабатывает

Post author:admin
Запись опубликована:13 марта, 2023
Post category:Вопросы по программированию

#jquery #ajax #laravel

Вопрос:

Я пытаюсь отправить форму с помощью Jquery Ajax. В форме отображаются данные, хранящиеся в базе данных того же пользователя, который вошел в систему. Пользователь должен иметь возможность редактировать данные или удалять их полностью (что приводит к выходу из системы). Проблема в том, что я не могу пройти мимо формы.

Есть две кнопки — Редактировать и удалить

Мое намерение состоит в том, что нажатие кнопки Редактирования приведет меня к новой странице формы с предварительно заполненными данными, где только (вошедший в систему) пользователь может редактировать данные, а новые данные могут обновляться в базе данных.

Вот коды-

Форма блейда (после входа пользователя в систему)

 <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

      <!-- CSRF Token Meta Added -->
      <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

    <!-- Ajax script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>


    <!-- Sweet Alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>


    </head>
  <body>
    <!-- Navigation Bar --> 
   <div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-sm  bg-dark navbar-dark navbar-fixed-top">
  <a class="navbar-brand" href="index">User Info</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>

    
  </ul>
  <ul class="nav navbar-nav navbar-right">
  <li class="nav-item"><a class="nav-link" href="{{url('logout')}}"> Logout</a></li>
      

    </ul>

  
</nav>
    </div>
  </div>

 @if(isset(Auth::user()->email))
<div class="alert alert-success text-center" role="alert">

 Welcome<strong> {{Auth::user()->first_name}}!</strong> You are Logged In.
 
</div>
<div class="alert alert-info text-center" role="alert">

 Here are your details. You can <strong>edit</strong> and <strong>delete</strong> your data from here.
</div>

<form class="form-group" id="new_user_form"  autocomplete="off">
 <div class="row  m-5 p-5 bg-success text-white">
     <div class="col">
<div class="form-group">
  @csrf
  <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
  <input type="hidden" name="id" id="id" value="{{Auth::user()->id}}" readonly>

 <label for="fname">First Name:</label>
 
  <input type="text" class="form-control" id="first_name" name="first_name" value="{{Auth::user()->first_name}}" readonly >
</div>
<div class="form-group">
 <label for="lname">Last Name:</label>
  <input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}" readonly>
</div>
<div class="form-group">
 <label for="email">Email/Username:</label>
 <input type="text" class="form-control" name="email" id="email" value="{{Auth::user()->email}}" readonly>
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="text" class="form-control" name="password1" id="password1" value="{{'**** For security, your password is hidden****'}}" readonly>
  <input type="hidden" class="form-control" name="password2" id="password2" value="{{Auth::user()->password}}" readonly>
</div>

  <div class="form-group">
 <label for="mobno">Mobile Number:</label>
 <input type="text" class="form-control" name="mobno" id="mobno" value="{{Auth::user()->mobno}}" readonly>
</div>
<div class="form-group">
 <label for="dob">Date of Birth(in YYYY-MM-DD):</label>
  <input type="text" class="form-control" name="dob" id="dob" value="{{Auth::user()->DOB}}" readonly>
</div>

<div class="form-group">
  <label for="gender">Gender:</label>
 <input type="text" class="form-control" name="gender" id="gender" value="{{Auth::user()->gender}}" readonly>

 </div>
  <div class="form-group">
  <label for="address">Address:</label>
 <textarea class="form-control" rows="5" name="address" id="address" readonly>{{Auth::user()->address}}</textarea>
</div>

<div class="form-group">
<label for="country">Country:</label>
 <input name="country" class="form-control" id="countrylist" value="{{Auth::user()->country}}" readonly>
</div>

 <div class="form-group">
 <label for="dt">Date and Time of Submission:</label>
   <input type="text" class="form-control" name="dt" id="dt" value="{{Auth::user()->created_at}}" readonly>
</div>

<div class="form-group text-center ">
<a href="edit_user"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>

</div>

</div>

</form>

</div>   
 


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

        $.ajax({
           method='POST',
           url='/edit_user',
           cache: false,
           processData:true,   //Required
           contentType: 'application/x-www-form-urlencoded',
            data:    {
                   '_token'             :    $("#csrf").val(),
                  'first_name'         :    $('#first_name').val(),
                   'last_name'         :    $('#last_name').val(),
                  'email'             :    $('#email').val(),
                  'password'           :    $('#password').val(),
                   'mobno'              :    $('#mobno').val(),
                   'dob'                 :     $('#dob').val(),
                  'gender'              :     $('#gender').val(),
                  'address'              :       $('#address').val(),
                   'country'              :       $('#countrylist').val(),
                   'dt'                  :        $('#dt').val(),          
                   },

          dataType="JSON",
          success:function(response){
                  window.location="edit_user_details";
          },
          error:function(){
            error: function(){
              swal({
             title: "Error in Editing",
             text: "Please try again later! ",
             icon: "warning",
            button: "Okay",
            });
            
             }
            


         }


        });


    });
  });


</script>

@endif


<!-- Unauthenticated users are kicked out -->

  @if(!isset(Auth::user()->email))
 <!-- <a href="{{url('logout')}}"/> <button type="button" class="btn btn-danger btn-lg btn-block">Unauthorised user! Please login or signup before you can enter this page</button>   -->

 <script type="text/javascript">window.location="login"</script>

@endif
</body>
</html>

Контроллер

 <?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use DB;
use IlluminateSupportFacadesValidator;
use IlluminateSupportFacadesHash;
use IlluminateSupportFacadesAuth;
use IlluminateSupportFacadesSession;

class Edit_Loggedin_User extends Controller
{
     public function edit_details_page(){
        $user=Auth::user();
        return response()->json(
            [
                'success' => true,
                
            ]
        );
        
     }
    public function update_loggedin_user(Request $request){
        $user=Auth::user();
    if (Auth::check()) {
        //Some code to be written      

            }
    }
}

Вот куда следует направить пользователя после нажатия кнопки редактирования

 <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

     <!-- CSRF Token Meta Added -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
       <!-- Ajax script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <!-- Sweet Alert -->
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    </head>

  <body>
    <!-- Navigation Bar -->
   <div class="container-fluid">
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top">
  <a class="navbar-brand" href="index">User Info</a>
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About Us</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact Us</a>
    </li>
    
  </ul>
<ul class="nav navbar-nav navbar-right">
  <li class="nav-item"><a class="nav-link" href="{{url('logout')}}"> Logout</a></li>
      

    </ul>
  
  
</nav>
    </div>
   
    </div>

</div>
@if(isset(Auth::user()->email))
<div class="alert alert-success text-center" role="alert">

 Welcome<strong> {{Auth::user()->first_name}}!</strong> You are Logged In.
 
</div>
<div class="alert alert-info text-center" role="alert">
<strong>Edit</strong> your data here
 
</div>

<form class="form-group" id="new_user_form" method="post"  autocomplete="off">
 <div class="row  m-5 p-5 bg-success text-white">
     <div class="col">
<div class="form-group">
  @csrf
  <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
 <label for="fname">First Name:</label>
  <input type="text" class="form-control" id="first_name" name="first_name" value="{{Auth::user()->first_name}}" >
</div>
<div class="form-group">
 <label for="lname">Last Name:</label>
  <input type="text" class="form-control" name="last_name" id="last_name" value="{{Auth::user()->last_name}}">
</div>
<div class="form-group">
 <label for="email">Email/Username:</label>
  <input type="text" class="form-control" name="email" id="email" value="{{Auth::user()->email}}">
</div>

<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="text" class="form-control" name="password" id="password" value="{{'**** For security, your password is hidden****'}}">
</div>

  <div class="form-group">
 <label for="mobno">Mobile Number:</label>
  <input type="text" class="form-control" name="mobno" id="mobno" value="{{Auth::user()->mobno}}">
</div>
<div class="form-group">
 <label for="dob">Date of Birth(in YYYY-MM-DD):</label>
  <input type="text" class="form-control" name="dob" id="dob" value="{{Auth::user()->DOB}}">
</div>

<div class="form-group">
  <label for="gender">Gender:</label>
   <input type="text" class="form-control" name="gender" id="gender" value="{{Auth::user()->gender}}">

 </div>
  <div class="form-group">
  <label for="address">Address:</label>
  <textarea class="form-control" rows="5" name="address" id="address">{{Auth::user()->address}}</textarea>
</div>

<div class="form-group">
<label for="country">Country:</label>
 <input name="country" class="form-control" id="countrylist" value="{{Auth::user()->country}}">
</div>

 <div class="form-group">
 <label for="dt">Date and Time of Submission:</label>
  <input type="text" class="form-control" name="dt" id="dt" value="{{Auth::user()->created_at}}">
</div>
<div class="form-group text-center">
<!-- <a href="{{url('recheck_form')}}"/><button type="submit" class="btn btn-primary mb-2 text-center" onclick="store_using_ajax()">Submit</button> -->
</div>
<div class="form-group text-center ">

<a href="#"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>

</div>

</div>

</div>

</form>

</div>   






@endif

<!-- Unauthenticated users are kicked out -->

  @if(!isset(Auth::user()->email))
 <!-- <a href="{{url('logout')}}"/> <button type="button" class="btn btn-danger btn-lg btn-block">Unauthorised user! Please login or signup before you can enter this page</button>   -->

 <script type="text/javascript">window.location="login"</script>

@endif




</body>
</html>

И маршруты

 Route::get('dashboard','LoginController@loginsuccess')->middleware('auth', 'PreventBackHistory');
Route::get('logout', 'LoginController@logoutsuccess')->middleware('auth','PreventBackHistory');
Route::post('/edit_user', 'Edit_Loggedin_UserController@edit_details_page')->middleware('auth');

Некоторые изображения здесь

после входа пользователя в систему

после нажатия кнопки редактирования.Обратите внимание на URL-адрес (похоже, что форма отправляет данные как «GET», а не «POST»)

Если я использую method="post" на form вкладке, это выдает сообщение об ошибке с указанием

The POST method is not supported in this route

Как мне заставить это работать?

Ответ №1:

Вы должны определить, куда отправляется ваша форма, используя action атрибут:

 <form class="form-group" id="new_user_form" method="post" autocomplete="off" action="{{ url('edit_user') }}">

ФАЙЛ: еще одна вещь, которую я заметил, это то, что вашей кнопке отправки предшествует ссылка.:

 <a href="edit_user"/><button type="submit" class="btn btn-warning" id="edit_user_button">Edit</button>

Удалите ссылку и оставьте только кнопку, поскольку это предпочтительный способ отправки формы.

 <button type="submit" class="btn btn-warning" id="edit_user_button">
    Edit
</button>

Обновление, для отправки через AJAX:

 $(document).ready(function() {
    // Setup all AJAX requests to send the CSRF token.
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // Prevent the form's regular submission and do it via AJAX instead.
    $('#new_user_form').on('submit', function (e) {

        e.preventDefault();

        var $form = $(this);

        $.ajax({
            method:'POST',
            url: $form.attr('action'),
            cache: false,
            processData: true,   // Required
            data: $form.serialize(), // Serialize all of the form's inputs.
            dataType: 'JSON',
            success: function(response) {
                window.location = 'edit_user_details';
            },
            error: function() {
                error: function() {
                    swal({
                        title: 'Error in Editing',
                        text: 'Please try again later! ',
                        icon: 'warning',
                        button: 'Okay',
                    });
                }
            }
        });
    });
});

1. Это сработало. Но, если я использую action="action page" , он не будет использовать ajax-скрипт

2. Кстати, обратный вызов ошибки кажется дублированным. Я не уверен, намеренно ли это, но вы можете захотеть перепроверить это.

Ответ №2:

Старайтесь не использовать Ajax отправку и проверку. Я имею в виду, вместо этого используйте action атрибут в form теге

Вопрос:

Ответ №1:

Комментарии:

Ответ №2:

Вам также может понравиться

Шлюз приложений Azure — есть ли какая-либо причина для сохранения брандмауэра Azure?

Размещение API-интерфейса R plumber с использованием docker

Вычислить, пересекает ли ортогональная сквозная точка P отрезок линии, определенный его конечными точками