AngularJS $http post 传递参数数据的方法

在cordova开发的时候使用到了$http的post方法，传递的参数服务端怎么都接收不到，搜索了下，发现使用AngularJS通过POST传递参数还是需要设置一些东西才可以！

1、不能直接使用params

例如：

$http({
method: "POST",
url: "http://192.168.2.2:8080/setId",
params: {
cellphoneId: "b373fed6be325f7"}
}).success();

当你这样写的时候它会把id写到url后面：

http://192.168.2.2:8080/setId？cellphoneId=b373fed6be325f7"

会在url后面添加"？cellphoneId=b373fed6be325f7",查了些资料发现params这个参数是用在GET请求中的，而POST/PUT/PATCH就需要使用data来传递;

2、直接使用data

$http({
   method: "POST",
   url: "http://192.168.2.2:8080/setId",
   data: {
 cellphoneId: "b373fed6be325f7"
} }).success();

这样的话传递的，是存在于Request Payload中，后端无法获取到参数

这时发现Content-Type:application/json;charset=UTF-8,而POST表单请求提交时，使用的Content-Type是application/x-www-form-urlencoded，所以需要把Content-Type修改下！

3、修改Content-Type

$http({
   method: "POST",
   url: "http://192.168.2.2:8080/setId",
   data: {cellphoneId: "b373fed6be325f7"},
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 }).success();

这时数据是放到了Form Data中但是发现是以对象的形式存在，所以需要进行序列化！

4、对参数进行序列化

$http({
   method: "POST",
   url: "http://192.168.2.2:8080/setId",
   data: {cellphoneId: "b373fed6be325f7"},
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    transformRequest: function(obj) {
   var str = [];
   for (var s in obj) {
   str.push(encodeURIComponent(s) + "=" + encodeURIComponent(obj[s]));
   }
   return str.join("&");
  }
 }).success();

以上这篇AngularJS $http post 传递参数数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS下$http服务Post方法传递json参数的实例

    本文主要介绍如何使用Angularjs $http服务以POST方法向服务器传递json对象数据. 具体如下: 一.$http POST方法默认提交数据的类型为application/json var data = {'wid':'0', 'praise' : '25'}; $http.post(url, data).success(function(result) { // }); 最终发送的请求是: POST http://www.example.com HTTP/1.1 Content-T

  • AngularJS页面带参跳转及参数解析操作示例

    本文实例讲述了AngularJS页面带参跳转及参数解析操作.分享给大家供大家参考,具体如下: 页面带参跳转 $scope.LoginSucessLocation = function () { var hre = 'http://ctb.qingguo.com/weixinCt/main#/upload_topic_start?uid=' + $scope.uid + '&orgcode=' + $scope.orgCode; location.href = hre; } 在url的后面,增加?

  • 详解angular中通过$location获取路径(参数)的写法

    我最近在研究angular中通过$location获取路径(参数)的写法,在网上搜索了很多的资料,正好今天有时间,就整理一下! 以下获取与修改的 URL 以  ( http://172.16.0.88:8100/#/homePage?id=10&a=100  ) 为例 [一]获取 (不修改URL) //获取当前完整的url路径 var absurl = $locationabsUrl(); //http://88:8100/#/homePage?id=10&a=100 // 获取当前url

  • angularJS1 url中携带参数的获取方法

    index.html 从此界面跳转到a.html界面 <!doctype html> <html> <head> <meta charset="utf-8"> <title>form demo</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • AngularJS $http post 传递参数数据的方法

    在cordova开发的时候使用到了$http的post方法,传递的参数服务端怎么都接收不到,搜索了下,发现使用AngularJS通过POST传递参数还是需要设置一些东西才可以! 1.不能直接使用params 例如: $http({ method: "POST", url: "http://192.168.2.2:8080/setId", params: { cellphoneId: "b373fed6be325f7"} }).success();

  • Express无法通过req.body获取请求传递的数据解决方法

    目录 前言 1.问题描述 2. 解决办法 2.1 解决JSON内容格式 2.2.解决x-www-form-urlencoded内容格式 3.附 3.1.获取get请求参数 3.2.封装XMLHttpRequest 4.总结 前言 最近尝试重新封装XMLHttpRequest,在发post请求的时候,发现express通过req.body获取不到数据,req.body打印出来是一个空对象. 网上也试了网上各种办法,还是不成功,最后发现需要在XMLHttpRequest请求时设置一个请求头,来标识发

  • js提交form表单,并传递参数的实现方法

    //增加的函数 begin function queryFun(){ var type = $("#artType").val(); var hasInputed = "1";//表示输入了要搜索 的信息 if($("#query").val()=="选手姓名/编号"){ //表示没有输入要搜索的值 hasInputed="0"; } document.getElementById("queryF

  • Python脚本文件外部传递参数的处理方法

    Python脚本文件外部传递参数的处理方法

    前言 我们写的 Python 脚本需要修改参数,当我们将脚步上传到服务器或者给不会编程的人用时,会比较不方便,如果直接可以在外部指定参数,会非常方便,今天介绍的就是 Python 外部指定参数的几种方法. 一.流文本处理 这种方法适用于修改一下文件中的内容,配合 Linux 命令非常方便,举一个例子,我们需要从一个 binlog 文件中找到该里面最大的事物,我们要配合 mysqldump 来做: mysqlbinlog -v --base64-output=decode-row ./mysql-

  • Android跨进程传递大数据的方法实现

    最近要从Service端给Client端传递图片数据,之前的数据都是通过aidl传递: 创建 Parcelable文件 ImageData.java public class ImageData implements Parcelable { private byte[] data; public byte[] getData() { return data; } public ImageData(byte[] dataIn) { this.data = dataIn; } public Ima

  • Shell脚本函数传递参数的实现方法

    如何传递参数到Shell脚本函数 通常,在其他脚本语言中,您可以将参数和参数作为function_name(parameter1, parameter2,…)传递给函数,这在shell脚本函数中不支持.在shell脚本函数中,您可以在函数调用期间直接传递参数,而无需在函数定义中定义它们的名称,并直接使用位置参数 $1 作为第一个参数, $2 作为第二个参数,以此类推. 在shell脚本中定义函数有两种方法 function function_name { ... } OR function_na

  • 传递参数的标准方法(jQuery.ajax)

    前台  复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&

  • JQuery 绑定事件时传递参数的实现方法

    如题,比如我想在$(":text").bind("keyup",funcionName);将当前的文本框作为参数传递给 functionName所代表的函数,应该怎么写?试了一 下$(":text").bind("keyup",functionName(this));这样是不对的! 1.直接在funcionName 里用 this 就是 对 触发时间的元素本身的引用,如果你需要funcionName有更多参数的话,可以这样用:

  • Flutter路由传递参数及解析实现

    Flutter路由传递参数及解析实现

    上一篇Flutter页面路由及404路由拦截实现介绍了使用路由来实现页面的跳转,从而简化页面之间的耦合,并可以实现路由拦截.在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据.同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新.本篇将介绍这两种情形的实现. Navigator 的 push 和 pop方法 Navigator 导航器的 push 和 pop 方法可以携带参数在页面间传

随机推荐