ajax返回的两种数据类型xml和json用法
Posted 画里画着他画她i
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax返回的两种数据类型xml和json用法相关的知识，希望对你有一定的参考价值。
用xml传单个数据
首先在servlet类里面写好要传的数据，Dog是模拟从数据库中提取的内容，
用response.getwrite（）.append（）传回数据，要注意表头<?xml version=\'1.0\'?>不能写错，根是唯一的
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//模拟从数据库中提取的信息
Dog d = new Dog();
d.setName("name");
d.setZhuren("haha");
d.setAge(2);
d.setZhonglei("aaa");
//用xml往回传
response.getWriter().append("<?xml version=\'1.0\'?>");//表头
response.getWriter().append("<dog>");//根，是唯一的
response.getWriter().append("<name>"+d.getName()+"</name>");
response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
response.getWriter().append("<age>"+d.getAge()+"</age>");
response.getWriter().append("<zhonglei>"+d.getZhonglei()+"</zhonglei>");
response.getWriter().append("</dog>");
}
在jsp页面
首先引用"js/jquery-1.11.1.min.js"，在#d元素上写一个click事件，里面用ajax引擎处理数据，
url是接收数据的路径，datatype是返回什么类型的数据
•"xml": 返回 XML 文档，可用 jQuery 处理。
•"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
•"script": 返回纯文本 javascript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
•"json": 返回 JSON 数据 。
•"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
•"text": 返回纯文本字符串
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d").click(function(){
$.ajax({
url:"textdog",//从textdog的servlet类中接受数据
data:{},
type:"POST",
dataType:"xml",//返回类型是xml
success:function(aaa){
//解析返回的aaa
var n = $(aaa).find("name").text();
var z = $(aaa).find("zhuren").text();
var a = $(aaa).find("age").text();
var zl =$(aaa).find("zhonglei").text();
//在页面上把数据显示在通过#u找到的元素里面
$("#u").append("<li>"+n+"</li>");
$("#u").append("<li>"+z+"</li>");
$("#u").append("<li>"+a+"</li>");
$("#u").append("<li>"+zl+"</li>");
}
});
});
});
</script>
演示结果：
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
用xml传集合，
首先在servlet类里面写好要传的数据，跟单个基本一样，注意一下根，因为有多个dog 所以要用一个更大的chongwu作为根， 把所有的dog包起来
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//模拟从数据库提取的数据
Dog d1 = new Dog();
d1.setName("日天");
d1.setZhuren("爸爸");
d1.setAge(1);
d1.setZhonglei("泰迪");
Dog d2 = new Dog();
d2.setName("拖拖");
d2.setZhuren("坨坨粑粑");
d2.setAge(2);
d2.setZhonglei("金毛");
Dog d3 = new Dog();
d3.setName("凡凡");
d3.setZhuren("凡凡爸爸");
d3.setAge(3);
d3.setZhonglei("哈士奇");
//将d1d2d3放到list中
ArrayList<Dog> list = new ArrayList<>();
list.add(d1);
list.add(d2);
list.add(d3);
//用xml把数据传到页面
response.getWriter().append("<?xml version=\'1.0\'?>");//表头
//根，这里因为不只一个dog，所以我们用一个更大的chongwu包起来
response.getWriter().append("<chongwu>");
//遍历
for(Dog d : list){
response.getWriter().append("<dog>");
response.getWriter().append("<name>"+d.getName()+"</name>");
response.getWriter().append("<zhuren>"+d.getZhuren()+"</zhuren>");
response.getWriter().append("<age>"+d.getAge()+"</age>");
response.getWriter().append("<zhonglei>"+d.getZhonglei()+"</zhonglei>");
response.getWriter().append("</dog>");
}
response.getWriter().append("</chongwu>");
}
在jsp，同样先引入jar包
要先把所有的dog放到一个dogs里面，相当于一个数组，
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d").click(function(){
$.ajax({
url:"textdog1",
data:{},
type:"POST",
dataType:"XML",
success:function(hhh){
//先把所有的dog放到dogs里面，相当于一个数组，不是一个对象
var dogs = $(hhh).find("dog");
//tb是找到的jquery对象
var tb =$("#tb");
//循环dogs
for(var i =0;i<dogs.length;i++){
var n = $(dogs).eq(i).find("name").text();
var z = $(dogs).eq(i).find("zhuren").text();
var a = $(dogs).eq(i).find("age").text();
var lei =$(dogs).eq(i).find("zhonglei").text();
//把信息拼接
var tr = "<tr>";
tr += "<td>"+n+"</td>";
tr += "<td>"+z+"</td>";
tr += "<td>"+a+"</td>";
tr += "<td>"+lei+"</td>";
tr += "</tr>";
//把tr放到td中
$(tb).append(tr);
}
}
})
})
})
</script>
结果演示：
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
用json传数据，首先导入json jar包，在servlet类里面写好要传的数据
先把dog放在jo这个json中，然后把jo放到obj这个json中，在页面中用jo中的key就可以直接取值了
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//编码格式
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
//
Dog d = new Dog();
d.setName("拖拖");
d.setZhuren("李哈哈");
d.setAge(2);
d.setZhonglei("金毛");
//把dog放到json中，用put赋值，key和value
JSONObject jo = new JSONObject();
jo.put("name",d.getName());
jo.put("zhuren", d.getZhuren());
jo.put("age", d.getAge());
jo.put("zhonglei", d.getZhonglei());
//obj这个json中再放jo这个json，obj里面放着jo
JSONObject obj = new JSONObject();
obj.put("dog", jo);
response.getWriter().append(jo.toString());
}
在jsp中，把返回数据类型改为json，然后把数据显示在页面中
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#d").click(function(){
$.ajax({
url:"textjson1",//从textjson1的servlet类中接受数据
data:{},
type:"POST",
dataType:"JSON",//返回的数据类型是json
success:function(aaa){
//把数据显示在通过#u找到的元素里面
$("#u").append("<li>"+aaa.name+"</li>");
$("#u").append("<li>"+aaa.zhuren+"</li>");
$("#u").append("<li>"+aaa.age+"</li>");
$("#u").append("<li>"+aaa.zhonglei+"</li>");
}
});
});
});
</script>
显示结果：
以上是关于ajax返回的两种数据类型xml和json用法的主要内容，如果未能解决你的问题，请参考以下文章