从服务器填充一个列表_ajax填充列表-CSDN博客

本文链接：https://blog.csdn.net/xiantouxu/article/details/77504725

问题描述：根据用户对另一个表单的操作，我们用值填充一个选项列表。
解决方案：将选择的值作为参数拼接到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);
})