java - 上传后使用ajax刷新文件上传

Question

我正在尝试使用 ajax 上传文件。上传功能很好，但由于某些原因，文件上传后页面会刷新。可能有一些我找不到的小问题，请帮我指出。可能这个问题可能会变得很愚蠢，但错误还是会发生。

<form class="booking" id="addmovies" action="addmovies" method="post" enctype="multipart/form-data">
<table>
    <tr>
        <td>Movie Name</td>
        <td><input type="text" name="mname" id="mname"/><span class="error1" id="merror"></span></td>
    </tr>
    <tr>
        <td>Release Date</td>
        <td><input type="text" name="date" id="datepicker"/><span class="error1" id="dateerror"></td>
    </tr>
    <tr>
        <td>Choose poster</td>
        <td><input type="file" name="file" id="poster"/><span class="error1" id="perror"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="submit" value="ADD MOVIES" class="button_example"/></td>
    </tr>
</table>
</form>

<script>
$("#addmovies").on("submit", function(e) {
    e.preventDefault();
    var mname = $("#mname").val();
    var date = $("#datepicker").val();
    var poster = $("#poster").val();

    if (mname == "") {
        $("#merror").html("please enter the movie name");
        return false;
    } else {
        $("#merror").hide();
    }
    if (date == "") {
        $("#dateerror").html("please enter the date ");
        return false;
    } else {
        $("#dateerror").hide();
    }
    if (poster == "") {
        $("#perror").html("please choose the poster ");
        return false;
    } else {
        $("#perror").hide();
    }
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: $(this).attr("action"),
        type: 'POST',
        data: formData,
        async: false,
        beforeSend: function() {
            $("#message1").show().html("Uploading...");
        },
        success: function(data) {
            $("#message1").html(data).fadeOut(5000);
            $("#movielist").load("movies");
            $("#mname").val("");
            $("#datepicker").val("");
            $("#poster").val("");
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Answer 1

您需要return false; 来防止页面刷新。或者您可以在 ajax 调用之前添加 event.preventDefault();

希望对你有帮助