jquery用ajax方式從後臺獲取json資料後如何將內容填充到下拉列表
阿新 • • 發佈：2019-01-09
從後臺獲取json資料，將內容填充到下拉列表，程式碼非常簡單，具體過程請看下面程式碼。
需求：url:連結 par：ID sel：下拉列表選擇器
function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value="' + json[i].Id + '">' + json[i].Name + '</option>') }; $(sel).prepend('<option value="0">請選擇</option>') }); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var parameter = {}; $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', data: parameter, timeout: 1000, cache: false, beforeSend: LoadFunction, //載入執行方法 error: erryFunction, //錯誤執行方法 success: succFunction //成功執行方法 }) function LoadFunction() { $("#list").html('載入中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval將字串轉成物件陣列 //var json = { "id": "10086", "uname": "zhangsan", "email": "[email protected]" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //陣列 $.each(json, function (index, item) { //迴圈獲取資料 var name = json[index].Name; var idnumber = json[index].IdNumber; var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> </head> <body> <ul id="list"> </ul> </body> </html>