zoukankan      html  css  js  c++  java
  • Using the Iframe to implement the Ajax

    这篇文档主要解决的问题是:在不使用JavaScript进行跨域访问的前提下,实现post回发,进行表单提交。

    vframe_post.html
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>No freash submit! Post!</title>
    </head>
    <body>
        <iframe id="_vframe" name="_vframe" style="display:none;"></iframe>
        <form id="formAct" name="formAct" method="post" action="vframe_receive.html">
            <input type="submit" id="btnNormalSubmit" value="Normal Submit" />
        </form>
        <form id="formHidden" name="formHidden" method="post" action="vframe_receive.html" target="_vframe">
            <input type="submit" id="btnHiddenSubmit" value="Hidden Submit" />
        </form>
    </body>
    </html>

    vframe_receive.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>No freash submit! Received!</title>
        <script language="javascript" type="text/javascript">
            function displayMessage() {
                alert("Arrived!");
            }
        </script>
    </head>
    <body onload="displayMessage();">
        VFrame receive Page!
    </body>
    </html>
    

    在上例中vframe_post.html中提供了两个form,第一个是普通的form,第二个则是设置了target指向一个iframe。这样做的好处就是在formHidden提交的时候,其数据内容将通过iframe进行提交,而不会刷新当前页面。这一点是Ajax效果的一种体现,但却有别于基于XMLHttpRequest对象的Ajax效果。在一些特定的场合将是非常有用的。各宗滋味,自行体会。

  • 相关阅读:
    2. jvm-sandbox之结构和状态
    1. jvm-sandbox之小试牛刀
    redux中间件来执行异步操作
    redux
    vue简单插件
    VUE搭建
    用element-ui进行文件的上传
    完整的node脚手架搭建服务
    使用node来搭建简单的后台业务
    解决vuex数据页面刷新后初始化问题
  • 原文地址:https://www.cnblogs.com/volnet/p/1582897.html
Copyright © 2011-2022 走看看