Jquery

这篇博客探讨了XML和JSON在处理复杂业务数据时的角色。XML作为可扩展标记语言,用于描述对象并存储数据,但其操作相对繁琐。而JSON以其简洁的JavaScript对象格式,简化了数据交换,尤其在JavaScript中直接操作更为便捷。博客通过实例展示了如何在Java中将对象转换为XML和JSON,并在jQuery中解析XML和JSON数据。
摘要由CSDN通过智能技术生成

XML

                        ajax在处理复杂业务数据的时候,由于response在返回数据的时候只支持字符串,不支持java对象,所以需要将java对象转换成字符串

                        XML(eXtensible Markup Langauge)就可以使用字符串来描述对象的一种可扩展元

基本格式

文档声明

<?xml version="1.0" encoding="UTF-8"?>

标签(xml有且仅有一个根标签)

<products>
    <product></proudct>
    <product></proudct>
</products>

标签的属性

 <product pid='1' pname='洗衣机' pprcie='14'></product>

标签的内容

<product>
	  <pid>1</pid>
      <pname>洗衣机</pname>
      <pprice>14</pprice>
</product>

xml的注释

 <!-- 注释内容 -->

数组对象案例

<products>
	<product pid='1' pname='洗衣机' pprcie='14' pstock="200"></product>
    <product pid='2' pname='手机' pprcie='12' pstock="200"></product>
    <product pid='3' pname='电脑' pprcie='11' pstock="200"></product>
    <product pid='4' pname='风扇' pprcie='1111' pstock="200"></product>
</products>

java构造xml

导入dom4j依赖包

创建文档对象

Document document = DocumentHelper.createDocument();

添加根标签

 Element root = document.addElement("products");

添加属性

 product.setAttributeValue("pid",p.getPid()+"");

添加内容

 product.addText("false");

输出xml格式内容

//将document转换成string
String out = document.asXML();
//指定输出的内容的格式
resp.setContentType("text/xml");
resp.getWriter().write(out);

jquery

        概述

                jquery是一款基于document的操作框架

                提供了多次document操作的方法

                主要使用方式就是将传统的document对象装换成jquery对象进行操作,

var domObj = document.getElementBy("id"); //获取dom多项
var $jqueryObj = $(domObj);//将dom对象转换成jquery对象

Jquery对ajax返回xml结果进行处理

        把结果装换成jquery对象

 var $obj =$(res)

从jquery对象中找到元素的标签集合

var prodcuts =  $obj.find("product");

在标签集合中的内容属性都获取出来进行html页面的拼接

var content = '';//需要添加到表格中的内容
for (i=0;i<prodcuts.length;i++){
    content += '<tr>';
    //prodcuts[i]是一个dom对象
    //将dom对象转换成jquery对象,才会有相关的方法
    //console.log(prodcuts[i]);
    //console.log("pid:"+$(prodcuts[i]).attr("pid"));
    content += '<td>'+$(prodcuts[i]).attr("pid")+'</td>'
    content += '<td>'+$(prodcuts[i]).attr("pname")+'</td>'
    content += '<td>'+$(prodcuts[i]).attr("pprice")+'</td>'
    content += '<td>'+$(prodcuts[i]).attr("pstock")+'</td>'
    content += '<td> <a href="#">加入购物车</a> </td>'
    content +='</tr>'
}

将拼接结果放入到指定标签中去

//使用jquery进行操作,jquery通过选择器找到一个jquery对象
var $tbody = $("#content");
$tbody.empty();//清空原有的数据
//使用jquery对象将数据放入$tbody.append(content);

JSON    

  • 传统的ajax在处理复杂数据的时候,主要使用的是xml的方式进行数据存储,但是xml操作起来很麻烦,java对象要转换成xml,在js中还需要通过dom操作获取xml中的内容,所以很麻烦

  • 新的格式JSON(Java Script Object Notation),使用的是js的对象语法进行数据的存储,可以直接在js中使用

  • 在JSON只有两种格式对象,和数组

    • 对象格式

      {
      pid:1,
      pname:"洗衣机",
      pprice:15,
      }

      数组格式

    • [
          {
              pid:1,
              pname:"洗衣机",
              pprice: 15,
              pstock: 100
      	},
          {
              pid:2,
              pname:"电视机器",
              pprice: 16,
              pstock: 100
          }
      ]

      java对象装换为json对象

    • 导入fastjson依赖包

    • 在java代码中将java对象装换成json格式

       //将数组转换成json对象String 
      jsonString = JSON.toJSON(list).toString();
      //输出到前端resp.setContentType("text/json");
      resp.getWriter().write(jsonString);

          在浏览器中,可以直接对json对象进行操作

      jQuery.ajax({
          url:"plist.do",//获取数据的地址路径
          method:"GET",
          success:function(res){//回调方法
      
      				 var content = '';
      				 for(let i=0;i<res.length;i++){
      
      					 content += '<tr>';
      					 content += '<td>'+ res[i].pid+'</td>'
      					 content += '<td>'+ res[i].pname+'</td>'
      					 content += '<td>'+ res[i].pprice+'</td>'
      					 content += '<td>'+ res[i].pstock+'</td>'
                               content += '<td> <a href="#">加入购物车</a> </td>'
                               content +='</tr>'
                           }
                           var tbody = document.getElementById("content");
                           //将数据放入到tbody中
                           tbody.innerHTML = content;
          })

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值