77.利用js异步获取数据

厚土火烟 · · 552 次点击 · · 开始浏览

这是一个创建于的文章，其中的信息可能已经有所发展或是发生改变。

由于页面在已经展开的某些情况下，需要通过用户操作来调用一些当前尚未获取的数据，这就会用到异步。
web上比较简单的做法，是使用一个iframe来取得相应的数据，并且在iframe的父窗口上获取iframe内页面的数据。
这里使用一个校验的例子。
用户端提供一个值，点击一个按钮去进行校验。这时候已经在同一个页面填写了大量的信息，所以不能整个页面跳转。通过异步的方式，在iframe内反馈回校验的结果，父窗口获取结果。（注意：由于iframe内页面数据可能需要一定的等待时间，父窗口需要监听iframe获取数据的状态，这里只做一个5秒钟的等待，没有真实实现监听）

input框内返回异步加载的信息，通过点击button“检查” 来触发

/*取得当前填写的实物储位号的校验结果*/
        function checkEntityArchive() {
            var entityArchive = document.getElementById("i_EntityArchive");


            var myaction = "/archiveKeepOnFileGetBe/";

            var frm = document.createElement('form');
            frm.action = myaction;
            frm.method = 'post';
            frm.target = 'iframeTemp';
            var keyText = document.createElement('input');
            keyText.type = 'hidden';
            keyText.name = 'key';
            keyText.value = 'Love U';
            frm.appendChild(keyText);
            document.body.append(frm);
            frm.submit();

            // entityArchive.value = window.frames["iframeTemp"].document.getElementById('checkResult').value;
            // entityArchive.value = window.frames["iframeTemp"].contentWindow.document.body.innerText;
            setTimeout(function () {
                var iframe = document.getElementById('iframeTemp');
                entityArchive.value = iframe.contentWindow.document.getElementById('checkResult').value;
                // entityArchive.value = window.frames["iframeTemp"].document.getElementById('checkResult').value;
                // entityArchive.value = iframe.contentWindow.document.body.innerHTML;
            }, 5 * 1000);

        }

<div><span class="spanStyle1">实物储位号</span><input id="i_EntityArchive" name="i_EntityArchive" type="text"><input
                    id="i_EntityArchive_check" name="i_EntityArchive_check" type="button" value="检查"
                    onclick="checkEntityArchive()" class="btn3">
            <iframe id="iframeTemp" name="iframeTemp" style="display: none;"></iframe>
        </div>

在js代码中，我们实现了一个动态加载的form，其中一个 name 为 key 的 input 值为 “Love U”，是我们提交的关键信息。（作为要校验检查的储位号）
如果这个储位号存在，仍返回这个储位号，如果不存在，就返回提示信息。
服务端golang实现如下

func ArchiveKeepOnFileGetBeHandler(writer http.ResponseWriter, request *http.Request)  {
    var temp = request.FormValue("key")
    //log.Println(temp)
    //fmt.Fprintln(writer,"Hello My Moon!",temp)
    var tpl = `<html>
<head>
<title>返回实物储位号校验结果</title>
</head>
<body>
<input id="checkResult" name="checkResult" type="text" value="` + temp + `">
</form>
</body>
</html>
`
    writer.Write([]byte(tpl))

}

golang代码省略了具体的校验过程，只是返回了一个页面。不要担心这个返回的页面会替换web前端的用户操作页，在js代码中

frm.target = 'iframeTemp';

就表示，新数据页面会在 iframeTemp 的窗口中打开，即 iframe 窗口中。【这里注意 iframe 窗口的 name和id】
golang中的变量 temp就是我们接收的数据，也是校验检查后，最终返回的数据。为了便于父窗口获取数据，返回值放在一个id为 checkResult 的 input中。

前端页面，通过一个 setTimeout 方法，等待了 5 秒钟，然后获取返回值。