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

背景：注册功能之前已经跑通了。前端用的是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. Frequent Values-线段树求解出现最多的数

    Frequent Values(poj 3368) 注意:以下答案为离线作答结果,并非能通过poj,若要通过poj,需要修改函数接口,因为以下程序接受半封闭区间(s,e],同时还需要修改输入数据的顺序 ...

  2. 收藏：几种开源许可证的区别！——By 阮一峰制作

    乌克兰程序员Paul Bagwell,画了一张分析图,下面是阮一峰制作的中文版,非常棒,绝对的好东西,收藏这张图供日后查看:

  3. SVN入门-2分钟教你入门

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010540106/article/details/37317201   学习SVN首先我们应该知道 ...

  4. laravel queue队列使用

    一篇文章: laravel中的队列服务跟其他队列服务也没有什么不同,都是最符合人类思维的最简单最普遍的流程:有一个地方存放队列信息,一个PHP进程在运行时将任务写入,另外一个PHP守护进程轮询队列信息 ...

  5. Changing an Elements innerHTML in TWebBrowser

    I'm unable to change the innerHTML of a javascript element, but i can change the id so i'm not sure ...

  6. LeetCode：前K个高频元素【347】

    LeetCode:前K个高频元素[347] 题目描述 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [ ...

  7. python报错 TypeError: string indices must be integers

    所以在读取字典的时候,最好先判断类型,然后再查看它是否已经有这样的属性: type(mydict) == type({})             #检查不是字典 如果是字典,再看看有没有这样的属性: ...

  8. netty应用

    http://www.blogjava.net/yongboy/archive/2013/05/13/399203.html http://shentar.me/tag/netty-2/ 代理 htt ...

  9. Linux mount/unmount命令（6/16）

    linux是一个优秀的开放源码的操作系统,可以运行在大到巨型小到掌上型各类计算机系统上,随着 linux系统的日渐成熟和稳定以及它开放源代码特有的优越性,linux在全世界得到了越来越广泛的应用.现在 ...

  10. linux命令（6/9）：watch命令

    watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...