调用AJAX返回JSON、XML数据类型

1.调用AJAX返回JSON数据

用下拉列表显示Nation表民族名称

主页面:

<!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" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="sel"></select>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
    $.ajax({
        //因为不用传数据,所以data与type不用写
        url:"ChuLi.php",
        dataType:"JSON",           //dataType中T必须大写,否则会出错
        success: function(data){
            /*var js = {           //二维数组的json数据形式:
                aa:{code:"n001",name:"汉族"},
                bb:{code:"n002",name:"苗族"},
            };*/
            var str = "";
            for(var k in data)
            {
                str+="<option value=‘"+data[k][0]+"‘>"+data[k][1]+"</option>";
            }
            $("#sel").html(str);
        }
    });
});

</script>

处理页面:

<?php
include("../DB.class.php");
$db = new DB();
$sql = "select * from Nation";
$attr = $db->Query($sql);
echo json_encode($attr);  //将数组转换为json数据来输出

2.将调用AJAX返回JSON数据方法封装到数据库类里面

class DB
{
    public $host="localhost";  //服务器地址     默认值为localhost
    public $uid="root";        //数据库用户名  默认值为root
    public $pwd="123";    //数据库密码    默认值为123

      //AJAX调用返回JSON数据
    public function JsonQuery($sql,$type=0,$db="mydb")
    {
        //1.造数据源
        $dsn = "mysql:dbname=$db;host=$this->host";
        //2.造对象
        $pdo = new PDO($dsn,$this->uid,$this->pwd);
        //3.预处理
        $stm = $pdo->prepare($sql);
        //4.执行预处理语句
        if($stm->execute())
        {
            if($type==0)
            {
                $attr = $stm->fetchAll();
                return json_encode($attr);
            }
            else
            {
                if($stm)
                {
                    return "OK";
                }
                else
                {
                    return "NO";
                }
            }
        }
        else
        {
            echo "执行失败!";
        }
    }
}    

2.调用AJAX返回XML数据

XML(Extensible Markup Language)可扩展标记语言标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言

XML与Access,Oracle和SQL Server等数据库不同,数据库提供了更强有力的数据存储和分析能力,例如:数据索引、排序、查找、相关一致性等,XML仅仅是展示数据。事实上XML与其他数据表现形式最大的不同是:他极其简单。这是一个看上去有点琐细的优点,但正是这点使XML与众不同。

XML的简单使其易于在任何应用程序中读写数据,这使XML很快成为数据交换的唯一公共语言,虽然不同的应用软件也支持其它的数据交换格式,但不久之后他们都将支持XML,那就意味着程序可以更容易的与Windows、Mac OS, Linux以及其他平台下产生的信息结合,然后可以很容易加载XML数据到程序中并分析他,并以XML格式输出结果。

XML:页面之间传递数据,跨平台传递,核心是标签

HTML:超文本标记语言,核心是标签

XML 被设计为传输和存储数据,其焦点是数据的内容。

HTML 被设计用来显示数据,其焦点是数据的外观。

HTML 旨在显示信息,而 XML 旨在传输信息。

XML特点
1.标签名可以自己定义
2.有且只有一个根
3.大小写敏感,双标签大小写必须一样
4.双标签必须完整

XML格式:

<xml version="1.0" >
<Nation>
    <one>
        <code>n001</code>
        <name>汉族</name>
    </one>
    <two>
        <code>n002</code>
        <name>苗族</name>
    </two>
</Nation>

还是用下拉列表显示Nation表民族名称的例子:

主页面:

<!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" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>

<body>
<select id="sel"></select>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
    $.ajax({

        url:"chulixml.php",
        dataType:"XML",    //返回XML文档
        success: function(data){
                //从XML文档中根据标签名找内容,相当于解析页面数据,例如:
                //$(data).find("code").eq(0).text();//标签名为code的第一个元素的内容
                //根据最外层的根nation取到所有内容,再取里面的子元素放入变量ch中
                var ch = $(data).find("nation").children();
                var str = "";
                for(var i=0;i<ch.length;i++)
                {
                    //从ch中循环出每一条数据的code与name
                    var code = $(ch[i]).find("code").text();
                    var name = $(ch[i]).find("name").text();
                    str+="<option value=‘"+code+"‘>"+name+"</option>";
                }

                $("#sel").html(str);
            }

        });
});

</script>

处理页面:

<?php
include("../DB.class.php");
$db = new DB();
$sql = "select * from Nation";
$attr = $db->Query($sql);
//返回XML数据就要写一个XML文档
/*echo "<?xml version=‘1.0‘?>"; */   //XML文档的头可以不写
echo "<nation>";
foreach($attr as $k=>$v)
{
    echo "<shuju{$k}>";
    echo "<code>{$v[0]}</code>";
    echo "<name>{$v[1]}</name>";
    echo "</shuju{$k}>";
}
echo "</nation>";

时间: 2024-10-21 06:19:40

调用AJAX返回JSON、XML数据类型的相关文章

javascript 解析ajax返回的xml和json格式的数据

写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心,是ajax请求和响应的信息载体,单是不同浏览器创建方式不同 (2).请求路径 (3).使用open方法绑定发送请求 (4).使用send() 方法发送请求 (5).获取服务器返回的字符串   xmlhttpRequest.responseText; (6).获取服务端返回的值,以xml对象的形式存

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

jQuery调用WebService返回JSON数据

相信大家都比较了解JSON格式的数据对于ajax的方便,不了解的可以从网上找一下这方面的资料来看一下,这里就不多说了,不清楚的可以在网上查一下,这里只说一下因为参数设置不当引起的取不到返回值的问题. 在用jQuery调用WebService的时候,它contentType默认为 以下是WebService服务端的代码: 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.W

[转]jQuery调用ASPX返回json

本文转自:http://www.cnblogs.com/fire-phoenix/archive/2009/11/13/1614146.html 本文介绍如何在ASP.NET(ASP.NET/AJAX)里使用基于JQuery的AJAX技术.(源代码下载见最后) 在使用JQuery前,请到www.jquery.com下载最新版本的js代码,然后再代码里使用 <script src="_scripts/jQuery-1.3.2.js" type="text/javascri

快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

(转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面.可以说这种方法应该是实现无刷新分页的基础,而且在开发过程中经常被用到.这里的后台部分由JAVA来实现. 这个例子也在上一篇中那个项目中实现.新建一个SecondTest.html页面,定义一个按钮,并给这个按钮绑定事件ajaxJson

JQuery处理json与ajax返回JSON实例[转]

json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]. 很多情况下是对象数组,那就是这样:  代码如下

JQuery处理json与ajax返回JSON实例

一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]. 很多情况下是对象数组,那就是这样: 代码如下 复制代码 [{“AreaId”:”123”},{“AreaId”:”345”}] 其实数组也是一个对象,上面的格式也可以写成这样: 代码如下 复制代码 {“

(转)JQuery处理json与ajax返回JSON实例

son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]. 很多情况下是对象数组,那就是这样:  代码如下 复

ASP.net jQuery调用webservice返回json数据的一些问题

之前寒假时,试着使用jQuery写了几个异步请求demo, 但是那样是使用的webform普通页面,一般应该是用 webservice 居多. 最近写后台管理时,想用异步来实现一些信息的展示和修改, 这是第一次真正的在实际中运用ajax,卡了一个小时才做好简单的信息展示. 在这之间遇到了两个问题.写下来分享给大家,也加深一下自己的印象. 有错误的地方还请大神指出. 前端js代码: 1 <script type="text/javascript"> 2 $(function