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();

希望这有帮助

Answer 2

更改此

$("#addmovies").on("submit", function(e) {

为：

$('#addmovies #submit').live('click', (function(e) {

或添加return false;

$("#addmovies").on("submit", function(e) {
   //....
    $.ajax({
       //....
    });
    return false;
});

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

2 个答案: