ajax中网页传输JSON——下拉列表显示练习

Posted 坏小子之涛声依旧

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax中网页传输JSON——下拉列表显示练习相关的知识，希望对你有一定的参考价值。

以json返回数据类型显示“民族下拉列表”

 

第一：body页面显示部分

<title>JSON下拉显示Nation表中的数据</title>
<script src="jquery-2.0.0.min.js"></script>
</head>
<body>
<h1>用下拉显示Nation表中的数据</h1>
<select id="sel">
</select>
</body>

　　

第二：jscrip中ajax后台函数运行部分

<script type="text/javascript">
$(document).ready(function(e) {
    
		$.ajax({
	      url:"chuli.php",
		  dataType:"JSON",
		  success: function(data){
			  
			  var str="";
			  
			  for(k in data)
			  {
				  str+="<option value=\'"+data[k][0]+"\'>"+data[k][1]+"</option>";
			  }
			  $("#sel").html(str);
			  }
	
	});
})

</script>

　　

第三：后台调用数据库chuli.php代码

<?php
   include("DBDA.class.php");
   $db=new DBDA();
   
   $sql="select * from nation";
   $attr=$db->Query($sql);
   
   echo json_encode($attr);  //json_encode()将数组直接转化为json形式

　　json_encode()函数可以理解为将数组转化为json形势

json定义形式{key1:value1,

                    key2:value2,

                    key3:value3.....}

以上是关于ajax中网页传输JSON——下拉列表显示练习的主要内容，如果未能解决你的问题，请参考以下文章

ajax中网页传输TEXT——带有删除功能的数据库表格显示练习

JQuery+Ajax实战三级下拉列表联动

网页设计中选中下拉列表中选项后如何实现页面刷新？

如何使用 JSON 数据填充下拉列表作为 jQuery 中的 ajax 响应

使用 JSON 结果填充下拉列表 - 使用 MVC3、JQuery、Ajax、JSON 的级联下拉

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表