通过 jQUERY 将 JSON 数据从 URL 解析为 HTML

Posted 2023-05-08

【中文标题】通过 jQUERY 将 JSON 数据从 URL 解析为 HTML

【英文标题】：Parse JSON data from URL via jQUERY to HTML

【发布时间】：2018-06-20 04:20:24

【问题描述】：

我有这个带有 JSON 数据的文件：https://suggest.autocompleteapi.com/ap7d7hg5jezr/drg121016?prefix=pe&size=10

并且我希望在 jQUERY 中使用非常简单的脚本来解析这些数据， 通过 jQUERY 到 html 网页到 ul 样式如下：

<ul>
<li>K704 Alkoholové zlyhávanie pečene</li>
<li>K741 Skleróza pečene</li>
........
.......
</ul>

非常感谢您的宝贵时间

【问题讨论】：

你试过了吗？

是的，脚本：w3schools.com/jquery/ajax_getjson.asp，我更改了 URL 但不起作用

@Peter 用于将纯文本附加到DIV 的脚本。您是否将其更改为将<li> 元素添加到您的<ul>？显示您的实际代码。

【参考方案1】：

我会说在寻求 SO 帮助之前研究一切。这可以通过使用 .getJSON 的 Ajax 提取数据来完成您想要的操作

$.getJSON("https://suggest.autocompleteapi.com/ap7d7hg5jezr/drg121016?prefix=pe&size=10", function(result) 

  var data = result.suggestions;

  for (var i = 0; i < data.length; i++) 
    $('.lists').append('<li>' + data[i].value + '</li>');
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="lists">

</ul>

【讨论】：

谢谢，它有效，你为我节省了很多时间，我是 jQUERY 的新手

@Peter 这和你最初尝试的有什么区别？除了使用 for 循环而不是 $.each 之外，它似乎与您在评论中提到的 w3schools 页面相同。

【参考方案2】：

你可以试试下面的：

//if the data is one string from ajax response, 
//you have to parse the string to json object first
//let yourData = JSON.parse(ajax_response);

let yourData = 'suggestion':[
                              'value':'K704 Alkoholové zlyhávanie pečene',
                              'value':'K718 Toxická choroba pečene s inými poruchami pečene',
                              'value':'K718 Toxická choroba pečene s inými poruchami pečene'
                             ]
               

let ulPlacedAt = $('body'); //you can change it to other object you like
let ulBody = '';
yourData['suggestion'].forEach(function(item) 
    ulBody += '<li>'+item['value'] + '</li>';
  
)
ulBody = '<ul>' + ulBody + '</ul>';
ulPlacedAt.append(ulBody);

【讨论】：

谢谢它的工作，但我有 JSON 的 esternal URL 文件：suggest.autocompleteapi.com/ap7d7hg5jezr/…，把这个文件放在“让你的数据”？

试试这个：$.ajax( url: 'your_url', type: 'POST', data: post_params, async: true, cache: false, success: function (result) var yourData = JSON.parse(result);