为啥ajax调用在每次调用时都会输入成功和错误块？

Posted 2023-05-08

【中文标题】为啥ajax调用在每次调用时都会输入成功和错误块？

【英文标题】：Why ajax call enter success and error block on every call?为什么ajax调用在每次调用时都会输入成功和错误块？

【发布时间】：2021-09-18 22:48:37

【问题描述】：

我想在数据库中上传图片，每次我进行 ajax 调用时，它都会进入成功和错误块。 这是我的html：

    <div>
        <form  id="test-form" enctype="multipart/form-data">
            <div>
                <label>Photos: </label>
                <input type="file" id="file"/>
            </div>
            <input type="button" value="Add" id="add-movie-tvShow-btn">
        </form> 
    </div> 

这是我的 ajax 调用

let insertButton = $("#add-movie-tvShow-btn");
insertButton.on('click', function () 

let formData = new FormData();
let file = $("#file")[0].files[0];
formData.append("file", file);

        $.ajax(
            url: "http://localhost:8080/upload",
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function()
            alert("Enter success block");
                ,
            error: function()
              alert("Enter error block")  
              
        );

   );

这是处理ajax请求的方法：

@PostMapping(value = "/upload", consumes = "multipart/form-data")
public void uploadFile(@RequestParam("file") MultipartFile file, Movie movie) throws 
IOException 
    File convertFile = new File("C:\\Users\\myName\\Desktop\\" + file.getOriginalFilename());
    convertFile.createNewFile();
    FileOutputStream fout = new FileOutputStream(convertFile);
    fout.write(file.getBytes());
    movie.setImage(file.getBytes());    
    movieRepo.save(movie);
    fout.close();

它在数据库中创建数据，但我不明白为什么输入错误块？我做错了什么？

【问题讨论】：

请看看这是否对你有帮助***.com/questions/14475853/…

这应该是不可能的。在这种情况下，你的 sucess 函数根本不应该被调用，因为“成功”是两个 C 的。您的浏览器控制台是否显示任何错误？

@Ivar 是的，这很奇怪，它没有显示任何错误，但即使我放了两个 C，它的行为也是一样的。

【参考方案1】：

你可以试试 preventDefault() 吗？如下所示。

insertButton.on('click', function (e) 
  e.preventDefault();

【讨论】：

嘿，这确实有效，但这是解决这个问题的最佳方法吗？我仍然不知道为什么它进入两个街区

@NemJov 如果这行得通，我很难相信你的add-movie-tvShow-btn 实际上是type="button"。带有 type="button" 的按钮应该不提交表单，除非您有其他 JS 干扰。无论如何，如果您通过 AJAX 提交表单，您不妨删除<form> 标签以防止表单提交。

我猜你的点击功能触发了两次。可以在阻止默认值之前放置一个控制台日志来确认这一点。你可以检查这个***.com/questions/3070400/…

@Ivar 我删除了表单，我也删除了`e.preventDefault();`并且代码正常工作，我认为提交多媒体类型需要一个表单。