javascript - 使用 Ajax post 的奇怪行为，但在 html 提交更改后允许 GET 和 Head

Question

我有一些 jquery 代码，可以发布一个表单来上传图像:

$(document).ready(function(){    
    $("#addimage").click(function(){
        $("#uploadimages").dialog();
    });

    $('#postimages').click(function(){
        var mydata = new FormData($("#imagesform")[0]);
        $.ajax({
            url: 'upload',
            type: "POST",
            data: mydata,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function(){
                location.reload();
            }
        });
    });
});

表单如下所示:

 <div id="uploadimages" style="display: none" >
     <form method="post" enctype="multipart/form-data" name="imagesform">
          <input type="file" name="my_file[]" multiple>
          <input type="submit" id="postimages" value="upload">
          <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>"/>
          <input type="hidden" name="eventname" id="eventname" value="<?php echo $event->event_name?>"/>
     </form>
 </div>

我的routes.php(使用Laravel框架)中有一个如下所示的路由:Route::post('upload', 'HomeController@upload');

当我仍然使用常规 html 属性提交表单时，这一切都恢复了，但在我使用 ajax 添加了 jquery 后，它给了我一个错误:

methodNotAllowed(array('GET', 'HEAD'))

它似乎仍在发出 POST 请求，但由于某种原因现在只允许 GET 和 HEAD ？我真的不明白，除了将表单的帖子从纯html更改为jquery/ajax(需要这样做才能重定向到当前页面)之外，我没有更改任何内容

Answer 1

您没有取消单击操作，因此表单也会提交。这可能会导致问题。

$('#postimages').click(function(evt){
    evt.preventDefault();
    /* rest of code */
});