ajaxForm插件一直重定向到操作页面，忽略返回false;

ajaxForm plugin keeps redirecting to action page ignoring the return false;

本文关键字：返回 false 一直 插件 重定向 操作 ajaxForm      更新时间：2023-09-26

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

我的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页面并得到响应。我希望在当前页面上得到回复的同时阻止重定向的发生。return false；似乎不符合http://malsup.com/jquery/form/#ajaxSubmit

如有任何帮助，我们将不胜感激！

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

谢谢。

尝试实现以下代码：

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.
});

只需尝试此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');
                },
            });
        });

祝你好运

您引用的页面是关于$(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就绪事件之后加载的，那么决不使用委托事件。

来自：在表单提交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();
});

$(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');
                },
            });
        });

你可以试试这个：

使用$(this(.colosest("#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>

试试这个

$(document).ready(function() {
    $("#imgForm").ajaxForm({
        target:'#uploadStatus'
    });
});
$('body').on('change','#imageToBeUploaded', function() {
    //submit the form
    $("#imgForm").submit();
});

您应该使用event.prventDefault((；而不是使用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...");
    });
 });
相关文章：