angular2 post以「application/x-www-form-urlencoded」形式傳參的解決辦法

時間 2019-11-15

標籤 angular2 angular post application www form urlencoded 形式解決辦法欄目 AngularJS 简体版

原文原文鏈接

angular2 post以「application/x-www-form-urlencoded」形式傳參的解決辦法

http://blog.csdn.net/tianjun2012/article/details/51427417html

https://www.cnblogs.com/zhangdongming/p/5856402.html前端

代碼以下： authenticate(data) { var username = data.credentials.username; var password = data.credentials.password; var creds = "username=" + username + "&password=" + password; var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); this.http.post('http://localhost:3001/sessions/create', creds, { headers: headers }) .map(res => res.json()) .subscribe( data => this.saveJwt(data.id_token), err => this.logError(err), () => console.log('Authentication Complete') ); }jquery

angular js jquery中post請求的一點小區別

這也是最近遇到的坑，仍是以前那個項目，如今要實現登陸功能。angularjs

背景：註冊功能以前已經跑通了。前端用的是jquery後臺是springMVC。鑑於註冊和登陸有些接口功能是相似的（好比註冊確保郵箱是沒有註冊過，而登陸是確保註冊過），因而後臺還準備用註冊的那套接口。spring

登陸的接口get請求是沒問題的，可是post卻出了問題：後臺收不到請求體裏的內容。express

後來發現是jquery和angular的post行爲有些區別，因而我作了個實驗。json

<!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請求session

服務端是express寫的angular2

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。app

而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);})以上。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。