从服务器填充一个列表

来源：互联网发布：网络软文兼职编辑：程序博客网时间：2024/06/15 01:12

问题描述：根据用户对另一个表单的操作，我们用值填充一个选项列表。
解决方案：将选择的值作为参数拼接到URL上发生给服务器，服务器根据参数查询出对应的结果返回给客户端，使用Ajax+PHP.
客户端程序

<!DOCTYPE html><html><head>    <title>On Demand Select</title>    <style type="text/css">    #nicestuff{        display: none;;        margin:10px 0;    }    #nicething{        width: 400px;    }    </style></head><body><form action="backuppage.php" method="get">    <p>Select one:</p>    <!-- fieldset 元素可将表单内的相关元素分组。 -->    <fieldset id="nicething">        <input type="radio" name="nicethings" value="brid">        <label for="brid">Brids</label><br>        <input type="radio" name="nicethings" value="flower">        <label for="flower">Flowers</label><br>        <input type="radio" name="nicethings" value="sweets">        <label for="sweets">Sweets</label><br>        <input type="radio" name="nicethings" value="cuddles">        <label for="cuddles">Cut Critters</label><br>    </fieldset>    <input type="submit" id="submitButton" value="get nice things">    <select name="nicestuff" id="nicestuff"></select></form><script>var xmlHttp;function populateSelect() {    var value;    var inputs = document.getElementsByTagName('input');//不可以使用css选择器    var inputs2 = document.querySelectorAll('input[type="radio"]');//可以使用CSS选择器    console.log(inputs);    console.log(inputs2);    for(var i =  0;i<inputs.length;i++){        if(inputs[i].checked){            value = inputs[i].value;            console.log(value);            break;        }    }    //准备请求    if(!xmlHttp){        xmlHttp = new XMLHttpRequest();    }    var url = "nicething.php?nicething="+value;    console.log(url);    xmlHttp.open("GET",url,true);    xmlHttp.onreadystatechange = getThings;    xmlHttp.send(null);}function getThings(){    if(xmlHttp.readyState ==4 && xmlHttp.status==200){        var select = document.getElementById("nicestuff");        select.length = 0;        var nicethings = xmlHttp.responseText.split(",");        console.log(nicethings);        for(var i =0;i<nicethings.length;i++){            select.options[select.length] = new Option(nicethings[i],nicethings[i]);        }        select.style.display = "block";    }else if(xmlHttp.readyState == 4 && xmlHttp.status != 200){        alert("No items resturned for request");    }}document.getElementById("submitButton").style.display = "none";document.getElementById("nicething").onclick = populateSelect;//populateSelect();</script></body></html>

服务器端程序

<?php    if(empty($_REQUEST['nicething'])){        echo "No state send";    }else{        //从传递的搜索字符串的开始和末尾删除空白        $search = trim($_REQUEST['nicething']);        //echo "$search";        switch ($search) {            case 'cuddles':                $result = "puppies,kittens,gerbis";                break;            case 'sweets':                $result ="licorice,cake,cookies,custard";                break;            case 'brid':                $result = "robin,mokingbird,finch,dove";                break;            case 'flower':                $result = "roses,lilys,daffadils,pansies";                break;            default:                $result = "No Nice Things Found";                break;        }        echo $result;    }?>

这里写图片描述
下面尝试使用nodejs 写服务器端的程序

var http = require('http');var url = require('url');//启动服务器var server = http.createServer().listen(8080);server.on('request',function(req,res){    var search = url.parse(req.url).query;    if(search!=null){        search = search.split("=")[1];//nicething=bird   ==> bird    }else{        search = "brid";    }    var result;    switch (search) {            case 'cuddles':                result = "puppies,kittens,gerbis";                break;            case 'sweets':                result ="licorice,cake,cookies,custard";                break;            case 'brid':                result = "robin,mokingbird,finch,dove";                break;            case 'flower':                result = "roses,lilys,daffadils,pansies";                break;            default:                result = "No Nice Things Found";                break;        }    res.writeHeader(200,{        "Content-Type":"application/json",        "Access-Control-Allow-Origin":"*",//允许跨域        });    res.end(result);    //res.end(str);})

阅读全文

0 0