码迷,mamicode.com
首页 > Web开发 > 详细

angular js jquery中post请求的一点小区别

时间:2016-09-09 18:47:15      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

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

     背景:注册功能之前已经跑通了。前端用的是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请求的一点小区别

标签:

原文地址:http://www.cnblogs.com/zhangdongming/p/5856402.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!