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

背景：注册功能之前已经跑通了。前端用的是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. 《深入理解Linux内核》阅读笔记 --- Chapter 3 Processes

    Process Switching 1.The set of data that must be loaded into the registers before the process resume ...

  2. JavaScript教程3-js深入

    1.JS流程控制语句 (1).if 判断 if 语句是基于条件成立时才执行相应的代码. if...else 语句是在指定的条件成立时执行if后的代码,在条件不成立时执行else后的代码. if...e ...

  3. Python的3个方法：静态方法(staticmethod),类方法(classmethod)和实例方法

    Python的方法主要有3个,即静态方法(staticmethod),类方法(classmethod)和实例方法,如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  4. Leetcode 之 Kth Largest Element in an Array

    636.Kth Largest Element in an Array 1.Problem Find the kth largest element in an unsorted array. Not ...

  5. Authentication Overview

    Authentication Overview Service accounts User accounts API keys

  6. python全栈开发从入门到放弃之字符编码

    一 了解字符编码的知识储备   1. 计算机基础知识(三幅图)       2. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中 ...

  7. git分支更新代码命令

    第一步: 查看状态  git status 第二步: 全部添加  git add --all 第三步: 再次查看状态  git status 第四步: 提交      git commit -m '备 ...

  8. class_options

    一.class_option :stylesheet, :type => :boolean, :default => "true", :description => ...

  9. springboot-vue项目后台2---pojo对查询结果手动分组

    <resultMap id="PResult" type="packs" > <result column="device_type ...

  10. 一般处理程序中 C#中对象转化为Json对象

    namespace: Newtonsoft.Json; context.Response.ContentType = "application/text"; 注:这里为什么不是 J ...