现在开始学习吧 2022-10-14 10:06 采纳率: 31.8%
浏览 80
已结题

用AJAX的方法对JSON进行编写html文件

图一是包含以下注册表记录的 JSON 文件

img


图二用一个按钮“读取 JSON”编写 html 文件。当用户单击该按钮时,将进行 AJAX 调用以获取在图一中创建的 JSON 文件(注册记录)。接收到的 JSON 应解析为一个脚本对象,并且该脚本对象应以下列格式显示在网络上:

img


(注意粗体和斜体),实在是不会做,想求个代码自己研究

  • 写回答

2条回答 默认 最新

  • 一把编程的菜刀 2022-10-14 11:02
    关注

    假设你的json返回格式如下,假设json文件名为data.json:

    {"titke":"Organisations register","Current_date":"20/09/2022","attr":[{"Organisation":"NGO Free Spirit","Address":"89 Crown Street, Wollongong","data":[{"Available":"Parents workshops","Days":"Thursday","Cost":"$10"},{"Available":"Children playgroups","Days":"Friday","Cost":"$5"},{"Available":"Youth counsellig","Days":"Wednesday, Friday","Cost":"Free"}]},{"Organisation":"Southem friends","Address":"123 Baan Baan St, Dapto","data":[{"Available":"Visual art","Days":"Monday","Cost":"free"},{"Available":"Singing together","Days":"Tuesday","Cost":"S15"},{"Available":"My music workshop","Days":"Tuesday, Wednesday","Cost":"S20"}]},{"Organisation":"Neighbourhood cinic","Address":"5/56 Elizabeth Ave, Liverpool","data":[{"Available":"Health check","Days":"Thursday","Cost":"S10"},{"Available":"Blood test","Days":"Thursday","Cost":"S12"}]}]}
    
    

    那么可以使用以下方法实现:

    <input type="button" id="qwq" value="Read JSON">
    <div id="list">
    </div>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
    $("#qwq").on('click',function(){//qwq 是点击按钮的ID
        $.ajax({
                 //请求方式
                type:'POST',
                //发送请求的地址
                url:'data.json',
                //服务器返回的数据类型
                dataType:'json',
                //发送到服务器的数据,对象必须为key/value的格式,jquery会自动转换为字符串格式
                success:function(data){
                    //请求成功函数内容
                    var htmlstr='';
                    htmlstr+='<div style="font-weight:bold;">'+data.titke+'</div>';
                    htmlstr+='<div>list s updated as of '+data.Current_date+'</div>';
                     listobj=data.attr;//data.list 是你后端返回的josn数据,存在list里面
                    for(var i in listobj){
                       htmlstr+='<div style="border-top:1px solid #CCC;padding-top:20px">';
                       htmlstr+='<div>for the organisation <span style="font-weight:bold;">'+listobj[i].Organisation+'</span>. located at <i>'+listobj[i].Address+'</i></div>';
                       htmlstr+='<div>curcently aailable services are:</div>';
                       for(var j in listobj[i].data){
                           htmlstr+='<div>'+(parseInt(j)+1)+'. on '+listobj[i].data[j].Days+' -> <span style="font-weight:bold;">'+listobj[i].data[j].Available+'</span>. cost: '+listobj[i].data[j].Cost+'</div>';
                       }
                    }
    
                    $('#list').html(htmlstr);//获取的数据组合成你要的格式以后复制到表格里面去
    
                },
                error:function(jqXHR){
                    //请求失败函数内容
                }
    
            })
    })
              
            </script>
    
    
    

    效果如下:

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月14日
  • 已采纳回答 10月14日
  • 创建了问题 10月14日

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择