<script type="text/javascript"> var httpRequest = new XMLHttpRequest(); httpRequest.open('GET','http://1.14.137.211:8888/tealist',true); httpRequest.send(); httpRequest.onreadystatechange = function(){ if(httpRequest.readyState == 4 && httpRequest.status ==200 ){ var data = httpRequest.responseText; var data = JSON.parse(data); console.log(data); function test1(){ $(".increment").onclick = function(){ let n = $(this).siblings(".itxt").val(); console.log(n); n++; $(this).siblings(".itxt").val(n); } return; } function test2(){ $(".decrement").onclick = function(){ let n = $(this).siblings(".itxt").val(); console.log(n); if (n == 0) { return false; } n--; $(this).siblings(".itxt").val(n); } return; } data.forEach(element => { let html = ` <p> <span>${element.name}</span><span class="price">${element.price}¥</span> <span><a class="decrement" onclick = ${test1()}>-</a> <input type="text" class="itxt" value="0"> <a class="increment" onclick = ${test2()}>+</a></span> </p> ` $("#pics").append(html); //document.querySelector("#pics").innerHTML = html; }); } } </script>
时间: 2024-02-15 12:15:49 浏览: 85
http-request.js
这段代码是一个 AJAX 请求,它向指定的 URL 发送一个 GET 请求,获取返回的数据并用 JSON 解析。然后它将这些数据添加到 HTML 页面中,动态地生成一组商品列表。
具体来说,这段代码实现了以下功能:
1. 创建一个 XMLHttpRequest 对象。
2. 使用 open() 方法指定请求的 URL、请求方式和是否异步方式发送请求。
3. 使用 send() 方法发送请求。
4. 使用 onreadystatechange 事件监听器,当 readyState 属性值为 4(请求已完成)且 status 属性为 200(请求成功)时,解析返回的数据并将其添加到页面中。
5. 在数据添加到页面中时,动态生成一组商品列表,每个商品包含名称、价格和数量输入框。
6. 给每个数量输入框增加了两个按钮,分别用于增加和减少数量,并且在点击按钮时会触发相应的事件处理函数 test1() 和 test2()。
需要注意的是,test1() 和 test2() 函数中的代码似乎有问题,因为它们使用了 $() 函数,但是该函数没有在代码中定义。可能是使用了某个前端框架或库,需要查看完整代码才能确定。
阅读全文