Ajax查询商品信息

最新推荐文章于 2022-10-23 15:10:15 发布

码说芯语

最新推荐文章于 2022-10-23 15:10:15 发布

阅读量377

点赞数

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/106431198

版权

1、Ajax是什么？

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

2、JSON是什么？

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table{
            border: 1px solid springgreen;
            width: 500px;
            border-collapse: collapse;
        }
        table th,td{
         border: 1px solid springgreen;
         text-align: center;
        }
     </style>
    <script type="text/javascript">
      //如何做浏览器的兼容呢？
      function createXhr(){
          var xhr;
          if(typeof XMLHttpRequest!="undefined"){
             xhr=new XMLHttpRequest();//发送Ajax的对象
          }else if(typeof ActiveXObject!="undefined"){
             xhr=new ActiveXObject("MSXML2.XMLHttp.6.0");
          }
          return xhr;
      }

      window.onload=function(){
         //创建一个请求对象
         var xhr=createXhr();
         xhr.open("get","http://123.57.7.108:83/product.json",true);
         //如果是post请求方式，那么提交参数的格式是什么呢？
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//MIME类型
         xhr.send(null);//因为你使用get方式 null针对的是post方式
         xhr.onreadystatechange=function(){
             //回调函数
             if(xhr.readyState==4){
                  if(xhr.status==200){//200在http协议中表示成功
                      console.log(xhr.responseText);//接受服务端返回的字符串 JSON
                      var products=JSON.parse(xhr.responseText);//将字符串转化成对象
                      console.log(products);
                      //dom操作
                      for(let i=0;i<products.length;i++){
                        var tr= document.createElement("tr");
                        let tds=`
                        <td>
                        <input type="checkbox" name="ck"/ >
                       </td>
                       <td>${products[i].id}</td>
                       <td>${products[i].name}</td>
                       <td>
                          <img style="width:150px;height:150px" src="http://123.57.7.108:81 /${products[i].image}"/>
                      
                       </td>
                       <td>${products[i].price}</td>
                       <td>${products[i].spuId}</td>
                      
                       `;
                       //将得到的数据插入创建的<tr></tr>
                      tr.innerHTML=tds;
                       //再将tr这一行数据插入到表格当中即可
                        document.getElementById("tbl").appendChild(tr);
                      }
                  }
             }
         };
      };
    
    </script>
</head>
<body>
    <h1>Ajax案例</h1>
    <table id="tbl">
    <thead>
        <tr>
            <th>
                全选
                <input type="checkbox" name="all" id="all" />
            </th>
            <th>编号</th>
            <th>名称</th>
            <th>图片</th>
            <th>价格</th>
            <th>类型</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>

码说芯语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax查询商品信息

1、Ajax是什么？Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。2、JSON是什么？JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数
复制链接

扫一扫