HTML中json数据的处理

最新推荐文章于 2024-07-08 18:14:28 发布
最新推荐文章于 2024-07-08 18:14:28 发布
阅读量1.1k 收藏 3
点赞数 1
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124360589
版权

<!DOCTYPE html>
<html>
  <head>
    <title>Ajax查询用户信息_json数据处理</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .head{
          position:relative;
          border:2px solid #2e79c7;
        width:500px;
          margin:50px auto 0px auto;
      }
      .title{
          background-color:#2e79c7;
        width:100%;
          line-height:30px;
          font-size:15px;
          color:#ffffff;
      }
      .search{
        width:100%;
          text-align:center;
          line-height:50px;
      }
      .preh{
         height:290px;
      }
      .lines{
        display:flex;
          justify-content:flex-start;
      }
      .lines div{
        height:30px;
          line-height:30px;
      }
      .lines div:nth-of-type(1){
          width:100px;
          text-align:left;
      }
    </style>
    <script type="text/javascript">
      //定义ajax浏览器对象
      var request;
      var result = {};
      //ajax通过姓名，查询详细信息
      function getCityInfo(){
          //补全ajax代码
          request = new XMLHttpRequest();
        
     request.onreadystatechange = function(){
              if(request.readyState == 4 && request.status==200){
                  result = JSON.parse(request.responseText);
var s = 0;
result.forEach(item=>{
    s=s+item;
})
document.getElementById("result").innerHTML=s;
              }
};
        var number = document.getElementById("number").value;
      request.open("post","res/htmlclassics/php/test_city.php",false);
       request.setRequestHeader("content-type","application/x-www-form-urlencoded");
      request.send("&number="+number);
      }
    </script>
  </head>
  <body>
    
    <div class="head">
      <div class="title">代号查询</div>
      <div class="search">
        请选择：
        <select id="number">
          <option value="汽车">汽车</option>
          <option value="食品">食品</option>
          <option value="数码">数码</option>
          <option value="服饰">服饰</option>
        </select>
        <input type="button" value="查询" οnclick="getCityInfo()" />
      </div>
    </div>
    
    <div class="head preh">
      <div class="title">计算结果</div>
      <div class="lines">
        <div>结果：</div>
        <div id="result"></div>
        </div>
    </div>
  </body>
</html>

