那些年遇到的ajax相关问题

前端开发工作中，最常用到的数据交互技术应该就是ajax了，无论是原生js的，jquery框架，还是mui，angular，vue等相关的ajax方法，都是前端开发人员应该熟练掌握的技术，下面就工作过程中用到的一些ajax方法与大家分享一二，欢迎探讨：

1.最长使用的应该是jQuery封装的ajax方法，废话少说，上菜：

    $.ajax({

      url:"此处存放你所访问的接口"，

      data：{“username”:"dawei","sexy":"male"},   //如使用post方式提交数据，此处多用键值对方式传值，

      async:true,  //默认为true，表示异步，修改为false则为同步，

      type：“GET/POST”,    //定义请求方式，

     dataType：“text/html/javascript/json/xml”,//数据格式，若为跨域访问，且后台接口数据为json格式，设置好了回调，则此处设置jsonp，

     success：function（data）{

             //data即为服务器返回的接口数据，一般情况下若为数组或对象，配合$.each进行循环DOM操作

      },

     error：function(){

         //异常处理

      }

   })

其他的直接整理了，上图：

2.mui中遇到的ajax怎么处理呢？

这里需要知道两个东西，首页mui的ajax其实是源于jquery，并且属于H5+api使用，所以书写的时候最好加上mui.plusReady（function（）{    }）；其次其对比jquery的ajax方法格式上有点区别，上图：

3. Angular中的ajax技术

    Angular的ajax需要依赖$http服务，所以需要再控制器中注入$http,1.4版本以上推荐用新方法，如：

    var app=angular.module("myapp",[]);
app.controller("ct",function($scope,$http){
$http({method: 'GET',url: 'cc.php'}).then(function(response){
  $scope.info=response.data.data
  console.log(response.data)
})
})

//或者


var app=angular.module("myapp",[]);
app.controller("ct",function($scope,$http){
$http.get("cc.php").then(function(response){
  $scope.info=response.data.data
  console.log(response.data)
})
})


//或者

var app=angular.module("myapp",[]);
app.controller("ct",function($scope,$http){
$http.post("cc.php").then(function(response){
  $scope.info=response.data.data
  console.log(response.data)
})
})

//或者

var app=angular.module("myapp",[]);
app.controller("ct",function($scope,$http){
$http.jsonp("cc.php?callback=JSON_CALLBACK").then(function(response){
  $scope.info=response.data.data
  console.log(response.data)
})
})

4. vue里面的ajax技术是什么样子的呢？

   1.依靠vue-resourse

    确保引入架包

    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/vue-resource.js"></script>

   核心代码演示：

   new Vue({
    el:".list",
    data:{
    arr:[]
    },
    mounted: function() {
this.$nextTick(function(){
this.ajax();
})
},
    methods:{
    ajax:function(){
    var _this=this;
    this.$http.get("zz.php").then(function(data){
    console.log(data.data.T1348649580692)
    })
    }
    }
    })

   2.依靠vue-axios

      同样要引入架包：
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>

          <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

     核心代码：

    new Vue({
el:"#app",
data:{
mydata:''
},
methods:{
getdata:function(){

//关键代码
axios.get("cc.php').then(function(res){
console.log(res.data)
})

//或者

axios({
url:'cc.php'
}).then(function(res){
console.log(res.data)
})
                
                
                //或者
                
                
axios.post('cc.php',{
name:'dawei'
}).then(function(res){
console.log(res.data);
})
                
                
                //或者
                
                
axios({
url:'cc.php',
params:{
name:'dawei'
}
}).then(function(res){
console.log(res.data);
})
}
}
})

好啦，先说这些，涉及到跨域问题的解决方案，咱们下次再专门讨论