使用ajax将后台数据输出到前台,实现页面动态化

本文记录了一次使用Ajax与jQuery从后台获取数据并动态展示在页面上的实践过程。通过调用“某接口数据平台”的API,实现了题目和答案的动态显示。在页面静态结构完成后,利用jQuery获取JSON数据,并将其插入到HTML相应位置,实现了页面的动态化更新。
摘要由CSDN通过智能技术生成

第一次亲自和后台联合开发,还是值得纪念的。想想看到数据输出到页面的一瞬间,都有点激动呢!废话不说,上例子。

接口来自“某接口数据平台”https://www.jisuapi.com/api/driverexam/ 我真的不是打广告的..

页面包含题目部分,当你做出选择时,会显示答案和解释部分。其中这两部分除了父级中间代码都被注释掉了。因为这个要用js动态实现呦~但是前提要把注释的样式写好啦~这样页面生成的时候才会有样式呢!

js都是用框架jquery写的呢~小女不才,会的少哈~

//题目
<dl class="test-item">
            <!--<dt>
            <span class="ti-symbol">单选题</span>
            <p class="test-title">
            这个标志什么含义?
            </p>![](../../image/project/ti.jpg)
            </dt>
            <dd >
            <span class="option">A</span>
            <span class="option-con">施工路段绕行</span>
            </dd>
            <dd >
            <span class="option">B</span>
            <span class="option-con">双向交通</span>
            </dd>
            <dd>
            <span class="option">C</span>
            <span class="option-con">注意危险</span>
            </dd>
            <dd >
            <span class="option">D</span>
            <span class="option-con">左右绕行</span>
            </dd>-->
        </dl>
//判断选择是否正确,及显示答案
        <div class="test-explain">
            <!--<p class="answer-right">
            回答正确
            </p>
            <p class="answer-wrong">
            回答错误
            </p>
            <p class="correct-answer">
            正确答案:B
            </p>
            <p class="explain">
            解释:
            《道路交通安全法》第二十一条规定:驾驶人驾驶机动车上道路行驶前,应当对机动车的安全技术性能进行认真检查;不得驾驶安全设施不全或者机件不符合技术标准等具有安全隐患的机动车。
            </p>
            <p class="chapter">
            出题章节:安全行车常识
            </p>-->
        </div>

css就不放了。浪费空间啊~
请求的url是官方给的例子:

http://api.jisuapi.com/driverexam/query?appkey=yourappkey&type=C1&subject=1&pagesize=1&pagenum=1&sort=rand

考过驾照的童鞋都知道,C1,subject=1,科目一啦~
还是上图吧,我说的废话连篇。。。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值