Ajax获取json数据，添加在页面上，点击弹出模态框

最新推荐文章于 2021-06-04 18:13:46 发布

大名张无忌

最新推荐文章于 2021-06-04 18:13:46 发布

阅读量644

点赞数

分类专栏： Ajax 文章标签： js ajax bootstrap json

本文链接：https://blog.csdn.net/qq_40029828/article/details/105622181

版权

这篇博客探讨了如何通过Ajax从后端接口获取JSON数据，并将其动态地添加到前端页面中。同时，介绍了利用Bootstrap模态框实现点击元素弹出详细信息的交互效果。内容包括了对index文档、hello.php模拟的后端接口以及data.json数据文件的使用方法。

摘要由CSDN通过智能技术生成

php等后台文件应由后端人员写完并提供接口文档，前端负责调用渲染即可（这里我自己造一下~）

index文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jqueryMin.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
.col-md-4{
   
    margin: 20px;
    width: 300px;
    height: 300px;
  border: 1px solid skyblue;
    border-radius: 10px;
}
.col-md-4 img{
   
    margin: 15px;
    width: 250px;
    height: 180px;
}
    .form-group{
   
        width: 500px;
    }
</style>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <img src="https://images4.c-ctrip.com/target/310v170000012btjp8587.png" alt="">
            <p>10829</p>
        </div>
    </div>
 <!--   &lt;!&ndash; Button trigger modal &ndash;&gt;
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>-->

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>产品名称</h4>
                    <p class="modal-title" id="myModalLabel">Modal title</p>
                    <img src