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

背景：注册功能之前已经跑通了。前端用的是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. 修改sql server实例、数据库、表、字段的排序规则

    转自:http://blog.51cto.com/jimshu/1095780 概念与详情请参考:字符编码与排序规则:https://www.cnblogs.com/gered/p/9145123.h ...

  3. Python（名称空间、函数嵌套、函数对象）

    一.名称空间: 名称空间 定义:存放名字和值的绑定关系       内置名称空间 python自带的名字,如print.int.str 解释器启动就会生效   全局名称空间 文件级别定义的名字,都会放 ...

  4. django联合查询

    假设A表的主键aid作为B表的外键,A表有属性name,那么想查询B表中name为abc的元素就可以这样写: B.objects.all().filter(aid__name = 'abc') __真 ...

  5. Java并发（3）：volatile及Java内存模型

    Java 语言中的 volatile 变量可以被看作是一种“程度较轻的 synchronized“:与 synchronized 块相比,volatile 变量所需的编码较少,并且运行时开销也较少,但 ...

  6. Spark --idea无法new scala class

    问题: 无法新建Scala class 解决: 1.下载插件 setting-->Plugins-->安装scala插件-->提示重启idea-->自动提示你安装scala s ...

  7. c3p0连接不上sql server

    1.首先判断sqlserver是否安装成功 2如果sqlserver正常运行 可能是因为没有打开1433端口,按以下步骤设置tcp/ip enabled 打开之后再重新启动sql server服务,按 ...

  8. 搭建自己的npm仓库

    第一步:安装Erlang环境 首先,安装必要的库 yum install build-essential yum install libncurses5-dev yum install libssl- ...

  9. Android bluetooth介绍

    Android bluetooth介绍(一):基本概念及硬件接口Android bluetooth介绍(二): android 蓝牙代码架构及其uart 到rfcomm流程Android blueto ...

  10. winrar5.0注册码

    新建一个文本文档,输入横线内的内容 ---------------------------------------------------------------------------------- ...