Laravel AJAX 响应加载错误的路线/窗口

Question

I have two routes:

Route::get('/download/{hash}','DownloadController@exists')->name('exists');
Route::post('/download/{hash}','DownloadController@verify')->name('verify');

Procedure:

Basically the user enters a URL eg localhost/download/56iq45agosasa the first route is called and the download.blade.php view is shown. There is a form, where the user has to input a password and when the submit button is clicked, an ajax request is sent to the second (post) route.

The DownloadController@verify returns the json but displays it in a blank window (see screenshot) But it should be returned in the download.blade.php view.

Somehow the form disappears and the ajax success function is not called.

Code snippets Download.blade.php:

@section('content')
<div class="container-fluid mt-5">
    <div class="row justify-content-md-center">
        <div class="col-md-4">
            <form method="POST">
                <label for="uploadPassword">Password</label>
                <input type="password" name="password" class="form-control" id="uploadPassword" placeholder="Password" required="">
                <button id="btn-submit" type="submit" class="btn btn-success mt-2">Submit</button>
                {{ csrf_field() }}
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    $(".btn-submit").click(function(e){

        e.preventDefault();
        let password = $("input[name=password]").val();
        $.ajax({
            type:'POST',
            url:"",
            data:{
                password:password
            },
            success:function(data){
                console.log("I don't get shown");
                //alert(data.success + " " + data.matches);
            }
        });
    });
</script>
@endpush

DownloadController:

class DownloadController extends Controller
{
public function exists(Request $request, $hash)
{

    // Some private mysql queries

    // Return the hash to the download view
    return view('download',[
        'hash' => $hash
    ]);
}

public function verify(Request $request, $hash)
{
    return response()->json(
        ['success'=>'Got Simple Ajax Request.']
    );
}
}

Answer 1

So there are two things that will help improve this code:

• Wrap the listener in a document.ready function to ensure it's attached when the button is available in the page. This is necessary if @push will make the script end up above the form declaration in the page.
• Listen for the form submit event so you can capture the submit via any of the possible ways that one can submit a form (eg by pressing ENTER on an input)

@push('scripts')
<script type="text/javascript"> 
$(function () {
    $("form").on('submit', function (e) {

        e.preventDefault();
        let password = $("input[name=password]").val();
        $.ajax({
            type:'POST',
            url:"",
            data:{
                password:password
            },
            success:function(data){
                console.log("I don't get shown");
                //alert(data.success + " " + data.matches);
            }
        });
    });
});
</script>
@endpush

Answer 2

The problem here is that the form gets submitted. Instead of overriding button click with your jQuery function, use it to change submit handler like so

Prevent Default on Form Submit jQuery

Make sure you put id on the form.