function Save(){ var username; httpRequest=new XMLHttpRequest(); httpRequest.open("POST","Home",false); httpRequest.send(); httpRequest.onreadystatechange=function (){ if (httpRequest.readyState==4&&httpRequest.status==200){ username=httpRequest.response; } } alert(username); }
时间: 2024-03-19 08:41:17 浏览: 7
这段代码的作用是发送一个POST请求到"Home"地址,然后通过XMLHttpRequest对象获取服务器返回的响应并将其存储在变量username中,并弹出一个提示框来显示username变量的值。
但是这段代码存在一个问题,即Ajax请求是异步的,而该代码使用的是同步方式发送请求,这意味着代码会阻塞浏览器,直到服务器响应后才会继续执行。因此,建议使用异步方式发送Ajax请求,以避免阻塞浏览器的情况。可以使用回调函数或Promise等方式处理异步请求的响应。
相关问题
function Save(){ var username; httpRequest=new XMLHttpRequest(); httpRequest.open("POST","Home",false); httpRequest.send(); httpRequest.onreadystatechange=function (){ if (httpRequest.readyState==4&&httpRequest.status==200){ username=httpRequest.response; } } alert(username); } 代码alert为什么弹出undefined
代码中`alert(username);`弹出`undefined`的原因是因为Ajax请求是异步的,而该代码使用的是同步方式发送请求,所以在`alert(username);`执行时,`httpRequest.onreadystatechange`回调函数还未执行,`username`变量没有被赋值,因此`alert`弹出的是`undefined`。
要获取正确的`username`值,可以将`alert(username);`语句放到`httpRequest.onreadystatechange`回调函数内部,如下所示:
```javascript
function Save() {
var username;
httpRequest = new XMLHttpRequest();
httpRequest.open("POST", "Home", false);
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
username = httpRequest.response;
alert(username); // 在回调函数内部弹出正确的结果
}
}
}
```
这样就可以正确获取到`username`变量的值了。
<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>
这段代码是一个 AJAX 请求,它向指定的 URL 发送一个 GET 请求,获取返回的数据并用 JSON 解析。然后它将这些数据添加到 HTML 页面中,动态地生成一组商品列表。
具体来说,这段代码实现了以下功能:
1. 创建一个 XMLHttpRequest 对象。
2. 使用 open() 方法指定请求的 URL、请求方式和是否异步方式发送请求。
3. 使用 send() 方法发送请求。
4. 使用 onreadystatechange 事件监听器,当 readyState 属性值为 4(请求已完成)且 status 属性为 200(请求成功)时,解析返回的数据并将其添加到页面中。
5. 在数据添加到页面中时,动态生成一组商品列表,每个商品包含名称、价格和数量输入框。
6. 给每个数量输入框增加了两个按钮,分别用于增加和减少数量,并且在点击按钮时会触发相应的事件处理函数 test1() 和 test2()。
需要注意的是,test1() 和 test2() 函数中的代码似乎有问题,因为它们使用了 $() 函数,但是该函数没有在代码中定义。可能是使用了某个前端框架或库,需要查看完整代码才能确定。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)