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

背景：注册功能之前已经跑通了。前端用的是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. mysql-5.6.22的安装步骤

    一.环境与下载地址: 1.系统下载地址: http://mirrors.sohu.com/centos/6.6/isos/x86_64/CentOS-6.6-x86_64-bin-DVD1.iso 2 ...

  2. git 上传本地代码到远程仓库

    未经允许,禁止转载! 查看哪些文件被修改过:git status 查看具体的修改内容:git diff 对新添加的文件进行添加:git add 文件名 提交修改标记:git commit -m &qu ...

  3. Delphi 正则表达式起步

    Delphi 正则表达式起步 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它. 官方网站: http://www.regular-expressi ...

  4. kubernetes --> kube-dns 安装

    准备yaml文件: 1.kubedns-cm.yaml # Copyright 2016 The Kubernetes Authors. # # Licensed under the Apache L ...

  5. form:checkboxes radiobutton select用法

    <form:checkboxes path="subjects" items="${requestScope.subjects}" element=&qu ...

  6. iOS XCode工程 警告处理

    今天 老板说,群~你的警告⚠️蛮多的...我拍了胸脯,下周项目总结时候一定会完美解决!!! 于是我得把项目中全部警告解决了,加油

  7. Saltstack sls文件：批量安装服务

    一.使用saltstack 批量安装nginx 1.创建salt目录 mkdir /srv/{salt,pillar} 2.再/srv/salt/下创建sls文件 vim nginx_install. ...

  8. 服务端Job调度程序

    GIT地址:https://github.com/youbl/PlanServer

  9. ubuntu 安装pip

    apt-get install python3-pip

  10. linux 查看内存信息，及其他硬件信息 dmidecode命令

    由于想换内存,想看看内存型号.频率,简单搜了下命令 可以用dmidecode 命令查看. dmidecode -t memory 这个命令可以查看内存的几乎所有信息,包括频率 大小等等 另外这个命令强 ...