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

我有两条路线：

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

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.']
    );
}
}

程序：

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

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.']
    );
}
}

基本上，用户输入一个

URL

，例如

localhost/download/56iq45agosa

调用第一条路径，并显示

download.blade.php

视图。有一个表单，用户必须在其中输入密码，当单击submit按钮时，

ajax

请求被发送到第二个（post）路由

DownloadController@verify

返回json，但将其显示在空白窗口中（请参见屏幕截图），但应在

下载.blade.php

视图中返回。

不知怎的，表单消失了，并且没有调用ajax success函数

代码片段下载。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

---

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

---

确保在表单上添加id。

因此有两件事可以帮助改进此代码：

• 将侦听器包装在

  文档中。ready

  功能可确保当按钮在页面中可用时，侦听器已连接。如果

  @push

  将使脚本结束于页面中的表单声明之上，则这是必需的
• 收听表单提交事件，以便您可以通过提交表单的任何可能方式（例如，按输入上的ENTER键）捕获提交

@push（'scripts'）
$（函数（）{
$（“表格”）。在（'submit'，函数（e）{
e、 预防默认值（）；
让password=$（“输入[name=password]”）.val（）；
$.ajax({
类型：'POST'，
url:“”，
数据：{
密码：密码
},
成功：功能（数据）{
log（“我没有被显示”）；
//警报（data.success+“”+data.matches）；
}
});
});
});
@端推

你能详细说明你的答案吗？现在，我让表单在提交时返回false，但什么也没有发生如果

@push（'scripts'）

将脚本推到页面顶部，您应该将该脚本包装在

$（document）.ready（函数（）{…}）

以确保在侦听器实际存在的时间附加侦听器。另外，表单提交处理程序通常是更好的做法，因为在某些情况下，表单可以在不单击提交的情况下提交好的，谢谢！所以我应该删除submit listener上的按钮（停用它）并添加一个表单submit listener？是的。通过这种方式，您还可以捕获某人键入密码并按{enter}这是一种常见的操作do@apokryfos它工作得很好！谢谢。因为你帮我解决了它，如果你想写一个简短的答案，这样我就可以标记它为正确的！