时间戳

首页 > 解决方案 > 来自 JSON 文档的 AJAX 请求

javascript - 来自 JSON 文档的 AJAX 请求

问题描述

我有一个引导网站，上面有几张卡片，其中包含标题、图片和价格。我想从 JSON 文档中购买这些数据。我设法部分改编了在互联网上找到的一个脚本，但我不太了解。

我需要 JSON 来存储每张卡的数据：

我只做了这个代码，但它只适用于一张卡，而不是很多。

脚本： 

  <script>
      function ajax_get(url, callback) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log('responseText:' + xmlhttp.responseText);
                try {
                    var data = JSON.parse(xmlhttp.responseText);
                } catch(err) {
                    console.log(err.message + " in " + xmlhttp.responseText);
                    return;
                }
                callback(data);
            }
        };

        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    }

    ajax_get('data.json', function(data,data2) {
        document.getElementById("title", "price").innerHTML = data["title"];


        var html = "<h6>" + data["title"] + "</h6>";
        html += "<p>" + data["price"] + "</p>";  
        html += "<ul>";

        document.getElementById("title").innerHTML = html;
         document.getElementById("price").innerHTML = html;
    });
     </script>

JSON：

card1{
   "title" : "CARD1",
   "price" : "$799.55",
   "image" : src("images/item1.png")
}

card2{
   "title" : "CARD2",
   "price" : "$799.55",
   "image" : src("images/item2.png")
}

卡片截图：https ://imgur.com/a/CLtyfPw

一张卡片的 HTML 代码：

  <div class="col-sm-3">
            <div class="card1" style="width: 16rem;">
              <img src="images/landing/item1.png" class="card-img-top" alt="">
              <div class="card-body">
                <h6 id="title"></h6>
                <p id="price">/p>
              </div>
            </div>
        </div>

谢谢！

标签： javascripthtmljsonajax

解决方案

您的代码很接近，但我将展示我使用的方法，因为它更灵活。

  1. AJAX 函数（我正在使用Promises，但您可以使用callbacks,if语句生成结果，用于 GET 请求和else其他请求）
function request(method, url, data=null) {
    return new Promise((resolve, reject)=> {
    const xhr = new XMLHttpRequest;
    xhr.timeout = 2000;
    xhr.responseType = 'json'
    xhr.onreadystatechange = (e) => {
        if(xhr.readyState === 4){
            xhr.status === 200 ? resolve(xhr.response) : reject(xhr.status)
        }
    }
    xhr.ontimeout = () => reject('timeout');
    xhr.open(method, url, true);

    if(method.toString().toLowerCase() === 'get') {
        xhr.send(data)
    } else {
        xhr.setRequestHeader('Accept','application/json');
        xhr.setRequestHeader('Content-type', 'application/json');
        xhr.send(data)
    }
    })
}
  1. 渲染结果（如果你愿意，我在这里使用async/await你可以使用Promises ora callbacks）。请记住，您必须为data.json文件添加正确的路径！
async function getTasks(){
    const cards = await request('GET', './data.json');
    if(cards.cards.length){
        cards.cards.forEach(element=>{
        const div = document.createElement('div');
        div.className = 'card';
        div.innerHTML = `<div class="col-sm-3">
                            <div class="card1" style="width: 16rem;">
                                <img src=${element.image} class="card-img-top" alt="">
                                <div class="card-body">
                                <h6 id="title">${element.title}</h6>
                                <p id="price">${element.price}/p>
                                </div>
                            </div>
                        </div>`;
          document.body.appendChild(div);
        })
    }
}
getTasks()
  1. 您应该更改您的 json 文件（替换image属性，从src("images/item2.png")to images/item2.png）例如：
{
    "cards": [
    {
        "title": "TEST",
        "text": "ACADEMY",
        "image": "images/featured/item1.png"
    },
    {
        "title": "TEST2",
        "text": "ACADEMY2",
        "image": "images/featured/item2.png"
        }  
    ]
}

这是一个工作小提琴：https ://jsfiddle.net/kvpqt268/

推荐阅读