Laravel通过ajax注册

Question

I'm trying to make user registration process via ajax in laravel . But I'm unable to do that.

Routes

Route::get('/register', 'Auth\AuthController@getRegister')->name('register');
Route::post('/register', 'Auth\AuthController@postRegister')->name('postRegister');

HTML form

<form action="{{ route('postRegister') }}" method="POST" id="registerForm">
    <h4>REGISTER NOW</h4>
    <hr><br>
    <input type="text" name="name" class="form-control" placeholder="Name">
    <br>
    <input type="number" name="student_id" class="form-control" placeholder="Student ID">
    <br>
    <input type="email" name="email" class="form-control" placeholder="Email address">
    <br>
    <input type="number" name="phone" class="form-control" placeholder="Phone no">
    <br>
    <input type="password" name="password" id="password" class="form-control" placeholder="Choose password">
    <br>
    <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm password">
    <br>
    <div class="row">
        <div class="col-md-12 text-right">
            <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="registerButton"><span id="regLoader" style="display: none"><i class="fa fa-spinner fa-pulse"></i><span class="sr-only">Loading...</span>&nbsp;</span>
            Register</button>
        </div>
    </div>
    {{ csrf_field() }}
</form>

JS

$('#registerForm').submit(function(e){
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: '/register',
        data: $(this).serialize(),
        dataType: 'json',

        success: function(data){

        },
        error: function(data){

        }
    });
});

Answer 1

Your code looks perfect.

1) Maybe some form validation goes failed and which prevents data to be stored in the database.

Comment out your server side validations(if you have) and check again.

2) If this didn't work, comment out dataType: 'json' in AJAX and check again.

Also, print console.log() in your success method of ajax to troubleshoot.

If none of it work, show your controller code.

Thanks

Answer 2

1) Can you able to see the xmlhttp request passing to the server through network tab of chrome/mozilla.

 If so there is no error in your ajax/front end, 

2) Before going to route write a anonymous function in the action route to see whether the request comes till the route

Route::post('/register', function(Illuminate\Http\Request, $request) {
   dd($request);
});

If You have Auth Routes enabled then there is a possibility for the request to point RegistrationController inside Auth folder, do a dd($request) inside the constructor of that controller. hence you can figure it out whether the request is coming there.

3) Try regenerating the APP key (It is just a try if nothing works)

4) Try writing a new post route and call that route in ajax to post the data to the server,if that works the old route which you wrote may overridden by some other route.

Try in the above order , you will somewhere catch the error.

Answer 3

I think you need to change your code like:

jQuery(function($) {
   $('#registerForm').submit(function(e){
        e.preventDefault();

     $.ajax({
          url: $form.attr('action'),
          data: $(this).serialize(),
          dataType: 'json',

         success: function(data){

         },
          error: function(data){

         }
      });
    });
});