ajaxForm 插件不断重定向到操作页面，忽略返回 false；

Question

我有一个简单的表单，当用户在完成选择图像后单击文件浏览窗口中的“打开”时会提交该表单。

我的 HTML 如下所示。

<form id="imgForm" action="action.php" method="post" enctype="multipart/form-data">
        <div class="fileUpload btn btn-lg btn-primary">
            <span>Choose File</span>
            <input id="imageToBeUploaded" type="file" class="upload" name="image"/>
        </div>
</form>

JavaScript

$("body").on('submit', '#imgForm', function(){
    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    return false;
});

/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});

我的问题是表单被提交但重定向到带有响应的 action.php 页面。我希望在返回当前页面的响应时停止重定向。返回假；似乎没有按照http://malsup.com/jquery/form/#ajaxSubmit的文档工作

任何帮助将不胜感激！

请注意，我必须支持 IE8/9，这意味着 formData 是不可能的！

谢谢。

Answer 1

你应该使用 event.preventDefault();而不是用jQuery返回false

$("body").on('submit', '#imgForm', function(event){

    event.preventDefault();

    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    return false;
});

很多人可能不同意我的观点，但返回 false 通常表示某些事情失败了，而您的 ajax 提交实际上可能工作得很好，因此它可能会给您的原始调用者带来不同的结果。在这种情况下，这无关紧要，但我只会在实际失败或出错或请求布尔值时返回 false。如果结果为空，我将返回 null，而不是 false。我想只是信念..

不知道为什么你有 2 个 js 函数，但你可以将这两个函数组合为：

$(document).ready(function() { 
    /* Uploading Profile BackGround Image */
    $('body').on('change','#imageToBeUploaded', function() {
        //submit the form
        $('#imgForm').ajaxForm({target:'#uploadStatus'});
        console.log("submitting...");
    });
 });

Answer 2

试试这个 JavaScript/jQuery 代码并使用您的服务器脚本进行管理。

$(document).ready(function (e) {
           /* Uploading Profile BackGround Image */
            $('#imageToBeUploaded').on('change', function() {
                //submit the form
                $("#imgForm").submit();
                alert('Form submitted');
            });
            $('#imgForm').ajaxForm({
                target:'#uploadStatus',
                beforeSubmit:function(){
                    alert('File uploading...');
                },
                success:function(){
                    alert('File uploaded');
                },
            });
        });

祝你好运['}

Answer 3

尝试实现此代码：

window.location.href 这个属性会告诉你浏览器的当前 URL 位置。更改属性的值将重定向页面。

$("body").on('submit', '#imgForm', function(){
var a;
var b;
window.location.href = "../currenturl.htm?parameter1="+a+"&parameter2="+b;
or
window.location.href = "../currenturl.htm";
//where your browser need to stay(current) url should be mentioned here.
});

Answer 4

您引用的页面是关于$(this).ajaxSubmit(options); 而不是$(this).ajaxForm(options);。你试过$(this).ajaxSubmit(options);吗？两者不是同义词。您似乎混淆了他们的实现。

根据文档，这里是如何使用ajaxSubmit()：

$(document).ready(function() {
    $('#imgForm').on('submit', function(){
        $(this).ajaxSubmit({target:'#uploadStatus'});
        console.log("submitting...");
        return false;
    });

    $('#imageToBeUploaded').on('change', function() {
        //trigger submit event
        $("#imgForm").submit();
    });
});

还有ajaxForm():

$(document).ready(function() {
    $('#imgForm').ajaxForm({target:'#uploadStatus'});

    $('#imageToBeUploaded').on('change', function() {
        //trigger submit event
        $("#imgForm").submit();
    }); 
});

除非你真的必须，否则你不想使用委托事件。如果表单在 DOM 就绪事件之后加载，则绝不使用委托事件。

Answer 5

来自：Prevent page reload and redirect on form submit ajax/jquery

$("body").on('submit', '#imgForm', function(event){
    $(this).ajaxForm({target:'#uploadStatus'});
    console.log("submitting...");
    event.preventDefault();
    return false;
});

/* Uploading Profile BackGround Image */
$('body').on('change','#imageToBeUploaded', function(event) {
    //submit the form
    $("#imgForm").submit();
});

Answer 6

$(document).ready(function (e) {
           /* Uploading Profile BackGround Image */
            $('#imageToBeUploaded').on('change', function() {
                //submit the form
                $("#imgForm").submit();
                alert('Form submitted');
            });
            $('#imgForm').ajaxForm({
                target:'#uploadStatus',
                beforeSubmit:function(){
                    alert('File uploading...');
                },
                success:function(){
                    alert('File uploaded');
                },
            });
        });

Answer 7

你可以试试这个：

使用 $(this).closest("#imgForm").submit();

代替：$("#imgForm").submit();

$('#imageToBeUploaded').on('change', function() {
     //submit the form
 $(this).closest("#imgForm").submit();
     $("#imgForm").submit();
 });

    $('form#imgForm').on('submit',function(e){
            e.preventDefault();
            $(this).ajaxSubmit({ 
                    url:   'upload', 
                    uploadProgress: function (event, position, total, percentComplete){ 
                       //display status
                        $(".progress-bar").width(percentComplete + '%');
                        $('.progress-bar').html(percentComplete+'%');
                    },
                    success: function(response){
                        alert('Success');
                    },
                    error: function(response, status, e){
                        alert('Oops something went.');
                    },
                    resetForm: true 
                });
        });

你需要在你的脚本标签中使用它https://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugin/src/main/resources/template/js/plugins/jquery.form.min.js?r=1645>

Answer 8

试试这个

$(document).ready(function() {
    $("#imgForm").ajaxForm({
        target:'#uploadStatus'
    });
});

$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});