ajax获取json数据示例

使用ajax请求数据时，可以先封装ajax

function querystring(obj) {var str = "";for (var arr in obj) {str += arr + "=" + obj[arr] + "&";}return str.substring(0, str.length - 1);
}function $ajax({method = "get",url,data,success,error,
}) {var xhr = null;try {xhr = new XMLHttpRequest();} catch (error) {xhr = new ActiveXObject('Microsoft.XMLHTTP');}if (method == "get" && data != null) {url += "?" + querystring(data);}xhr.open(method, url, true);if (method == "get") {xhr.send();} else {xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");xhr.send(querystring(data));}xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status == 200) {if (success) {success(xhr.responseText);}} else {if (error) {error("error" + xhr.status);}}}}
}

请求的数据book.json

{"data":[{"name":"first","desc":"1111111111111111"},{"name":"second","desc":"222222222222222"},{"name":"third","desc":"333333333333333"}]
}

两种方法将获取的数据显示在ul中
两种方式选取一种，另一种运行时删除

<body><button id="xiazai">下载数据</button><ul id="liebiao"><!-- <li><h1>标题：</h1><p>简介：</p></li> --></ul><script src="ajax.js"></script><script>window.onload = function() {var button = document.getElementById("xiazai");var ul = document.getElementById("liebiao");/* 第一种方式 */button.onclick = function() {$ajax({method: "get",url: "data/book.json",success: function(res) {var str = ``;var obj = JSON.parse(res);var arr = obj.data;for(var i = 0;i < arr.length;i ++) {var lobj = arr[i];str += `<li><h1>标题：${lobj.name}</h1><p>简介：${lobj.desc}</p></li>`;}ul.innerHTML = str; },error: function(mes) {alert(error);}})}/* 第二种方式 */button.onclick = function() {ul.innerHTML = "";$ajax({method: "get",url: "data/book.json",success: function(res) {var obj = JSON.parse(res);var arr = obj.data;for(var i = 0;i < arr.length;i ++) {var h1 = document.createElement("h1");var p = document.createElement("p");var li = document.createElement("li");h1.innerHTML = arr[i].name;p.innerHTML = arr[i].desc;li.appendChild(h1);li.appendChild(p);ul.appendChild(li);}},error: function(error) {alert(error)}})}/* 第二种结束 */}</script>
</body>

ajax获取json数据示例相关推荐

Ajax 获取 JSON数据
文章目录 Ajax获取JSON数据 Ajax获取JSON数据 Ajax 全称"Asynchronous JavaScript and XML",译为"异步 JavaScr ...
AngularJS学习笔记（3）——通过Ajax获取JSON数据
通过Ajax获取JSON数据以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...
jQuery AJAX获取JSON数据解析多种方式示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
ajax获取json里的list,ajax获取json数据然后将其装载到jqgrid实现
1. 通过ajax同步获取json数据 2. 本地装载jqgrid数据 $("#grid").jqGrid({ datatype: "local", data ...
vue接收json数据_Vue之使用ajax获取json数据，并用v-for循环显示在表格中
运行的时候,出现了php跨域问题,解决办法是在php的头文件中添加了如下代码: header('Content-Type: application/json'); header('Content-Ty ...
java跨域解析json数据_java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据...
在开发的过程中,有时候我们需要设计一个数据接口.有时候呢,数据接口和Web服务器又不在一起,所以就有跨域访问的问题. 第一步:简单的设计一个数据接口. 数据接口,听起来高大上,其实呢就是一个简单的Se ...
jsTree ajax 获取json数据加载树
后台获取json格式数据. 直接上代码. 最后有一张官方ajax获取tree的说明. var ajaxTreeSample = function() {$("#tree_4").j ...
ajax获取json数据解析为undefined
解决办法1.使用eval()函数,把获取的数据转换为json对象. var dataObj=eval("("+data+")");//转换为json对象然后在 ...

ajax获取json数据示例

ajax获取json数据示例相关推荐

最新文章

热门文章