ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用 |
您所在的位置：网站首页 › jquery获取数据编程题 › ajax获取后台数据的几种方式及如何获取ajax内部的数据供外部使用 |
|
文章目录
1 ajax获取后台数据的几种方式1.1 原生js的ajax方式1.1.1 get1.1.2 post
1.2 jQuery封装的ajax方式1.2.1 $.ajax1.2.2 $.get1.2.3 $.post
2 ajax动态获取数据 创建页面的几种方法2.1 通过创建和添加节点实现2.2 字符串拼接2.3 使用baidutemplate实现（推荐）
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 $.ajax({ url:'data/zhuye-list.json', error:function(data){ alert(data); }, success:function(data){ //判断，如果是字符串就先转成json再使用； if(typeof data ==="string"){ data = JSON.parse(data); } var html = []; for(var i= 0,len = data.result.length;i var str='\ \ \ \'+data.name+' \ '+data.jieshao+'\ '+data.price+'\ \ \ \ '; return str; 2.3 使用baidutemplate实现（推荐）其实是个JS模板引擎，点击这里去官网上下载这个js文件，灰常灰常轻量级; 1、在html页面中需要写如下的代码，也就是我们要动态创建的代码块，在这里我们把他当做是一个模板来使用，注意这里的写法：一个是，另外一个是所有的js代码块都要用分隔符包起来，分隔符的格式 let op = $(" ").attr("id",'li_p').append('我是p里面添加的内容'); $("#my_div").append(op); }) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |