• 技术文章 >web前端 >js教程

    apicloud实现AJAX请求(附代码)

    php中世界最好的语言php中世界最好的语言2018-03-31 10:38:03原创4896
    这次给大家带来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='<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文件异步实现表单上传

    以上就是apicloud实现AJAX请求(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:apicloud AJAX api
    上一篇:Ajax实现检测网站劫持的方法 下一篇:FormData与Spring MVC实现Ajax文件下载功能
    大前端线上培训班

    相关文章推荐

    • javascript如何获取当前方法名• javascript怎么设置p的值• JavaScript中数组如何遍历• javascript怎么取消点击事件• JavaScript如何获取HTML元素

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网