后端接收不到AngularJs中$http.post发送的数据的问题

1.问题:

后端接收不到AngularJs中$http.post发送的数据,总是显示为null

示例代码:

$http.post(/admin/KeyValue/GetListByPage,
    {
         pageindex: 1,
         pagesize: 8
    })
  .success(function(){
      alert("Mr靖");
  });

代码没有错,但是在后台却接收不到数据,这是为什么呢?

用火狐监控:参数是JSON格式

  

用谷歌监控:传参方式是request payload

  

  可以发现传参方式是request payload,参数格式是json,而并非用的是form传参,所以在后台用接收form数据的方式接收参数就接收不到了

  POST表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指

定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8,而此处的Content-Type是:

  



2.解决方法:

直接上代码:

//要通过post传递的参数
var data = {
    pageindex: 1,
    pagesize: 8,
},
//post请求的地址
url = "/admin/KeyValue/GetListByPage",
//将参数传递的方式改成form
postCfg = {
    headers: { ‘Content-Type‘: ‘application/x-www-form-urlencoded‘ },
    transformRequest: function (data) {
        return $.param(data);
    }
};
//发送post请求,获取数据
$http.post(url, data, postCfg)
    .success(function (response) {
        alert("Mr靖");
    });

接下来再看监视工具:

火狐监视:参数类型已经变成表单数据

  

谷歌监视:

  

现在传参方式就变成form方式了,然后后端就可以正常接收参数了!

时间: 2024-10-07 22:07:18

后端接收不到AngularJs中$http.post发送的数据的问题的相关文章

前端传多个数组集合,后端接收并匹配

传参格式 后端接收并在SQL匹配 @GetMapping(value = "xj/node/openApi/subnets") @ApiOperation(value = "查询openApi子网接口", httpMethod = "GET", response = String.class) public Map<String, Object> listResourceOpenApiSubnets( @ApiParam(value

.net core 3.1 webapi后端接收钉钉小程序post的文件/图片

原文:.net core 3.1 webapi后端接收钉钉小程序post的文件/图片 世上本没路:走的人多了,便成了路. dd.uploadFile({ url: '请使用自己服务器地址', fileType: 'image', fileName: 'file', filePath: '...', success: (res) => { dd.alert({ content: '上传成功' }); }, }); 这就是官网上的例子,没有后端的.但是我猜这是用"Form"进行pos

通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

基础知识 1.service(): 使用service()可以注册一个支持构造函数的服务,它允许我们为服务对象注册一个构造函数. service()方法接受两个参数:   ? name(字符串) 要注册的服务名称. ? constructor(函数) 构造函数,我们调用它来实例化服务对象. 2.$http(): 使用$http()服务可以将应用同来自远程服务器的信息集成在一起. $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容.这个函数返回一个pr

AngularJS中使用$http对MongoLab数据表进行增删改查

本篇体验使用AngularJS中的$http对MongoLab数据表进行增删改查. 主页面: <button ng-click="loadCourse()">Load Course</button> <button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'&q

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

图表控件Highcharts在AngularJS中的使用

一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquery的,那么你可以轻松的把它拿过来使用,直接在页面中引入js文件并按照官方的API文档进行配置即可.下面提供了Highcharts的中英文官网: (1) Highcharts英文网:http://www.highcharts.com/ (2) Highcharts中文网:http://www.hcha

两强相争,鹿死谁手 — JQuery中的Ajax与AngularJS中的$http

一.JQuery与AngularJS 首先,先简单的比较一下JQuery与AngularJS. 二.Ajax请求与数据遍历打印 这里是Ajax和$http请求的JSON文件概览,默认的路径我们就放在与两者同级的文件夹里. [ { "name": "一号", "age": 17, "hobby": [ "吃", "喝" ], "score":{ "math&q

使用angularjs的$http.post异步提交数据时,服务器接收不了的问题

一,在正常情况下,使用表单的post方法提交数据,默认请求头的Content-Type:application/x-www-form-urlencoded类型, 提交数据格式如下: 二,使用angularjs的$http.post提交数据,使用的是Content-Type:application/json类型, 请求头格式如下: 直接代码块: 1 app.controller('payCtrl',function($scope,$http){ 2 //保存邮箱地址 3 $scope.emailE

angularjs中的$watch

在使用AngulaJS编写应用时,我们经常需要做的一件事情就是对模型中的变量进行监视,并对其发生的变化做出相应的回应.AngularJS为我们提供了一个非常方便的$watch方法,它可以帮助我们在每个scope中监视其中的变量.下面是一个非常简单的例子: <html ng-app='myApp'>     <head>         <meta charset="UTF-8">         <script src='../lib/angu