在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--引用jquery代码包-->

<script src="../jquery-1.11.2.min.js"></script>

<title>无标题文档</title>

</head>

<select id="nation"></select>

<body>

<script type="text/javascript">

$.ajax({

    url:"JSON_chuli.php", //url跳转到指定的处理页面

    dataType:"JSON", //返回JSON数据类型，返回的是二维数组

    success: function(data){

        var str ="";  //先定义一个空的数组str

        /*for(var i=0;i<data.length;i++){

            str = str+"<option value='"+data[i].Code+"'>"+data[i].Name+"</option>";  //求data循环出来的索引[i]，取出Code列，显示出循环出来的Name列

        }*/

        for(var s in data){ //定义一个变量 s代表索引 in data初始值，进循环才有值

            str = str+"<option value='"+data[s].Code+"'>"+data[s].Name+"</option>"; //求data循环出来的索引[s]，取出Code列，显示出循环出来的Name列

        }

        $("#nation").html(str); //$("")找到下拉，将求出来的Name列值放到下拉列表中

    }

});

处理页面

<?php

include("../DBDA.class.php");//include关键字，纯处理页面引用封装好类的代码包

$db = new DBDA();  //造一个接受对象关键字new

$sql = "select * from nation"; //访问数据库查询nation表所有数据

//json_encode()此方法需要关联数组

//使用json_encode数组内容的编码格式必须是 utf8的

echo json_encode($db->GuanQuery($sql));  //调用引用表里的关联函数GuanQuery

?>

效果

在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据的更多相关文章

  1. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. jsp中将后台传递过来的json格式的list数据绑定到下拉菜单select

    <span style="white-space:pre"> </span> <select><c:forEach var="f ...

  3. THINKPHP_(5)_THINKPHP6接收ajax下拉菜单提交的数据，存在的bug

    反思: 国产总是不尽人意,但是要支持国产. ThinkPHP的6接收ajax的post数据,存在一个bug.即ajax传递的json数据,在thinkphp后端解析出来后,并非直接的json格式. 描 ...

  4. ajax三级联动下拉菜单

    ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...

  5. 2016/4/5 Ajax ①用户名 密码 登陆 注册 ② 判断用户名是否已存在 ③点击按钮出现民族选项下拉菜单 ④DBDA类 加入Ajaxquery方法 数组变字符串 字符串拆分

    ①登陆   注册    查表匹配    0405Ajax.php   ②判断用户名是否存在 <!DOCTYPE html> <html lang="en"> ...

  6. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

  7. 【easyui-combobox】下拉菜单自动补全功能，Ajax获取远程数据源

    这个是针对easyUI的下拉菜单使用的,Ajax获取远程数据源 HTML 页面 <input id="uname" name="uname" class= ...

  8. php+ajax的三级联动下拉菜单

    封装一个三级联动,就可以在任何页面进行引用了 先写个页面引用一下这个js <head> <meta http-equiv="Content-Type" conte ...

  9. 下拉框数据的动态选择，类似级联ajax刷新数据

    简单的两个下拉列表,第二个中的数据与第一个下拉框相关: --------------------var selected = $(this).children('option:selected').v ...

随机推荐

  1. web,xml中关于filter的使用

    从J2EE1.3开始,Servlet2.3规范中加入了对过滤器的支持.过滤器能够对目标资源的请求和响应进行截取.过滤器的工作方式分为四种,下面让我们分别来看看这四种过滤器的工作方式:1.request ...

  2. python module install

    1.issue: How can I bypass kivy module error: ImportError: DLL load failed: The specified module coul ...

  3. poj 2068 Nim（博弈dp）

    Nim Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 1403   Accepted: 791 Description Le ...

  4. java 自动化测试平台构建思想

    很多人迷信于自动化测试平台,认为这玩意是万能的,对于测试人员,不需要写代码,只需要在平台上选择一下,输入一点参数,就能达到测试的目的.想法是不错的,但关键在于实现这个平台的过程,这个就需要一个WEB开 ...

  5. <script> 的defer和async

    <script src="../file.js" async="async"></script> file.js---- 仅仅只有ale ...

  6. Clipboard Action for Mac（智能剪贴板历史管理器）破解版安装

    1.软件简介    Clipboard Action 是 macOS 系统上一款智能剪贴板历史管理器,它允许剪贴板历史中的每一段内容执行操作.使用 AppleScript 或 Automator 工作 ...

  7. 训练集测试集划分 train_test_split(X, y, stratify=y）

    from sklearn.model_selecting import train_test_spilt() 参数stratify: 依据标签y,按原数据y中各类比例,分配给train和test,使得 ...

  8. 第三部分：Android 应用程序接口指南---第一节：应用程序组件---第一章1-1.Fragment

    第1-1章 Fragments 在Activity中的fragment代表的是一种行为或用户界面的一部分.你可以在activity中结合多个fragments创建一个多面板UI,并可以在多个activ ...

  9. 译：7.使用Spring MVC服务Web内容

    本指南向您介绍了使用Spring创建“hello world”网站的过程.阅读原文:Serving Web Content with Spring MVC 1. 你将会构建什么? 您将构建一个具有静态 ...

  10. idea language level 介绍

    language level 介绍 其他 IDE 没有看到类似 language level 的设置,所以这个功能应该算是 IntelliJ IDEA 特有的,可是 IntelliJ IDEA 官网也 ...