angularjs 利用$http post数据

在angularjs中我们最好不要使用jquery提供的ajax函数去提交数据

angularjs已经为我们提供了一个$http的方式 去提交http请求

今天主要讲下如何使用$http post数据

先给出一个  简单的例子

$http({
    url: $scope.url,
    method: "POST",
    data: { 'message' : "message" }
})

通过debug模式 你可以看到

1. 1. Accept:
      application/json, text/plain, */*
   2. Accept-Encoding:
      gzip,deflate,sdch
   3. Accept-Language:
      zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,ja;q=0.2
   4. Cache-Control:
      max-age=0
   5. Content-Length:
      21
   6. Content-Type:
      application/json;charset=UTF-8
   7. Cookie:
      _ga=GA1.2.1452147556.1407938281; __utma=137862001.1452147556.1407938281.1408280210.1408364777.3; __utmb=137862001.1.10.1408364777; __utmc=137862001; __utmz=137862001.1407938281.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
   8. Host:
      run.plnkr.co
   9. Origin:
      http://run.plnkr.co
   10. Proxy-Connection:
       keep-alive
   11. Referer:
       http://run.plnkr.co/UGRQrx21hxtAyAWs/
   12. User-Agent:
       Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1653.0 Safari/537.36
2. Request Payloadview source
   {message:message}

   1. message: "message"

他是将传递的数据默认的以json的方式去，这时候通过requset.getParameter("")的方式是得不到相应的参数的

对比下利用$.ajax post数据的时候

1. 1. Accept:
      */*
   2. Accept-Encoding:
      gzip,deflate,sdch
   3. Accept-Language:
      zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,ja;q=0.2
   4. Connection:
      keep-alive
   5. Content-Length:
      3
   6. Content-Type:
      application/x-www-form-urlencoded; charset=UTF-8
   7. Cookie:
      __atuvc=1%7C34; _ga=GA1.2.1452147556.1407938281; plnk_session=53eb6f44eedc3763504570bd; __utma=137862001.1452147556.1407938281.1408280210.1408364777.3; __utmc=137862001; __utmz=137862001.1407938281.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)
   8. Host:
      plnkr.co
   9. Origin:
      http://plnkr.co
   10. Referer:
       http://plnkr.co/edit/?p=preview
   11. User-Agent:
       Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1653.0 Safari/537.36
   12. X-Requested-With:
       XMLHttpRequest
2. Form Dataview sourceview URL encoded
   
   1. a:
      1

这时候我们就知道了需要 改变 request header里面的content-type属性 让他以form表单的方式编码提交数据
那么代码如下

    $http({
    <span style="white-space:pre">	</span> url: $scope.url,
   <span style="white-space:pre">	</span> method: "POST",
   <span style="white-space:pre">	</span> headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    <span style="white-space:pre">	</span> data: { 'message' : "message" ,
     <span style="white-space:pre">	</span> id:1}
    })

但是这个时候 你肯定也会发现 form data是

{"message":"message","id":1}

这是因为我们的参数没有序列化，这个时候导入jquery的$.param(data)函数去序列化就行了

<pre name="code" class="javascript">$.param({ 'message' :  "message",   id:1    })

<span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">"</span><span class="console-formatted-string source-code" style="box-sizing: border-box; color: rgb(196, 26, 22); white-space: pre-wrap; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; background-color: rgb(255, 255, 255);">message=message&id=1</span><span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; white-space: pre-wrap; background-color: rgb(255, 255, 255);">"</span>

所以我们将能够得到一个完整的方式

    $http({
   <span style="white-space:pre">	</span>url: $scope.url,
   <span style="white-space:pre">	</span>method: "POST",
     <span style="white-space:pre">	</span>headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param({ 'message' : "message" ,id:1})

       })

如果你的message是个json的object的话 可以使用如下方式

$http({
   	url: $scope.url,
   	method: "POST",
     	headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param({ 'message' :JSON.stringify(message) ,id:1})
       })