Javascript 如何使用Ajax更新两种不同输入类型表单中的数据，而不清除另一种表单中的信息？

我正在创建一个网页，允许用户上传自己的图片，并创建一个拼贴，他们将能够添加一个标题，并（最终）按标题保存/检索

我目前正在使用Ajax，使用下面的JS将图像设置为背景：

function setUploadedBackground(fileName){
    var ajx;
    if (window.XMLHttpRequest)
    {// If the browser if IE7+[or] Firefox[or] Chrome[or] Opera[or]Safari
        ajx=new XMLHttpRequest();
    }
    else
    {//If browser is IE6, IE5
        ajx=new ActiveXObject("Microsoft.XMLHTTP");
    }
    ajx.onreadystatechange=function()
    {
        if (ajx.readyState==4 && ajx.status==200)
        {
            //change background
        }
    }
    ajx.open("GET","index.jsp",true);
    ajx.send();
    return false;
}

表单“uploadAction”使用以下操作jsp来实际上载和保存文件

<form id= "uploadForm" action="

                    <%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
                    <%@ page import="javax.servlet.http.*" %>
                    <%@ page import="org.apache.commons.fileupload.*" %>
                    <%@ page import="org.apache.commons.fileupload.disk.*" %>
                    <%@ page import="org.apache.commons.fileupload.servlet.*" %>
                    <%@ page import="org.apache.commons.io.output.*" %>

                    <%
                    int uploadFailed = 0;
                    File file ;
                    String fileName = null;
                    int maxFileSize = 500000 * 1024;
                    int maxMemSize = 5000 * 1024;
                    ServletContext context = pageContext.getServletContext();
                    String filePath = context.getInitParameter("file-upload");

                    // Verify the content type
                    String contentType = request.getContentType();
                    //if (contentType.indexOf("multipart/form-data") >= 0) {

                    DiskFileItemFactory factory = new DiskFileItemFactory();
                    // maximum size that will be stored in memory
                    factory.setSizeThreshold(maxMemSize);
                    // Location to save data that is larger than maxMemSize.
                    factory.setRepository(new File("uploads/"));

                    // Create a new file upload handler
                    ServletFileUpload upload = new ServletFileUpload(factory);
                    upload.setHeaderEncoding("ISO-8858-2");

                    // maximum file size to be uploaded.
                    upload.setSizeMax( maxFileSize );
                    try {
                        // Parse the request to get file items.
                        List fileItems = upload.parseRequest(request);

                        // Process the uploaded file items
                        Iterator iter = fileItems.iterator();

                        while ( iter.hasNext () ) {
                            FileItem fi = (FileItem)iter.next();
                            if ( !fi.isFormField () ) {

                                // Get the uploaded file parameters
                                String fieldName = fi.getFieldName();
                                fileName = fi.getName().replaceAll("\\s", "");

                                String mimeType = getServletContext().getMimeType(fi.getName());

                                if(mimeType == null) mimeType = fi.getContentType();
                                if (mimeType.startsWith("image")) {
                                    String command = "update users set mm11='"+fileName+"' where name = 'Gjeta'";
                                    st.executeUpdate(command);

                                    boolean isInMemory = fi.isInMemory();
                                    long sizeInBytes = fi.getSize();

                                    // Write the file
                                    if( fileName.lastIndexOf("\\") >= 0 ) {
                                        file = new File( filePath + fileName.substring( fileName.lastIndexOf("\\"))) ;
                                    }
                                    else {
                                            file = new File( filePath + fileName.substring(fileName.lastIndexOf("\\")+1)) ;
                                        }
                                        fi.write( file ) ;
                                    }
                                    else uploadFailed = 2;

                                }
                            }
                        } catch(Exception ex) {
                            System.out.println(ex);
                            if(ex.toString().contains("IOFileUploadException")) uploadFailed = 1;
                        }
                    //}
                    %>"
                        method="post" enctype="multipart/form-data">
                    <input class="uploads" type="file" name="file" size="50"/>
                    <input class="uploadFile" type="submit" value="Upload File"/>
                    <script type="text/javascript">
                        <% if (uploadFailed == 0) { %>
                        setUploadedBackground('<%=fileName%>');
                        <% } else if (uploadFailed == 1) { %>
                                alert("Maximum file size exceeded");
                                <% } else if (uploadFailed == 2) { %>
                                        alert("Please upload an image");
                                    <% } %>

                    </script>
                </form>

我知道问题在于上传文件时，上传表单实质上会重定向到操作页面，尽管我使用Ajax将上传的图像设置为容器div的背景，但事实上我没有使用

event.preventDefault();

