Heim  >  Artikel  >  Web-Frontend  >  apicloud实现AJAX请求(附代码)

apicloud实现AJAX请求(附代码)

php中世界最好的语言
php中世界最好的语言Original
2018-03-31 10:38:036424Durchsuche

这次给大家带来apicloud实现AJAX请求(附代码),apicloud实现AJAX请求的注意事项有哪些,下面就是实战案例,一起来看一下。

get请求代码:

api.ajax({
url:'http://m.weather.com.cn/data/101010100.html' //天气预报网站的WebService接口
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-Form表单提交:

api.ajax({
url: 'http://www.xxx.com/path/form',
method: 'post',
dataType: 'text', //该参数若不传,则默认为json
data: {
values:{name: 'devlp', password: '123456'} //键值对
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-单个/多个文件,文件组上传:

api.ajax({
url: 'http://www.xxx.com/path/upLoad',
method: 'post',
data: {
files:{myfile: 'filepath'}
// filepath来自ios或者Android的文件系统中的任意文件。可设置多个文件,甚至是文件数组,如files:{myfile: 'filepath', myfile1: 'filepath1'}或者files:{'myfile[]': ['filepath', 'filepath1']}等
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-提交二进制流:

api.ajax({
url: 'http://www.xxx.com/path/body',
method: 'post',
data: {
body:'textbits'
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-提交文件流:

api.ajax({
url: 'http://www.xxx.com/path/body',
method: 'post',
data: {
stream:'filepath'
// filepath来自ios或者Android的文件系统中的任意文件
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-Multipart-Data,文件和文本字段一起提交:

api.ajax({
url: 'http://www.xxx.com/path/multipart',
method: 'post',
data: {
values:{name: 'devlp', password: '123456'},
files:{file: 'fs://test.png'}
}
},function(ret,err){
if (ret) {
api.alert({msg:JSON.stringify(ret)});
} else {
api.alert({msg:JSON.stringify(err)});
};
});

POST请求-显示上传进度:

api.ajax({
url: 'http://www.xxx.com/path/multipart',
method: 'post',
report: true,
data: {
values:{name: 'devlp', password: '123456'},
files:{file: 'fs://test.png'}
}
},function(ret,err){
if(ret){
if(0 == ret.status){
//loading('进度:' + ret.progress);
}else{
api.alert({msg:'上传成功:\n' + JSON.stringify(ret)});
}
}else{
api.alert({msg:JSON.stringify(err)});
}
});

【端API使用api.ajax读取接口数据】

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>test</title>
</head>
<body>
<button onclick="showPersonInfo()">点我获取数据</button>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
function showPersonInfo(){
api.showProgress();//显示加载进度框
//使用api.ajax请求数据,具体使用方法和参数请看官方文档,这里使用get方法演示
api.ajax({
url:'http://192.168.0.10/get.php',//如果地址访问不到会请求出错,请填写自己的接口地址
method:'get',
cache:'false',
timeout:30,
dataTpye:'json',
},function(ret,err){
api.hideProgress();//隐藏加载进度框
if(ret){
for(var i=0;i<ret.length;i++){
var html=&#39;<br>'+'ID:'+ret[i].id+'<br>'+'姓名:'+ret[i].name+'<br>'+'性别:'+ret[i].sex+'<br>'+'年龄'+ret[i].age; 
document.write(html);
}
}else{
api.alert({msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode)});
}
});
}
</script>
</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

用CORS实现WebApi Ajax跨域请求的方法

ajax文件异步实现表单上传

Das obige ist der detaillierte Inhalt vonapicloud实现AJAX请求(附代码). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn