做网站    网页设计、制作    FLASH导入页设计    网站策划、开发    后台程序维护、升级    网站解决方案
技术支持：苏玮 电话：15011022561提交表单值到页面用到的AJAX代码

网页设计->AJAX

提交表单值到页面用到的AJAX代码

< script type="text/javascript" >
var xmlHttp;
function createXMLHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }
}

function doSearch(){
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET","http://localhost/dynamicContent.xml",true);
    xmlHttp.send(null);
}

function handleStateChange(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            clearPreviousResults();
            parseResults();
        }
    }
}

function clearPreviousResults(){
    var header = document.getElementById("header");
    if(header.hasChildNodes()){
        header.removeChild(header.childNodes[0]);
    }
    var tableBody = document.getElementById("resultsBody");
    while(tableBody.childNodes.length > 0){
        tableBody.removeChild(tableBody.childNodes[0]);
    }
}

function parseResults(){
    var results = xmlHttp.responseXML;
    var property = null;
    var address = "";
    var price = "";
    var comments = "";
    var properties = results.getElementsByTagName("property");
    for(var i = 0; i < properties.length; i ++){
        property = properties[i];
        address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
        price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
        comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
        addTableRow(address,price,comments);
    }
    var header = document.createElement("h2");
    var headerText = document.createTextNode("Results:");
    header.appendChild(headerText);
    document.getElementById("header").appendChild(header);
    document.getElementById("resultsTable").setAttribute("boder","1");
}

function addTableRow(address,price,comments){
    var row = document.createElement("tr");
    var cell = createCellWithText(address);
    row.appendChild(cell);

    cell = createCellWithText(price);
    row.appendChild(cell);

    cell = createCellWithText(comments);
    row.appendChild(cell);
    
    document.getElementById("resultsBody").appendChild(row);
}

function createCellWithText(text){
    var cell = document.createElement("td");
    var textNode = document.createTextNode(text);
    cell.appendChild(textNode);
    
    return cell;
}
< /script > 

    <h1>Search Real Estate Listings</h1>
    <form action="#">
        Show listings from
            <select>
                <option value="50000">$50,000</option>
                <option value="100000">$100,000</option>
                <option value="150000">$150,000</option>
            </select>
            to
            <select>
                <option value="100000">$100,000</option>
                <option value="150000">$150,000</option>
                <option value="200000">$200,000</option>
            </select>
        <input type="button" value="Search" onClick="doSearch();"/>
    </form>
    <span id="header">
    </span>
    <table id="resultsTable" width="75%" border="0">
        <tbody id="resultsBody">
        </tbody>
    </table>

发表评论

关闭窗口   来源:网络  16  2007-05-08