http几种请求方式调用

最新推荐文章于 2021-11-03 16:45:03 发布

Inuyasha1121

最新推荐文章于 2021-11-03 16:45:03 发布

阅读量5k

点赞数 5

分类专栏： HTTP javascript jquery js插件文章标签： HTTP请求方式调用

本文链接：https://blog.csdn.net/inuyasha1121/article/details/50007829

版权

javascript 同时被 3 个专栏收录

74 篇文章 1 订阅

订阅专栏

jquery

21 篇文章 0 订阅

订阅专栏

js插件

8 篇文章 0 订阅

订阅专栏

首先本文涉及的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

Inuyasha1121

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
http几种请求方式调用

首先本文涉及的http发送请求有：‘get’，‘post’，‘put’，’delete‘。一、表单方式一般的form表单支持两种请求方式：‘get’，和‘post’，写法如下：get：method="get"> name="name" type="text"/> post：method="post">
复制链接

扫一扫