前端开发工作中，最常用到的数据交互技术应该就是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);
})
}
}
})
好啦，先说这些，涉及到跨域问题的解决方案，咱们下次再专门讨论