这也是最近遇到的坑，还是之前那个项目，现在要实现登录功能。

背景：注册功能之前已经跑通了。前端用的是jquery后台是springMVC。鉴于注册和登录有些接口功能是类似的（比如注册确保邮箱是没有注册过，而登录是确保注册过），于是后台还准备用注册的那套接口。

登录的接口get请求是没问题的，但是post却出了问题：后台收不到请求体里的内容。

后来发现是jquery和angular的post行为有些区别，于是我做了个实验。

<!DOCTYPE html>

<html lang="en" ng-app="app">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-controller="body">

<button id="ng-btn" ng-click="sendNgPost()">ng-btn</button>

<button id="jq-btn">jq-btn</button>

<button id="js-btn">js-btn</button>

</body>

<script src="bower_components/jquery/dist/jquery.js"></script>

<script src="bower_components/angular/angular.js"></script>

<script>

angular.module('app',[]).controller('body',function ($scope,$http) {

    var data={username:'zhangdongming',password:'123123123'};

    $scope.sendNgPost=function () {

        $http({

            method:'POST',

            url:'/fromNg',

            data:data

        }).then(function (res) {

            console.log(res);

        })

    };

    $('#jq-btn').click(function () {

        $.post('/fromJq',data,function (data) {

            console.log(data);

        })

    });

    function post(sendData) {

        var xhr=new XMLHttpRequest();

        xhr.open('post','/fromJs',true);

        xhr.onload=function () {

            console.log(xhr.responseText);

        };

        xhr.send(data);

    }

    var btn=document.querySelector('#js-btn');

    btn.onclick=function () {

        post(data);

    }

});

</script>

</html>

这段代码的作用就是用angularjs，jquery和js发post请求

服务端是express写的

var express=require("express");

var mime = require('mime');

var http = require('http');

var util = require('util');

var url = require('url');

var fs = require('fs');

var path=require('path');

var formidable=require('formidable');

var querystring = require('querystring');

var bodyParser=require("body-parser");

app=express();

// var data=[

//     {screenName:"zhangdongming",phoneNumber:"15210938964",email:"fortunewheel@sina.com"}

// ];

app.use(express.static(path.join(__dirname)));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended:false}));

app.get('/',function (req,res) {

    res.sendfile(path.resolve("client.html"));

});

app.post('/fromNg',function (req,res) {

    console.log(req.body);

    res.send('false');

});

app.post('/fromJq',function (req,res) {

    console.log(req.body);

    res.send('false');

});

app.post('/fromJs',function (req,res) {

    console.log(req.body);

    res.send('false');

});

app.listen(3000);
注意，body-parser中间件use我写了两句。
好了现在看看这三个请求是什么样子的。
这个是angular的

用jquery

用js

注意看Content-Type ng是appliction/json，jq是application/x-www-form-urlencoded，js是text/plain。

而Request Payload中，ng是json字符串，jq经过了序列化，js是个？？？

对于express的body-parse中间件来说，两种格式的都可以，只需要写好对应的use就可以了。

而我们后台的接口写法只能接收urlencoded格式的，json是收不到的。

这种事情自然是前端想办法，很简单，都转成jquery的格式就行了。

具体来讲,对于js来讲，加上两句：

1.换格式config(function ($httpProvider) {

    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
})

2.序列化工作就比较简单了，因为用angular一般会默认带上jqeruy，$.param()可以方便的完成这项工作

$http({

    method: 'POST',
    url: '/fromNg',
    data: $.param(data)
}).then(function (res) {
    console.log(res);
})

以上。

angular js jquery中post请求的一点小区别的更多相关文章

  1. Angular和jQuery的ajax请求的差别

    近期项目中使用angular,结果发现后台没法获取參数,所以,略微研究了一下两者在发送ajax时的差别. 注意angular和jquery的ajax请求是不同的. 在jquery中,官方文档解释con ...

  2. js jquery中 的数据类型

    任何一门语言, buguan 是动态的, 还是像C语言的, 都有严格的 类型 "概念的", 这个是由于 编译器和解释器要求的, 需要的. 所以在是使用像 js, jquey ,ph ...

  3. paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

    paip.提升效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----An ...

  4. paip.提高工作效率--数据绑定到table原则和过程Angular js jquery实现

    paip.提高工作效率--数据绑定到table原理和流程Angular js  jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #----- ...

  5. (三)在js(jquery)中获得文本框焦点和失去焦点的方法

    在js(jquery)中获得文本框焦点和失去焦点的方法   文章介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点,加一种是利用jquery $(" ...

  6. jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法

    jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...

  7. Jquery中on绑定的一些小坑

    ---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...

  8. jQuery中attr和prop方法的区别

    jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...

  9. jquery中的this与$(this)的区别总结（this：html元素）（$(this)：JQuery对象）

    jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象) 一.总结 1.this所指的是html 元素,有html的属性,可用 this.属性  ...

随机推荐

  1. 查询dubbo服务

    1.公司内网肯定会有服务治理平台,把自己提供的服务接口当关键字查询即可. 2.命令方式实现 查看本机Dubbo服务是否启动,telnet localhost [端口号],端口号是在注册dubbo服务的 ...

  2. Java基础—枚举

    定义 枚举(enum)类型是Java 5新增的特性,它是一种新的类型,允许用常量来表示特定的数据片断,而且全部都以类型安全的形式来表示. 为什么要用枚举 在java语言中还没有引入枚举类型之前,表示枚 ...

  3. Hadoop十年解读与发展预测

    编者按:Hadoop于2006年1月28日诞生,至今已有10年,它改变了企业对数据的存储.处理和分析的过程,加速了大数据的发展,形成了自己的极其火爆的技术生态圈,并受到非常广泛的应用.在2016年Ha ...

  4. s5_day7装饰器作业

    # 一:编写函数,(函数执行的时间是随机的) import time import random # def foo(): # time.sleep(random.randrange(1,5)) # ...

  5. webservice -- cxf客户端调用axis2服务端

    背景: 有个项目, 需要由第三方提供用户信息, 实现用户同步操作, 对方给提供webservice接口(axis2实现)并也使用axis2作主客户端调用我方提供的webservice接口 起初, 由于 ...

  6. Linux知识点总结

  7. 自动化测试管理平台ATMS(V1.0.1_7.29)下载

    自动化测试管理平台ATMS(V1.0.1_7.29)下载http://automationqa.com/forum.php?mod=viewthread&tid=2582&fromui ...

  8. asp.net MVC 强类型视图表单Ajax提交的注意事项

    xmfdsh这几天遇到这么一个问题,在MVC中通过model模型生成的强类型视图的表单,在提交后的回调函数并没有发挥作用.如下图: 如上图,无论是通过Ajax.BeginForm或者Html.Begi ...

  9. python中多重继承与获取对象

    1.python中多重继承 除了从一个父类继承外,Python允许从多个父类继承,称为多重继承. 多重继承的继承链就不是一棵树了,它像这样: class A(object): def __init__ ...

  10. 一步一步教你读懂NET中IL

    .NET CLR 和 Java VM 都是堆叠式虚拟机器(Stack-Based VM),也就是说,它们的指令集(Instruction Set)都是采用堆叠运算的方式:执行时的资料都是先放在堆叠中, ...