http.js

    1. function ajax({
    2. method,
    3. url,
    4. success
    5. }){
    6. var xhr = new XMLHttpRequest();
    7. xhr.open(method,url,true);
    8. xhr.send();
    9. xhr.onreadystatechange = function(){
    10. if(xhr.readyState == 4 && xhr.status == 200){
    11. var result = JSON.parse(xhr.responseText);
    12. success(result)
    13. }
    14. }
    15. }

    html

    1. <script src="lib/http.js"></script>
    2. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    3. <div class="app">
    4. <div class="left">
    5. </div>
    6. <div class="right">
    7. </div>
    8. </div>
    9. <script>
    10. /* 1.渲染列表 */
    11. var listUrl = "http://192.168.4.18:8000/";
    12. ajax({
    13. url: listUrl,
    14. method: "get",
    15. success: res => {
    16. var arr = res.result;
    17. arr.forEach((item, index) => {
    18. var {pic,title,raiting,slogo,evaluate,labels} = item;
    19. var sum =labels.join("/")
    20. var htmlItem = `
    21. <div class="item">
    22. <span>${index+1}</span>
    23. <img src=${pic} alt="">
    24. <div>
    25. <p class="title">${title}</p>
    26. <p>${sum}</p>
    27. <p><span>评分:${raiting}</span> <span> ${evaluate}人评价</span></p>
    28. <p>${slogo}</p>
    29. </div>
    30. </div>
    31. `
    32. $(".left").append(htmlItem);
    33. })
    34. }
    35. })
    36. </script>

    捕获5.PNG