ajax请求json和xml数据及对json和xml格式数据的解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: ajax请求json和xml数据及对json和xml格式数据的解析
最近写插件的时候,遇到xml格式的数据,以前用xml比较少,一直都是json格式。这里对json和xml做个总结。

一、ajax请求json数据并解析


ajax的写法:


$.ajax({
      url: 'url',//接口的url
      type: 'POST',
      dataType: 'json',//返回数据的类型是json
      success : (data) => {
        console.log(data);//data是返回的数据,是String格式
        let result=JSON.stringify(data); //将data转换成json格式 
      },
      error : () => {
        alert('请求失败');
      }
    });

json数据解析:


例如上面代码,success回调函数中取得了json格式的数据result。假设数据为:

{
  id : 'mike',
  name : 'laowang',
  datas : 
  [
    [age : 1, passw : 'hhh'],
    [age : 2, passw : 'gghh']
  ]
}

解析数据只要用点(.)就行了。

result.id; //mike
result.datas[1]; // [age : 2, passw : 'gghh']

请求json经常出现的跨域报错:


Access to XMLHttpRequest at ‘http://xxxx.com/xxx’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

有时候一些接口经常会出现这个错误。解决方案是把dataType的值json改为jsonp。

二、ajax请求xml数据并解析


ajax的写法:


这个和json差不多,就是把数据格式改成xml。

$.ajax({
      url: 'url',//接口的url
      type: 'POST',
      dataType: 'xml',//返回数据的类型是json
      success : (data) => {
        console.log(data);//data是返回的数据,类似于一个xml文件
      },
      error : () => {
        alert('请求失败');
      }
    });

xml数据解析:


xml数据的解析,推荐使用jQuery里面的方法。

如上代码,在success的回调函数拿到数据data之后。假设格式如下:

<?xml version="1.0" encoding="UTF-8"?>
<resp>
<city>北京</city>
<updatetime>16:27</updatetime>
<shidu>23%</shidu>
<yesterday>
    <date_1>18日星期六</date_1>
    <high_1>高温 3℃</high_1>
    <low_1>低温 -4℃</low_1>
    <day_1>
        <type_1>多云</type_1>
    </day_1>
    <night_1>
        <type_1>晴</type_1>
    </night_1>
</yesterday>
<forecast>
<weather>
    <date>19日星期天</date>
    <high>高温 6℃</high>
    <low>低温 -4℃</low>
    <day>
        <type>晴</type>
    </day>
    <night>
        <type>晴</type>
    </night>
</weather>
<weather>
    <date>20日星期一</date>
    <high>高温 5℃</high>
    <low>低温 -6℃</low>
    <day>
        <type>晴</type>
    </day>
    <night>
        <type>多云</type>
    </night>
</weather>
</forecast>
</resp>

解析xml的写法一般为:主要是$().find().each()方法,注意这是一个循环方法

  $(data).find("resp").each(function(){//在data里面找resp标签
          let updateTime=$(this).find("updatetime").text();//把updatetime标签里面的值取出来
        });
相关文章
|
1月前
|
JSON JavaScript Java
对比JSON和Hessian2的序列化格式
通过以上对比分析,希望能够帮助开发者在不同场景下选择最适合的序列化格式,提高系统的整体性能和可维护性。
43 3
|
1月前
|
JSON 数据格式 索引
Python中序列化/反序列化JSON格式的数据
【11月更文挑战第4天】本文介绍了 Python 中使用 `json` 模块进行序列化和反序列化的操作。序列化是指将 Python 对象(如字典、列表)转换为 JSON 字符串,主要使用 `json.dumps` 方法。示例包括基本的字典和列表序列化,以及自定义类的序列化。反序列化则是将 JSON 字符串转换回 Python 对象,使用 `json.loads` 方法。文中还提供了具体的代码示例,展示了如何处理不同类型的 Python 对象。
|
1月前
|
JSON Java 数据格式
springboot中表字段映射中设置JSON格式字段映射
springboot中表字段映射中设置JSON格式字段映射
129 1
|
1月前
|
JSON API 数据安全/隐私保护
拍立淘按图搜索API接口返回数据的JSON格式示例
拍立淘按图搜索API接口允许用户通过上传图片来搜索相似的商品,该接口返回的通常是一个JSON格式的响应,其中包含了与上传图片相似的商品信息。以下是一个基于淘宝平台的拍立淘按图搜索API接口返回数据的JSON格式示例,同时提供对其关键字段的解释
N..
|
7月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
71 1
|
7月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
91 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
161 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
53 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
4月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
35 0