javascript自动填充表单、预览链接内容

最新推荐文章于 2024-09-22 13:42:20 发布

ricky_zhu_li_ke

最新推荐文章于 2024-09-22 13:42:20 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/zhulike2011/article/details/11330389

版权

javascript自动填充表单的功能是很多网站都会提供的，这涉及到了一点ajax技术，可以采用ajax来实现自动填充表单，就是通过根据你填充的字母和XmlHttpRequest对象传输过来的xml文件进行比对，最终自动填充表单，这适合填写固定的地址之类的表单。可以在点击链接之前就预览该链接指向的页面内容。

注意：这个必须在IE浏览器下运行才能起作用，因为这里是采用ActiveX对象进行ajax中XmlHttpRequest对象的创建。而火狐浏览器等现代浏览器不支持ActiveX对象

js文件如下：

/**
 * Created with JetBrains WebStorm.
 * User: Administrator
 * Date: 13-9-6
 * Time: 下午2:43
 * To change this template use File | Settings | File Templates.
 */
window.οnlοad=initAll;
var xmlHttp = false;
var  Xpos, Ypos;
var stateNameArray=new Array;
function initAll(){
    document.getElementById("textFile").οnclick=getNewFile;
    document.getElementById("xmlFile").οnclick=getNewFile;
    var arrayList=document.getElementsByTagName("a");
    for(i=0;i<arrayList.length;i++){
        arrayList[i].οnmοuseοver=showPreview;
        arrayList[i].οnmοuseοut=hidePreview;
    }
    document.getElementById("searchField").οnkeyup=searchText;
    if(window.XMLHttpRequest){
         xmlHttp =new window.XMLHttpRequest();
    }
    else{
        if(window.ActiveXObject){
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e){
                try {
                    xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP");
                }catch(e){alert("ie browser")}
            }
        }
    }

    if(xmlHttp){
        xmlHttp.onreadystatechange=popup;
        xmlHttp.open("GET","http://localhost/us-state.xml",true);
        xmlHttp.send(null)

    }
}
function popup(){
   if(xmlHttp.readyState==4){
       if(xmlHttp.status==200){
           if(xmlHttp.responseXML){
                var current =xmlHttp.responseXML.getElementsByTagName("item");
                for(var i=0;i<current.length;i++){
                     stateNameArray[i]=current[i].getElementsByTagName("label")[0].firstChild;
                }
           }
       }
       else{
           document.getElementById("tishi").innerHTML="the xmlHttp's status value is"+xmlHttp.status;
       }
   } else{
       document.getElementById("tishi").innerHTML="the readyState's value is"+xmlHttp.readyState;
   }
}
function searchText(){
   var inputValue = document.getElementById("searchField");
   var contentPop= document.getElementById("popmenu");

   contentPop.innerHTML="";


   for(var i=0;i<stateNameArray.length;i++){
       var stateValue= stateNameArray[i].nodeValue
       if(stateValue.toLowerCase().indexOf(inputValue.value.toLowerCase())==0){
           var tempDiv= document.createElement("div");
           tempDiv.innerHTML=stateNameArray[i].nodeValue;
           tempDiv.οnclick= makeChoice;
           tempDiv.className="suggestion"
           contentPop.appendChild(tempDiv);
       }
   }
    var number=contentPop.children.length;
   if(number==0){
       contentPop.style.display="none";
       inputValue.className="error";
   }
   if(number==1){
       inputValue.value=document.getElementById("popmenu").firstChild.innerHTML;
   }
}
function makeChoice(evt){
    if(evt){
      var  url=evt.target;
    }
    else{
      var  url=window.event.srcElement;
    }
    document.getElementById("searchField").value=url.innerHTML;
    document.getElementById("popmenu").style.display="none";

}
function hidePreview(){
    document.getElementById("preview").style.visibility="hidden";
}
function showPreview(evt){
    var url;
    if(evt){
         url=evt.target;
    }
    else{
        evt=window.event
        url=window.event.srcElement;
    }

    Xpos=evt.clientX; Ypos=evt.clientY;
    if(xmlHttp){
        xmlHttp.onreadystatechange=showPreText;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
    }
    else{
        document.getElementById("tishi").innerHTML="something is wrong with xmlhttp";
    }
}
function showPreText(){
    var target= document.getElementById("preview") ;
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            target.innerHTML=xmlHttp.responseText;
            target.style.left=Xpos+2+"px"
            target.style.top=Ypos+2+"px";
            target.style.visibility="visible"
            target.οnmοuseοut=hidePreview;
        }
    }else{
        document.getElementById("tishi").innerHTML="the xml has not already"
    }
}
function getNewFile(){

    if(xmlHttp){
        xmlHttp.onreadystatechange=showContent;
        xmlHttp.open("GET",this.href,true);
        xmlHttp.send(null);
    }
    else{
        document.getElementById("tishi").innerHTML="something is wrong with xmlhttp";
    }
    return false;
}
function showContent(){
    var outMessage="";
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
            if(xmlHttp.responseXML && xmlHttp.responseType=="text/xml"){
                outMessage=xmlHttp.responseXML.getElementsByTagName("choices")[0].content;
            }
            else{
                outMessage=xmlHttp.responseText;
            }
        }
        else {
            outMessage="xmlhttprequest is wrong with "+xmlHttp.status;
        }
    }
    document.getElementById("tishi").innerHTML=outMessage;
}

<!DOCTYPE html>
<html>
<head>
    <title></title>
<script src="xmlHttp.js" type="text/javascript"></script>
<style type="text/css">
    #preview {
        width:700px;height:300px;
        position: absolute;font-size:14px;
        border:1px silver solid;line-height:2em;font-height:2em;background-color:lightsalmon;color:saddlebrown;
        overflow: hidden;
    }
    .suggestion {
        background-color: #fff;
        border:1px solid red;
        width:120px;
        height:24px;
    }
    .suggestion:hover{
        background-color: #d0d0b9;

    }
    #searchField .error {
        background-color:yellowgreen;
    }
    #popmenu {
        position: absolute; cursor: pointer;
    }
</style>
</head>
<body>

<p id="tishi"></p>
<div><a href="http://localhost/test.txt" id="textFile">need the text file</a></div>
<div><a href="http://localhost/us-state.xml" id="xmlFile"> need the xml file</a></div>
<div style="background-color:#d4ff8e;font-size:3em;a:text-decoration:none;a:hover:{color:indianred};">
    <ul style="list-style: none">
        <li><a href="http://localhost/templets/qimi/index.htm">http://localhost/templets/qimi/index.htm</a></li>
        <li><a href="http://localhost/templets/qimi/sbar.htm">http://localhost/templets/qimi/sbar.htm</a></li>
        <li><a href="http://localhost/templets/qimi/head.htm">http://localhost/templets/qimi/head.htm</a></li>
        <li><a href="http://localhost/templets/qimi/footer.htm">http://localhost/templets/qimi/footer.htm</a></li>
        <li><a href="http://localhost/templets/qimi/tag.htm">http://localhost/templets/qimi/tag.htm</a></li>
    </ul>
</div>
<div id="preview"></div>
<div>
    <h4>enter the us states'name</h4>
    <input id="searchField" type="text" size="20" autocomplete="off" />
</div>
<div id="popmenu"></div>
</body>
</html>