http几种请求方式调用

来源：互联网发布：京东联盟网站源码编辑：程序博客网时间：2024/06/08 13:34

首先本文涉及的http发送请求有：‘get’，‘post’，‘put’，’delete‘。

一、表单方式

一般的form表单支持两种请求方式：‘get’，和‘post’，写法如下：

get：

post：

以下这种可以使用post方式上传文件：

二、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'},

put：

$.ajax({
type:'PUT',
url:'http://www.baidu.com/zhidao',

data:{'find':'xxx'},

dataType:'JSONP', //可选，跨域访问时使用，但会报parseerror，暂时米办法解决

delete：

$.ajax({
type:'DELETE',
url:'http://www.baidu.com/zhidao',

data:{'find':'xxx'},

三、文件上传的插件

一般情况下的发送数据，以上不用插件的方法就可以满足，但对于上传文件等应用功能，可以借助插件，这里推荐几个我查到过的插件，功能强大：

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

4.SWFUpload

是一个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

0 0