Jquery

最新推荐文章于 2024-10-30 16:06:51 发布

虞546

最新推荐文章于 2024-10-30 16:06:51 发布

阅读量60

点赞数

分类专栏： java 文章标签： jquery ajax linq

本文链接：https://blog.csdn.net/weixin_61557810/article/details/125226937

版权

java 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这篇博客探讨了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;
    })