從服務器填充一個列表

時間 2020-01-13 標籤服務器填充一個列表

問題描述：根據用戶對另外一個表單的操做，咱們用值填充一個選項列表。
解決方案：將選擇的值做爲參數拼接到URL上發生給服務器，服務器根據參數查詢出對應的結果返回給客戶端，使用Ajax+PHP.
客戶端程序javascript

<!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

<?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 寫服務器端的程序css

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);
})