Question

希望你们一切顺利。这可能是一个简单的问题，也是一个非常简单的解决方案，但我有点陷入这个问题并且不确定如何摆脱它。希望，如果有人能提供帮助的话。问题如下，

我有一个由3个输入组成的表单，文件+ 2个文本输入。表格的代码如下，

<form id="image_upload_form" enctype="multipart/form-data" method="POST">
   Select File : <input type="file" id="image_file" /><br>
   Time to Display :<input type="text" id="time_to_display" /><br>
   Sequence No: <input type="text" id="sequence_no" />
</form>

此表单出现在jQuery的对话框中，因此当我按下对话框上的“保存”按钮时，它会提交值。代码如下，

$( "#someDivDialogBox" ).dialog({
    autoOpen: false,
    height: 300,
    width: 576,
    modal: true,
    buttons: {
        Save: function() {
             $("#image_upload_form").submit(function(e) {
                  var url = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();                        
                  $(this).attr("action", url);
             });

             $("#image_upload_form").submit();

        },
        Cancel: function() {
             // Do Something Here

        },
        close: function() {
             $(this).hide();
        }
     }
});

提交后，一切都按计划运行，数据保存在数据库中并返回成功消息，但浏览器导航到ACTION URL而不是停留在表单所在的位置。如何阻止浏览器导航到表单的Action URL。

希望信息足够，非常感谢任何帮助。非常感谢，等待你的回复。提前致谢。

此致

Answer 1

您需要在已经传递到提交处理程序的活动（e）上致电preventDefault()：

$("#image_upload_form").submit(function(e) {
    e.preventDefault();
    ...
});

Answer 2

所有先前的答案都是正确的，您需要使用event.preventDefault()来防止在您的$("#image_upload_form").submit();方法中调用Save时出现表单“默认”功能，但是关于如何利用他们提供的信息的评论似乎仍然有些混乱。

我相信这里的困惑在于HTML表单的工作方式。当“提交” HTML表单时，它会导致浏览器收集表单中输入元素中的值，然后使用POST正文中输入的值执行HTTP POST请求。在浏览器中，这是通过浏览器导航到表单上的操作URL来实现的。仅在提交表单后，OP才会使用以下代码段在表单上设置值。

var url = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();                        
$(this).attr("action", url);

传统上，当您在HTML网页上有一个表单时，您不会干扰浏览器对操作URL执行HTTP POST请求的默认行为，然后在服务器上处理传入的HTTP POST请求，然后返回HTTP 302重定向响应（返回到包含表单的页面，或其他页面/ URL），从而导致浏览器在提交表单后加载重定向到的URL。

如果上述功能不能达到预期的效果，那么您将需要在JS代码中添加其他逻辑，以从表单中的每个输入元素读取值，然后对服务器执行XHR（Ajax）请求，并处理您收到的任何回复。

<form id="image_upload_form" enctype="multipart/form-data" method="POST">
   Select File: <input type="file" id="image_file" /><br>
   Time to Display: <input type="text" id="time_to_display" /><br>
   Sequence No: <input type="text" id="sequence_no" />
</form>

function submitImageForm(actionUrl, form) {
    var fileToUpload = $(form).find("#image_file").prop("files")[0];
    var timeToDisplay = $(form).find("#time_to_display").val();
    var sequenceNo = $(form).find("#sequence_no").val();

    var data = new FormData();
    data.append("file", fileToUpload);
    data.append("time_to_display", timeToDisplay);
    data.append("sequence_no", sequenceNo);

    return fetch(actionUrl, {
        method: "post",
        body: data
    });
}

$("#someDivDialogBox").dialog({
    autoOpen: false,
    height: 300,
    width: 576,
    modal: true,
    buttons: {
        Save: function () {
            $("#image_upload_form").submit(function (e) {
                e.preventDefault();
                var actionUrl = Util.getBaseURL() + "Uploads/Images?sid=" + Math.random();
                submitImageForm(actionUrl, form).then(function (response) {
                    // work with the response object here
                });
            });
            $("#image_upload_form").submit();
        },
        Cancel: function () {
            // Do Something Here
        },
        close: function () {
            $(this).hide();
        }
    }
});

Answer 3

试试这个

Save: function() {
$("#image_upload_form").submit(function(event) {
    event.preventDefault();

防止浏览器在表单提交时导航到操作URL

3 个答案: