Question

我有一个网页，其顶部有一个表格，底部有一个表格。表单允许用户提交信息并上传图片，表单的目标是iframe，设置height = 0 width = 0。我这样做的原因是为了防止页面刷新并转到分配的操作页面。该表只是几行不同的用户数据。当用户提交数据时，我想调用一个事件来刷新具有新数据的表。

有没有办法在提交后刷新表格和表格而无需移动到新页面？这是可行的使用iframe还是我应该尝试其他方法？现在我唯一的想法是使用iframe，它确实阻止了页面在提交后移动到新页面。

Answer 1

这对AJAX技术很有用 - 你调用服务器并发回一个HTML片段，该片段被加载到当前页面中指定的包装元素中。

虽然您可以使用标准JavaScript完成所有这些操作，但大多数都使用库来处理所有跨浏览器问题。最受欢迎的是jQuery。

jQuery是用JavaScript编写的，并且扩展了它的功能，为您提供了很好的快捷方式和增强功能，而无需编写大量代码。

请参阅：http://api.jquery.com/jQuery.ajax/

在您的情况下，Iframe将包含一个JavaScript块，它将在父页面中调用Ajax函数。

请参阅：How to call function on parent page from iframe using jQuery?

Answer 2

iframe有一个onload事件处理程序，你可以使用，当表单发布时，它调用事件处理程序，我称之为“已发布”，更新表。

    <script>
    function posted(str){
        var matches=str.match(/^.*\?data=(.*)$/);
        if(matches)
            document.getElementById("data").innerHTML+=matches[1]+"<br/>";
    }
    </script>
    <form method='get' action='nowhere.html' target='frame'>
        <input name='data'/>
    </form>
    <table width="100%" border=1>
        <tr><td id='data'></td></tr>
    </table>    

    <iframe style='display:none' name='frame' onload="posted(this.contentWindow.location.href)">
    </iframe>

我如何通过iframe使用函数？

2 个答案: