爱学习的小朋友 2022-06-27 16:59 采纳率: 88.9%
浏览 50
已结题

关于#javascript#的问题：这个URL获得json，然后把json里的项目在HTML中显示出来呢

怎样用ajax请求：https://api.jisuapi.com/zidian/word?appkey=d02d920e4fbb8499&word=
这个URL获得json，然后把json里的项目在HTML中显示出来呢？


<!DOCTYPE html>
<html>
<meta charset="UTF-8"/>
<head>
<script src="jquery-2.2.4.min.js"></script>

<script>
$(document).ready(function (){
     $("button").click(function(){
        var text="测";    
        
//这里如何请求和渲染数据到html
        

        
    });    
    
});
</script>
</head>

<body>
<button>测试</button>

<div class="result">
    <ul>
        <li>显示结果：<p></p></li>            
        <li>显示结果：<p></p></li>        
    </ul>
</div>

</body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-06-27 17:05
    关注

    题主可以搭建代理用下面的

    <!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<head>
    <script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var text = "测";

                $.ajax({
                    url: 'proxy.php' ,//注意修改代理网址，注意是get请求，非post请求
                    data: { text },
                    dataType:'json',
                    success: function (d) {
                        if (d.msg == 'ok') {
                            $('p[data-key]').each(function () {
                                this.innerHTML=eval(`d.${this.dataset.key}`)
                            })
                        }
                    }
                })

            });

        });
    </script>
</head>

<body>
    <button>测试</button>

    <div class="result">
        <ul>
            <li>笔顺：<p data-key="result.bishun"></p></li>
            <li>部首：<p data-key="result.bushou"></p></li>
            <li>英语：<p data-key="result.english[0]"></p></li>
            <li>释义：<p data-key="result.explain[0].content"></p></li>
            <li>拼音：<p data-key="result.pinyin"></p></li>
        </ul>
    </div>

</body>
</html>

    proxy.php

    <?php
$text=$_GET["text"];
$url="https://api.jisuapi.com/zidian/word?appkey=d02d920e4fbb8499&word=".$text;
echo file_get_contents($url);
?>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 7月5日
  • 已采纳回答 6月27日
  • 创建了问题 6月27日

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能！！有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗？
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条