“AJAX”使用jQuery上传问题

时间:2010-07-29 21:37:15

标签: javascript jquery html ajax json

我正在尝试创建一个简单的“AJAX”上传器(因为我知道你实际上无法进行AJAX上传)。我有问题,我真的不想使用插件。我正在编写一个需要将PDF附件作为表单的一部分的应用程序,而我的应用程序代码已经有大约1000行JS + jQuery。我不想添加额外的1000k SWFObject或巨型表单插件。另外,我喜欢学习东西,所以我知道它们是如何工作的:)我也非常精通JS ......

这是我到目前为止所做的:

<!DOCTYPE html>
<html>
    <head>
        <title>Upload Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>            
            $(function(){
                $('#file_upload').submit(function(){
                    $('#file_upload').attr('target','upload_target');
                    alert($('iframe').contents().text());
                    return false;

                });
            });
        </script>
    </head>
    <body>
        Upload Test to 382
        <form id="file_upload" method="post" enctype="multipart/form-data" action="io.cfm?action=updateitemfile&item_id=382">
            <input name="binary" id="file" size="27" type="file" /><br />
            <input type="submit" name="action" value="Upload" /><br />
            <iframe id="upload_target" name="upload_target" src="" style=""></iframe>
        </form>

    </body>
</html>

我一直在读,如果我将目标attr添加到表单中,表单将在那里提交,但根本没有运气。它只是没有在iframe中放任何东西。根据选择的项目,“action”attr将是动态的。如果我关闭所有“AJAX”它也可以正常工作,我无法访问后端,因为它是一个内部API。

那么,如何将此内容提交给iframe,然后获取iframe的内容,这将是一个JSON响应?

P.S。这只是我正在使用的测试页面... obv这不是整个应用程序。

1 个答案:

答案 0 :(得分:1)

并不是表单的 submit 填充<iframe>。 POST应该让它回到服务器 - 你看到了吗?然后,服务器响应将以<iframe>结束。通常,为了让它感觉像Ajax一样,你要做的就是让响应页面包含一些以某种方式回到主页面的Javascript。

停止从提交处理程序返回false,看看会发生什么。

这样做的目的是避免表单提交的默认行为。当您以普通的旧HTML方式提交表单时,包含该表单的页面将替换为来自服务器的响应。但是,当您将表单定位到<iframe>时,却不是。相反,响应指向框架内的“页面”。