JQuery ajaxSubmit 函数不适用于 AngularJS HTML 页面中的表单

Posted 2023-05-09

【中文标题】JQuery ajaxSubmit 函数不适用于 AngularJS HTML 页面中的表单

【英文标题】：JQuery ajaxSubmit function is not working for a form in an AngularJS HTML page

【发布时间】：2020-05-15 18:48:17

【问题描述】：

我正在尝试使用 AngularJS 修补遗留的图像上传代码。 我有一个包含表单的 html 页面。以下是代码的 HTML 部分。

<form name="testForm" ng-init="testfunc()" novalidate>
    <div id="adduser_header">
        <div>
            <p><b>Add new user</b></p>
        </div>
    </div>
    <div id="userInfo">
        <div>
            <label>First Name</label>
            <input type="text" name="fname" required>
        </div>
        <div>
            <label>Last Name</label>
            <input type="text" name="lname" required>
        </div>
        <div>
            <form id="imageuploadForm"
                  action="/Projectname/jersey/ImageUploader/uploadimage"
                  method="POST" enctype="multipart/form-data"
                  accept-charset="utf-8" name="submitForm">
                <div>
                    <input id="imagename" type="text" readonly="readonly"
                           placeholder="Click browse to upload image">
                    <div id="uploadImgBtn" onclick="getImgFile()">
                        <span>Browse</span>
                    </div>
                </div>
                <input id="userID" name="userID" type="hidden">
                <input id="userImage" name="userImage" type="hidden">
                <input id="usertType" name="usertType" type="hidden">
                <p style="display: none;">this is your file input tag, so i hide it!
                i used the onchange event to fire the form submission</p>
                <div><input id="uploadimgfile" type="file" value="upload"
                            required="required" autofocus="autofocus" 
                            name="imgfile"
                            onchange="upImgFile(this, event)">
                </div>
                <input style="display: none;" type="submit" value="Send">
            </form>
        </div>
    </div>
    <div id="action_buttons">
        <input id="save_user" value="Add User" type="button"
               title="Add User"
               ng-click="submitRegistrationForm()"
               ng-disabled="testForm.$invalid">
        <a ui-sref="home-admin" ng-click="return()">
            <input id="canceltoreturn" value="Cancel" type="button" title="Cancel">
        </a>
    </div>
</form>

我可以毫无问题地浏览和选择图像。当我尝试提交这个 AngularJS 表单时，我的问题就开始了。当我点击 Add User 时，我首先提交名为 testForm 的 AngularJS 表单，该表单返回成功并带有用户 ID。此 ID 被传递给以下代码补丁（legacy）：

uploadImage: function(id)

    if($('#imageuploadForm').find('#userImage').val() != "")
    
        $("#imageuploadForm").find("#userID").val(id);

        var uploadstatus = null;
        $("#imageuploadForm").ajaxSubmit(

                success: function(data)
                
                    uploadstatus = data;

                    if(uploadstatus == "uploaded")
                    
                        console.log("Uploaded Successfully!");
                    
                    if(uploadstatus == "updated")
                    
                        console.log("Updated Successfully!");
                    
                    else
                    if(uploadstatus == "problem" || uploadstatus == "notuploaded")
                    
                        console.log("Some problem occurred!");
                    
                    $("#imagename").val("");
                    $('#imageuploadForm').find('#userImage').val("");
                ,
                error: function(xhr, ajaxOptions, thrownError)
                
                    console.log(xhr.status);
                
        );
    
    else
    
        alert("Please select some image to upload!")
    

当我调试代码时，它一直到行。

$("#imageuploadForm").ajaxSubmit

但没有进一步发生。 action 属性中提到的服务 (/Projectname/jersey/ImageUploader/uploadimage) 根本没有被调用。

当表单纯粹是 HTML 时，这个 ajaxSubmit 运行良好。 （另外，我将 jquery.form.js 用于 ajaxSubmit 函数。） 但是由于我已经以 AngularJS 的方式定制了代码，所以图像上传已经停止工作。 我在这里做错了什么？我无法理解。我该如何解决这个问题？

【问题讨论】：

你必须检查docs.angularjs.org/api/ng/service/$http

【参考方案1】：

嵌套<form>元素是非法的。

来自文档：

HTML <form> 元素表示一个文档部分，其中包含用于提交信息的交互式控件。

内容分类：流动性内容、触手可及的内容

允许的内容：流式内容，但不包含<form>元素

标记省略：无，开始和结束标记都是强制性的。

允许的父母：任何接受流内容的元素

有关详细信息，请参阅

MDN HTML Reference - <form> Element How to use AngularJS $http to send multipart/form-data

【讨论】：

是的，你是对的。当我检查 DOM 时，我没有看到内部的“表单”标签，并且可以直接在 DOM 中找到其中存在的 HTML 元素。似乎它被自动省略了（虽然不明白原因）。我已经相应地修改了我的代码，非常感谢您的帮助。