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

简介: 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标签里面的值取出来
        });
相关文章
|
10月前
|
JSON API 数据格式
淘宝拍立淘按图搜索API系列,json数据返回
淘宝拍立淘按图搜索API系列通过图像识别技术实现商品搜索功能,调用后返回的JSON数据包含商品标题、图片链接、价格、销量、相似度评分等核心字段,支持分页和详细商品信息展示。以下是该API接口返回的JSON数据示例及详细解析:
|
10月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
10月前
|
JSON API 数据安全/隐私保护
Python采集淘宝拍立淘按图搜索API接口及JSON数据返回全流程指南
通过以上流程,可实现淘宝拍立淘按图搜索的完整调用链路,并获取结构化的JSON商品数据,支撑电商比价、智能推荐等业务场景。
|
10月前
|
JSON 中间件 Java
【GoGin】(3)Gin的数据渲染和中间件的使用:数据渲染、返回JSON、浅.JSON()源码、中间件、Next()方法
我们在正常注册中间件时,会打断原有的运行流程,但是你可以在中间件函数内部添加Next()方法,这样可以让原有的运行流程继续执行,当原有的运行流程结束后再回来执行中间件内部的内容。​ c.Writer.WriteHeaderNow()还会写入文本流中。可以看到使用next后,正常执行流程中并没有获得到中间件设置的值。接口还提供了一个可以修改ContentType的方法。判断了传入的状态码是否符合正确的状态码,并返回。在内部封装时,只是标注了不同的render类型。再看一下其他返回的类型;
457 3
|
10月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
542 3
|
Web App开发 前端开发 数据库
ajax-hook+ selenium抓取带参数的 Ajax 数据
ajax-hook+ selenium抓取带参数的 Ajax 数据
430 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
280 0
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
764 0
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
285 0