77.利用js异步获取数据

由于页面在已经展开的某些情况下,需要通过用户操作来调用一些当前尚未获取的数据,这就会用到异步。
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);

        }

实物储位号

在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 = `

返回实物储位号校验结果






`
    writer.Write([]byte(tpl))

}

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

frm.target = 'iframeTemp';

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

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


最终返回值获取并显示

如果你想返回其他的值,就在 golang 的函数中去随意的设置即可。_

你可能感兴趣的:(77.利用js异步获取数据)