jquery 表单无法按预期工作。 ajaxForm 不是函数

Posted 2023-05-09

【中文标题】jquery 表单无法按预期工作。 ajaxForm 不是函数

【英文标题】：jquery form not working as expected. ajaxForm is not a function

【发布时间】：2013-09-07 23:37:12

【问题描述】：

我正在尝试使用 jquery 表单，但它在 concole ajaxForm 中不是一个函数。 jquery.form.js 已正确包含，并且代码位于文档就绪函数中...

这是脚本：

$("#apply-form").ajaxForm(

                beforeSend: function()
                
                    $("#progress").show();
                    //clear everything
                    $("#bar").width('0%');
                    $("#message").html("");
                    $("#percent").html("0%");
                ,
                uploadProgress: function(event, position, total, percentComplete)
                
                    $("#bar").width(percentComplete+'%');
                    $("#percent").html(percentComplete+'%');

                ,
                success: function()
                
                    $("#bar").width('100%');
                    $("#percent").html('100%');

                ,
                complete: function(response)
                
                    $("#message").html("<font color='green'>"+response.responseText+"</font>");
                ,
                error: function()
                
                    $("#message").html("<font color='red'> ERROR: unable to upload files</font>");

                
            );

这是 HTML 表单

<form id="apply-form" enctype="multipart/form-data" method="post" action="">


    <table>
                <tr><td>CV:</td>
                    <td>
                        <input type="file" name="cover">
                    </td>
                </tr>
                <tr><td>Cover Letter:</td>
                    <td>
                        <input type="file" name="curriculum">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="progress">
                            <div id="bar"></div>
                            <div id="percent">0%</div >
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="message"></div>
                    </td>
                </tr>
            </table>
        </form>

我正在使用 codeigniter 制作网站，并且我有一个包含在每个页面中的标题模板。在 head 部分，我按以下顺序包含了我的所有脚本：

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
<script src="/jobs/public/js/javascript.js"></script>
<link href="/jobs/public/js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>

我也在使用 jQuery UI。会不会是这个问题？

【问题讨论】：

jQuery 本身是否也正确加载了？你也可以用你的 HTML 制作一个jsfiddle 吗？

是的。并在 jquery 表单之前加载

控制台中的任何其他错误

浏览器检查器中的 $().ajaxForm 是否返回 `ajaxForm 函数？

没有任何其他错误。只有这个

【参考方案1】：

您正在加载 jQuery 两次。 jQuery 的第二次加载会覆盖第一次并破坏所有插件。

<script src="/jobs/public/js/jquery.js"></script>
<script src="/jobs/public/js/jquery.form.js"></script>
...
<script src="/jobs/public/js/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>

第二个jquery-1.9.1 没有得到.ajaxForm。使用其中一种。

将表单 jquery 添加到脚本底部

【讨论】：

谢谢你。我没有意识到我包含了两次...第二次来自 jQuery UI :)

你的帖子让我浪费了一整天，检测到 jquery 的双重加载。谢谢

【参考方案2】：

使用它，工作就完成了

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>

【讨论】：

不再工作了。改用这个：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>

【参考方案3】：

我像这样设计了一个好的上传器：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js"></script>

并像这样完成并使用了ajax：

$('form').ajaxForm
    (

    beforeSend: function() 
    
    var percentVal = '20%';
    prog.css("width",percentVal);

    ,
    uploadProgress: function(event, position, total, percentComplete) 
    
    var percentVal = percentComplete + '%';

    prog.css("width",percentVal);
    darsad.html(percentVal + ' uploading .');
    //console.log(percentVal, position, total);
    ,
    success: function() 
    
    var percentVal = '100%';

    darsad.html(percentVal + ' uploaded success.');
    prog.css("width",percentVal);

    ,
    complete: function(xhr) 
    
    //status.html(xhr.responseText);
    darsad.html(percentVal + ' uploaded complete.');
    

    ); 

【参考方案4】：

ajaxForm is not a function基本意思是，要么函数不存在，要么函数某处有问题。

我通过对插件加载/路径和 js 文件进行排序来解决此问题。在我的情况下，由于顺序错误，无法调用该函数。