ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用
文章目录1 ajax获取后台数据的几种方式1.1 原生js的ajax方式1.1.1 get1.1.2 post1.2 jQuery封装的ajax方式1.2.1 $.ajax1.2.2 $.get1.2.3 $.post1 ajax获取后台数据的几种方式1.1 原生js的ajax方式1.1.1 get//第一步：创建xhr对象let xhr = null;if(window.XMLHtt...
·
文章目录
1 ajax获取后台数据的几种方式
1.1 原生js的ajax方式
1.1.1 get
//第一步：创建xhr对象
let xhr = null;
if(window.XMLHttpRequest){//标准浏览器
xhr = new XMLHttpRequest();
}else{//早期的IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
console.log("状态q"+xhr.readyState);
//第二步：准备发送请求-配置发送请求的一些行为
// url: http://10.21.19.86:8082/sdwan/monitor/tunnelDelay
xhr.open('get','https://10.21.19.86:8082/sdwan/monitor/cpuAndMem',true);
console.log("状态w"+xhr.readyState);
//第三步：执行发送的动作
xhr.send(null);
console.log("状态e"+xhr.readyState);
//第四步：指定一些回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
let data = xhr.responseText;//json
// var data1 = xhr.responseXML;
console.log(data)
}
}
// console.log("状态t"+xhr.readyState);
//
// // console.log(1234);
}
console.log("状态r"+xhr.readyState);
1.1.2 post
window.onload = function(){
var btn = document.getElementById('btn');
btn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open("post","./jsondemo.php",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
var obj = JSON.parse(data);
var obj1 = eval("("+data+")");
console.log(obj.username);
console.log(obj.age);
console.log(obj1.username);
console.log(obj1.age);
}else{
console.log('failure');
}
}
}
var param = '{"username":"zhangsan","age":"12"}';
xhr.send("user="+param);
}
}
1.2 jQuery封装的ajax方式
1.2.1 $.ajax
let my_res1=[];
let list1 = {
"Request": {
"BusiCode": "search_res_reserved_ip",
"BusiParams":[{
"cust_id":"1"
}
]
},
"PubInfo": {}
};
$.ajax({
type : "POST",//请求方式
contentType: "application/json;charset=UTF-8",//请求的媒体类型
url : "https://10.21.19.86:8082/sdwan/monitor/cpuAndMem/",//请求地址
data : JSON.stringify(list1),//数据，json字符串
success : function(res1) {//请求成功
// console.log(res1.data)
my_res1 = res1.data;
},
error : function(e){//请求失败，包含具体的错误信息
console.log(e.status);
console.log(e.responseText);
}
});
console.log(my_res1);
1.2.2 $.get
语法：
$.get(URL,callback);
$.get("https://10.21.19.86:8082/sdwan/monitor/cpuAndMem/",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
1.2.3 $.post
语法：
$.post(URL,data,callback);
$.post("https://10.21.19.86:8082/sdwan/monitor/cpuAndMem/",
// contentType: "application/json;charset=UTF-8",
JSON.stringify({ }),
function(data,status){
console.log(data);
console.log(status);
});
2 ajax动态获取数据 创建页面的几种方法
以下转自ajax动态获取数据 创建页面的几种方法 今天总结一下 工作中经常会用到
2.1 通过创建和添加节点实现
$.ajax({
url:'data/zhuye-nav.json',
success:function(data){
//获取数据成功后动态添加到页面中
var aImg=data.result;
for(i=0;i<aImg.length;i++){
var Li='<li><a href="#/lieBiao"><img src='+aImg[i].img+'/></a></li>'
$('.banner-c ul').append(Li);
}
}
})
2.2 字符串拼接
buildList();
function buildList(){
$.ajax({
url:'data/zhuye-list.json',
error:function(data){
alert(data);
},
success:function(data){</span>
//判断，如果是字符串就先转成json再使用；
if(typeof data ==="string"){
data = JSON.parse(data);
}
var html = [];
for(var i= 0,len = data.result.length;i<len;i++){
var item = data.result[i];
html.push(renderItem(item));
}
$('#goods ul').html(html.join(''));
}
});
}
//这里定义要动态创建的代码模块，换行用\ ，这样写结构清晰，便于后期维护修改;
//需要注意的是：下面的参数data实际就是上面的item，所以要直接写data.img;如果觉得别扭那就把下面的形参给改一个就ok了；
function renderItem(data){
var str='<li>\
<a href="#/lieBiao">\
<img src="'+data.img+'" />\
<div>\
<span style="white-space:pre"> </span><p>'+data.name+'</p>\
<span>'+data.jieshao+'</span>\
<span>'+data.price+'</span>\
</div>\
<i></i>\
</a>\
</li>';
return str;
</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_18_1168966" name="code" class="javascript">
2.3 使用baidutemplate实现（推荐）
其实是个JS模板引擎，点击这里去官网上下载这个js文件，灰常灰常轻量级;
1、在html页面中需要写如下的代码</strong></span><span style="font-size:24px;">，也就是我们要动态创建的代码块，在这里我们把他当<span style="font-family: Arial, Helvetica, sans-serif;">做是一个模板来使用，注意这里的写法：一个是，另</span></span>外一个是所有的js代码块都要用分隔符包起来，分隔符的格式<% 这里是<% 这里是js代码 %>
<section id="main">
<ul>
<!--数据通过动态添加-->
<!--使用下面创建的模板块-->
</ul>
</section>
<!--在这里创建一个模板块-->
<script id="list_tpl" type="text/html">
<%for(var i=0,len = result.length;i<len;i++){%>
<li>
<a href="#/xiangQing"><img src="<%=result[i].img%>"/></a>
<div>
<p><%=result[i].name%></p>
<span><%=result[i].price%></span>
</div>
</li>
<%}%>
<span style="white-space:pre"> </span></script>
</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_19_4996213" name="code" class="javascript">js文件中的代码这样写
buildListBT();
function buildListBT(){
$.ajax({
url:'data/liebiao-list.json',
error:function(data){
alert(data);
},
success:function(data){
var html = baidu.template('list_tpl',data);
$('#main ul').html(html);
}
});
}
一定要弄明白这两个是怎么联系到一起去的，在ajax获取数据之后的success回调函数中通过baidu.template(‘list_tpl’,data); 相当于是把获取来的data数据送到list_tpl中进行了一次加工过程，list_tpl就是我们在html页面中定义的那个模板块，然后再将结果赋值给了变量html，最后将其追加到ul中；
以上说的这三种方法用着都挺方便的，但是当我们要动态创建的对象比较复杂的时候
通过节点创建和追加的方式可能就比较麻烦了，搞不好思维会乱掉，使用下面的两种方法就能很好的结局这个问题，而且在后期代码的维护方面也可以节省不少时间；
jQuery创建dom元素并给该元素添加属性及属性值、添加里面内容，最后通过append追加到页面中已有元素后面：
$('#btn').click(function () {
let op = $("<p></p>").attr("id",'li_p').append('我是p里面添加的内容');
$("#my_div").append(op);
})
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)