首先本文涉及的http发送请求有:‘get’,‘post’,‘put’,’delete‘。
一、表单方式
一般的form表单支持两种请求方式:‘get’,和‘post’,写法如下:
get:
<form action="xxx" method="get">
<input name="name" type="text"/>
<input name="submit" type="submit" value="提交"/>
</form>
post:
<form action="xxx" method="post">
<input name="name" type="text"/>
<input name="submit" type="submit" value="提交"/>
</form>
以下这种可以使用post方式上传文件:
<form action="xxx" method="post" enctype="multipart/form-data">
<input id="fileup" type="file" name="file"/>
<input name="submit" type="submit" value="上传文件"/>
</form>
二、ajax方式
XMLHttpRequest 对象的open()方法里一般只支持‘get’和‘post’方法,jquery封装的ajax一般支持以上四种的http请求方式,现在的浏览器基本上都提供支持:
get:
$.ajax({
type:'GET',
url:'http://www.baidu.com/zhidao',
data:{'find':'xxx'},
complete:function(xhr, status){
if(status=='success'){
alert(xhr.responseText);
}else if(status=='error'){
//出错处理
}
}
});
post:
$.ajax({
type:'POST',
url:'http://www.baidu.com/zhidao',
data:{'find':'xxx'},
complete:function(xhr, status){
if(status=='success'){
alert(xhr.responseText);
}else if(status=='error'){
//出错处理
}
}
});
put:
$.ajax({
type:'PUT',
url:'http://www.baidu.com/zhidao',
data:{'find':'xxx'},
dataType:'JSONP', //可选,跨域访问时使用,但会报parseerror,暂时米办法解决
complete:function(xhr, status){
if(status=='success'){
alert(xhr.responseText);
}else if(status=='error'){
//出错处理
}
}
});
delete:
$.ajax({
type:'DELETE',
url:'http://www.baidu.com/zhidao',
data:{'find':'xxx'},
if(status=='success'){
alert(xhr.responseText);
}else if(status=='error'){
//出错处理
}
}
});
三、文件上传的插件
一般情况下的发送数据,以上不用插件的方法就可以满足,但对于上传文件等应用功能,可以借助插件,这里推荐几个我查到过的插件,功能强大:
1.angular-file-upload
是一款轻量级的 AngularJS 文件上传工具,为不支持浏览器的 FileAPI polyfill 设计,使用 HTML5 直接进行文件上传。
http://www.oschina.net/p/angular-file-upload
另外AngularJS还封装了ajax,可以通过AngularJS调用ajax完成http的四种请求使用如下:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="angular-file-upload-shim.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-file-upload.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.config(function($httpProvider) {
//Enable cross domain calls
$httpProvider.defaults.useXDomain = true;
//Remove the header containing XMLHttpRequest used to identify ajax call
//that would prevent CORS from working
delete $httpProvider.defaults.headers.common['X-Requested-With'];
});
app.controller('MainCtrl', function($scope, $http) {
$scope.get = function() {
$http.get("http://xx/xx/xxx/").success(function(result) {
console.log("Success", result);
$scope.resultGet = result;
}).error(function() {
console.log("error");
});
};
$scope.get = function(value) {
$http.get("http://xx/xx/xxx/").success(function(result) {
console.log(result);
$scope.resultGet = result;
}).error(function() {
console.log("error");
});
};
$scope.delete = function(value) {
$http.delete("http://xx/xx/xxx/"+value).success(function(result) {
console.log(result);
$scope.resultDelete = result;
}).error(function() {
console.log("error");
});
};
$scope.put = function(value) {
$http.put("http://xx/xx/xxx/"+value).success(function(result) {
console.log(result);
$scope.resultPut = result;
}).error(function() {
console.log("error");
});
};
});
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="get()">GET</button>
Result : {{resultGet}}
<br/>
<input ng-model="moviePut"/><button ng-click="put(moviePut)">PUT</button>
Result : {{resultPut}}
<br/>
<input ng-model="movieDelete"/><button ng-click="delete(movieDelete)">DELETE</button>
Result : {{resultDelete}}
<br/>
<input ng-model="moviePost"/><button ng-click="post(moviePost)">POST</button>
Result : {{resultPost}}
</body>
</html>
2.ajaxfileupload.js
使用post方式上传文件:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
3.WebUploader
是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。api详细,功能能满足日常要求,有问题可以在github上提问,问题可以得到解答:
http://fex.baidu.com/webuploader/
https://github.com/fex-team/webuploader
是一个flash和js相结合而成的文件上传插件,其功能非常强大:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html
5.Plupload
拥有多种上传方式:HTML5、flash、silverlight以及传统的<input type=”file” />。Plupload会自动侦测当前的环境,选择最合适的上传方式,并且会优先使用HTML5的方式:http://www.cnblogs.com/2050/p/3913184.html