就我所知，这意味着表单提交会导致重定向。我尝试过使用与我的nameBoardForm使用的逻辑相同的逻辑，即使用jQuery来更改提交时发生的情况，但我无法使用serialize（）获取所需的文件名参数，因为这似乎只是为文件输入表单返回一个空字符串（即使它对文本输入表单非常有效）

我有什么办法可以绕开这件事吗？目前，如果用户上传图像，则将其设置为div背景，然后他们还可以使用Ajax将拼贴标题从“无标题”更改为自己的拼贴名称，而不影响上传的div图像/背景。但是，如果用户先设置拼贴名称，则在上传图像并设置为背景时，拼贴标题重置为“无标题”，因此用户会丢失他们已经输入的数据

最终的想法是，我将把文件名保存到拼贴标题下的数据库中，这样用户就可以根据以前使用过的标题搜索拼贴，并根据以前上传的图像重新显示拼贴。然而，这意味着拼贴标题的数据输入是至关重要的，因此不能通过Ajax将图像设置为div背景来擦除-有什么建议吗？我在谷歌上搜索解决方案已经很久了，但似乎文件输入表单很奇怪，我还没有发现任何有用的东西

编辑-----------------------

生成的HTML为：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing</title>
        <script src="js/jquery-1.8.1.min.js" type="text/javascript" language="javascript"></script>
        <script src="js/setUploadedBackground.js" type="text/javascript" language="javascript"></script>
        <script src="js/enableButton.js" type="text/javascript" language="javascript"></script>

        <!--script src="params.js" type="text/javascript"></script-->

        <link href="css/newstyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>            
        <h3 id="title"><div class="collageTitle">Untitled</div></h3>

        <form id = "nameBoardForm" method="post">
            <input type='text' name='collageName' id='collageNameInput' />
            <input type='submit' name='submit' id='submitBtn' value="Save collage" class='enableOnInput' disabled='disabled' />
        </form>

        <div id="uploadsContainer" class="mm11Container" style="top:100px; left: 300px;">
            <div id="img" class="mm11 card front face">
                <form id= "uploadForm" action=""
                    method="post" enctype="multipart/form-data">
                    <input class="uploads" type="file" name="file" size="50"/>
                    <input class="uploadFile" type="submit" value="Upload File"/>
                    <script type="text/javascript">
                        <% if (uploadFailed == 0) { %>
                        setUploadedBackground('<%=fileName%>');
                        <% } else if (uploadFailed == 1) { %>
                                alert("Maximum file size exceeded");
                                <% } else if (uploadFailed == 2) { %>
                                        alert("Please upload an image");
                                    <% } %>

                    </script>
                </form>
            </div>
        </div>
        <script src="testing.js" type="text/javascript"></script>
    </body>
</html>

测试
无标题
setUploadedBackground（“”）；
警报（“超过最大文件大小”）；
提醒（“请上传图片”）；

您最好发布生成的HTML而不是jsp源代码。我已经编辑了我的问题，将其包括在内

event.preventDefault();

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Testing</title>
        <script src="js/jquery-1.8.1.min.js" type="text/javascript" language="javascript"></script>
        <script src="js/setUploadedBackground.js" type="text/javascript" language="javascript"></script>
        <script src="js/enableButton.js" type="text/javascript" language="javascript"></script>

        <!--script src="params.js" type="text/javascript"></script-->

        <link href="css/newstyle.css" rel="stylesheet" type="text/css" />
    </head>
    <body>            
        <h3 id="title"><div class="collageTitle">Untitled</div></h3>

        <form id = "nameBoardForm" method="post">
            <input type='text' name='collageName' id='collageNameInput' />
            <input type='submit' name='submit' id='submitBtn' value="Save collage" class='enableOnInput' disabled='disabled' />
        </form>

        <div id="uploadsContainer" class="mm11Container" style="top:100px; left: 300px;">
            <div id="img" class="mm11 card front face">
                <form id= "uploadForm" action=""
                    method="post" enctype="multipart/form-data">
                    <input class="uploads" type="file" name="file" size="50"/>
                    <input class="uploadFile" type="submit" value="Upload File"/>
                    <script type="text/javascript">
                        <% if (uploadFailed == 0) { %>
                        setUploadedBackground('<%=fileName%>');
                        <% } else if (uploadFailed == 1) { %>
                                alert("Maximum file size exceeded");
                                <% } else if (uploadFailed == 2) { %>
                                        alert("Please upload an image");
                                    <% } %>

                    </script>
                </form>
            </div>
        </div>
        <script src="testing.js" type="text/javascript"></script>
    </body>
</html>