簡單了解AJAX
阿新 • • 發佈：2018-03-23
active else window product set function img pro pen
*/
xmlhttp.send(string);
/*
string: 僅用於post請求
*/
// 實例：頁面加載，獲取信息
HTML的內容:
<body>
<div id="box"></div>
</body>
success:function(result){ //返回的參數是active裏面所有get和set方法的參數
addBox(result);
}
});
function addBox(result){
$.each(result,function(index,obj){
$("#box").append("<div class=‘product‘>"+
"<div><img class=‘img‘ src="+obj[‘url‘]+"/></div>"+
"<div class=‘p1 p‘>"+obj[‘name‘]+"</div>"+
"<div class=‘p2 p‘>"+obj[‘sex‘]+"</div>"+
"<div class=‘p3 p‘>"+obj[‘email‘]+"</div>"+
"</div>");
});
}
// ajax的倆個版本：
var xmlhttp;
if(window.xmlHttpRequest){
xmlhttp = new xmlHttpRequest();
}else{
xmlhttp = new Activexobjext("Microsoft.xmlhttp");
}
// 向服務器發送請求：
xmlhttp.open(method,url,asyns);
/*
method: 請求類型（get和post）
url: 文件在服務器上的位置
async: 是否同步（true同步或false異步）
*/
xmlhttp.send(string);
/*
string: 僅用於post請求
*/
// 實例：頁面加載，獲取信息
HTML的內容:
<body>
<div id="box"></div>
</body>
JS的內容:
$.ajax({
type: "POST", //請求方式
url: "地址", //就是JSON文件的請求路徑
dataType: "JSON", //請求的文件類型：有text,xml.json,script.jsonp
success:function(result){ //返回的參數是active裏面所有get和set方法的參數
addBox(result);
}
});
function addBox(result){
$.each(result,function(index,obj){
$("#box").append("<div class=‘product‘>"+
"<div><img class=‘img‘ src="+obj[‘url‘]+"/></div>"+
"<div class=‘p1 p‘>"+obj[‘name‘]+"</div>"+
"<div class=‘p2 p‘>"+obj[‘sex‘]+"</div>"+
"<div class=‘p3 p‘>"+obj[‘email‘]+"</div>"+
"</div>");
});
}
簡單了解AJAX