Playful_Elbow
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html处理json数据渲染到页面,vue.js实现数据库的JSON数据输出渲染到html页面功能示例...
weixin_29607629的博客
06-03 1539
本文实例讲述了vue.js实现数据库的JSON数据输出渲染到html页面功能。分享给大家供大家参考，具体如下：1、首先通过json.php把数据库给输出为json格式的数据[{"id":1,"resname":"百度","resimg":"http://www.baidu.com/1.jpg","resint":"2018-1-18","resurl":"http://www.baidu.com/...
python 爬虫 json 处理_爬虫项目中涉及Json数据的处理
weixin_39676930的博客
11-30 2340
在执行爬虫项目的过程中，有时返回的不是一个html页面而是json格式数据，此时对数据的解析非常重要。(一).Json格式数据的爬取采用Python爬取数据可以采用Scrapy或者采用urllib,requests等两种方法，显然在这里采用第二种方式更为简单。步骤如下：1、由于有分页的情况，因此首先构造带分页的url地址。urlbase ="https://www.we.com/lend/loan...
html页面加载json数据,在html中显示JSON数据的方法
weixin_43617604的博客
11-24 1613
【代码】html页面加载json数据,在html中显示JSON数据的方法。
JSON格式化输出html——数组+对象+JSON字符串+汉字——基础积累——@pgrabovets/json-view
yehaocheng520的博客
05-15 349
JSON格式化输出html——数组+对象+JSON字符串+汉字——基础积累——@pgrabovets/json-view
爬虫之 json 数据处理
南淮北安的博客
08-18 3148
文章目录一、什么是 json二、json 有四个方法供我们进行数据转换:三、json 的作用四、引入 json 包的目的 一、什么是 json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。适用于进行数据交互的场景，比如网站前台与后台之间的数据交互。 JSON与XML格式算是如今互联网...
python 处理json数据
梦里逆天的博客
08-18 8569
python 简单处理json数据，包括python数据与json数据相互转换，python数据保存为json文件，python读取json文件。
如何在html页面中显示JSON数据
热门推荐
希望我的博客，能帮上你解决学习中工作中所遇到的问题,也期待与您一起探讨技术问题，共同成长。
06-16 1万+
有时候我们需要将json数据直接显示在页面上（比如在做一个接口测试的项目，需要将接口返回的结果直接展示），但是如果直接显示字符串，不方便查看。需要格式化一下。
HTML中JSON使用注意事项
qq_45152044的博客
01-06 1626
数组和JSON的区别 数组：有序的数据集合 JSON：无序的键值集，键值对是唯一的 JSON的标准格式为 {"a":"aaa","b":"bbb"} 但是在HTML中，由于js是门弱语言，所以js中json的写法格式也有不规范的语法，但也不会报错。 如：{a:1,"a":1,'a':1,"a":"a",'a':'a'} 获取json里面单个的值 示例： let json ={a:1}; console.log(json.a) console.log(json['a']) console.log(json["
MySQL处理Json数据
只是甲的博客
11-08 4391
mysql 处理json数据
Spring Boot处理JSON数据
nuist_NJUPT的博客
10-28 5846
Spring Boot处理JSON数据 在Spring Boot的Web应用中，内置JSON数据解析功能，默认使用Jackson自动解析，不需要加载Jackson依赖包，当控制器返回一个Java对象或者集合数据时，SpringBoot自动将其转换为Json格式数据，使用起来方便简洁。 SpringBoot处理JSON数据时，需要用到两个重要的JSON转换注解，分别是@RequestBody和@ResponseBody。 @RequestBody:将请求主体的数据绑定到形参上，该注解应用在方法的形参上 @Re
json数据处理及数据绑定
10-20
总的来说，JSON数据处理和数据绑定是Web开发中常见的任务，特别是在构建动态用户界面时。理解如何有效地处理和展示JSON数据对于前端开发者至关重要。通过学习和实践这些技巧，你可以创建更加互动和数据驱动的网页...
html中通过JS获取JSON数据并加载的方法
10-18
最后，当所有数据处理完毕后，我们可以将`mediahtml`字符串插入到`.medialist` div中，使用jQuery的`html()`方法完成这一操作。这样，JSON数据就被解析并加载到了HTML页面上，供用户查看。 总结起来，通过...
在Shell命令行处理JSON数据的方法
09-15
在Shell命令行环境中处理JSON数据是一项常见的任务，特别是在自动化脚本和数据分析中。本文将详细介绍如何使用`jq`工具来高效地操作JSON数据。 `jq`是一个轻量级且强大的命令行工具，专为处理JSON数据设计。它允许...
java的邮箱和JSON数据处理jar包
05-07
总结来说，这个压缩包提供了Java开发中处理邮件通信和JSON数据解析的关键库。JavaMail API负责邮件的收发，Fastjson用于高效地处理JSON数据，而Activation框架则增强了对MIME类型数据的支持。这三者共同构成了一个...
ThinkPHP中使用ajax接收json数据的方法
10-25
本篇文章将详细讲解如何在ThinkPHP中使用AJAX接收JSON数据。 首先，我们需要理解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它易于人阅读和编写，同时也易于机器解析和生成。在前后端通信中，...
HTML5新增的input元素类型：number、range、email、color、date等
pan_junbiao的博客
07-08 617
HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。daterange。
html5中的iframe
m0_73280507的博客
07-05 493
iframe>浏览上下文是浏览器展示文档的环境，通常是一个tab标签页，一个窗体或者是浏览器页面的一部分。每个浏览上下文都有一个活动文档的源和一个记录所有展示文档的有序历史。浏览上下文的通讯被严格限制，只有两个同源的浏览器上下文，才能打开和使用通讯接口。
HTML5新增的input元素属性：placeholder、required、autofocus、min、max等
最新发布
pan_junbiao的博客
07-08 284
HTML5 大幅度地增加与改良了 input 元素的属性，可以简单地使用这些属性来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。 placeholder 属性：当用户没有输入值时，输入型控件可以通过placeholder 属性向用户显示描述说明或者提示信息。使用placeholder 属性只需要将说明性文字作为该属性的值即可。除了普通的文本输入框，email、number、url 等其他类型的输入框也都支持placeholder 属性。
html获取json数据
05-25
要在 HTML 中获取 JSON 数据，可以使用 JavaScript 中的 XMLHttpRequest 对象或 Fetch API。 使用 XMLHttpRequest 对象： ```html <!DOCTYPE html> <html> <head> <title>获取JSON数据</title> <script> function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("application/json"); xobj.open('GET', 'data.json', true); xobj.onreadystatechange = function () { if (xobj.readyState == 4 && xobj.status == "200") { callback(JSON.parse(xobj.responseText)); } }; xobj.send(null); } function init() { loadJSON(function(response) { var data = response; // 在这里处理 JSON 数据 }); } window.onload = init; </script> </head> <body> <!-- HTML 内容 --> </body> </html> ``` 使用 Fetch API： ```html <!DOCTYPE html> <html> <head> <title>获取JSON数据</title> <script> function init() { fetch('data.json') .then(response => response.json()) .then(data => { // 在这里处理 JSON 数据 }); } window.onload = init; </script> </head> <body> <!-- HTML 内容 --> </body> </html> ``` 注意：以上代码中的 `data.json` 是一个 JSON 文件的 URL 地址。在使用时需要把它替换成你自己的 URL。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值