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

Question

我有两条路线：

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

程序：

基本上用户输入URL，例如localhost/download/56iq45agosasa 调用第一条路由并显示download.blade.php 视图。有一个表单，用户必须输入密码，当点击提交按钮时，ajax 请求被发送到第二个（post）路由。

DownloadController@verify 返回 json，但在空白窗口中显示（见屏幕截图）但它应该在 download.blade.php 视图中返回。

不知何故表单消失了，ajax成功函数没有被调用。

代码 sn-ps 下载.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

下载控制器：

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

所以有两件事可以帮助改进这段代码：

• 将侦听器包装在document.ready 函数中，以确保当页面中的按钮可用时附加它。如果@push 将使脚本在页面中的表单声明上方结束，则这是必要的。
• 监听表单提交事件，以便您可以通过任何可能的提交表单的方式捕获提交（例如，通过在输入上按 ENTER）

@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

这里的问题是表单被提交了。 不要用你的 jQuery 函数覆盖按钮单击，而是使用它来更改提交处理程序，就像这样

Prevent Default on Form Submit jQuery

确保您在表单上填写了 id。