Ajax -get 请求

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>AJAX发送GET请求并传递参数</title></head><body><ul id="list"></ul>

<script>

    var listElement = document.getElementById('list');

    // 发送请求获取列表数据呈现在页面    // =======================================

    var xhr = new XMLHttpRequest();

    xhr.open('GET', 'users.php');

    xhr.send();

    xhr.onreadystatechange = function () {        if (this.readyState !== 4) return;        var data = JSON.parse(this.responseText);        // data => 数据

        for (var i = 0; i < data.length; i++) {            var liElement = document.createElement('li');            liElement.innerHTML = data[i].name;            liElement.id = data[i].id;

            listElement.appendChild(liElement);

            liElement.addEventListener('click', function () {                // TODO: 通过AJAX操作获取服务端对应数据的信息                // 如何获取当前被点击元素对应的数据的ID                // console.log(this.id)                var xhr1 = new XMLHttpRequest();                xhr1.open('GET', 'users.php?id=' + this.id);                xhr1.send();                xhr1.onreadystatechange = function () {                    if (this.readyState !== 4) return;                    var obj = JSON.parse(this.responseText);                    alert(obj.age)                }            })        }    }</script></body></html>

转载于:https://www.cnblogs.com/lujieting/p/10291257.html

Ajax -get 请求相关推荐

js ajax 递归,javascript ajax循环请求/ 长轮询终极解决办法——递归
ajax循环请求,不能使用for循环,原因如下: 1. 因为ajax是异步执行,在还没有拿到服务器响应内容,就进入下一个for循环中解决办法:递归currentIndex = 0; function ...
ajax提交相对路径报错,ajax提交请求为啥url要用这个函数encodeURI
参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式例如:ajax提交到后台的,就需要对url进行encodeURI编码, 否则,会导致后台出现各种乱码,不加en ...
php 返回字符串给aja,解决ajax异步请求返回的是字符串问题
1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或 ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
ajax jsonp请求报错not a function的解决方案
ajax jsonp请求报错not a function的解决方案参考文章: (1)ajax jsonp请求报错not a function的解决方案 (2)https://www.cnblogs. ...
取消Ajax请求 || Ajax重复请求问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
AJAX POST 请求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Ajax异步请求-简单模版
1 <script type="text/javascript"> 2 window.onload = function () { 3 document.getElem ...
Ajax中请求被缓存的问题
Ajax中请求被缓存的问题在Ajax开发中,会遇到浏览器缓存内容的问题,比如,某个元素注册了鼠标事件(onmouseover),事件触发后会通过 xmlhttprequest到服务器获取内容,在不刷 ...
ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤（详细代码）
在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?接下来这篇文章就给大家介绍Ajax的请求步骤,以及ajax请求步 ...

Ajax -get 请求

Ajax -get 请求相关推荐

最新文章

热门文章