ThinkPHP與Angular使用POST方法傳遞資料的問題

阿新 • • 發佈：2019-01-11

在最近的一個專案中前端使用了Angular，後臺使用了ThinkPHP。但是在前後臺數據交換的時候發現下面問題：

ThinkPHP的I方法並不能解析出POST請求攜帶的資料。

一、場景還原

Angular 的POST請求：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body ng-app="myAPP">
<div ng-controller="testPostController"></div>
   <script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/angular.js/1.5.3/angular.js"></script>
    <script type="text/javascript">
   var app = angular.module("myAPP",[])
   app.controller("testPostController",function($http){
   	$http({
   		url:"/index.php?c=test&a=testPost",
   		method:"post",
   		data:{
   			name:"wanghao",
   			gender:"男"
   		}
   	}).success(function(){});
   })
    </script>
</body>
</html>

對應的ThinkPHP處理程式：

<?php
namespace Main\Controller;

use Think\Controller;

class TestController extends Controller
{
    public function testPost()
    {
        $name   = I("post.name");
        $gender = I("post.gender");
        echo "收到的資料：name:" . $name . " gender: " . $gender;
    }
}

測試： 1）請求的發出：

迴應：

發現並沒有取到資料。。。。。。。。下面用普通的HTML寫法來發送POST請求：

<form action="/index.php?c=test&a=testPost" method="post">
  <input type="text" name="name" id="">
  <input type="text" name="gender" id="">
  <input type="submit" id="">

</form>

測試結果：

在chrome的控制檯比較原生HTML傳送POST請求和使用Angular的$http服務傳送POST請求，發現這裡的不同： 1、Angular的$http服務：

2、原生HTML

簡言之，1：HTTP請求的content-Type欄位指明瞭報文的資料格式，如Angular的POST的請求將資料封裝成了json，而原生HTML的資料格式是x-www-form-urlencode 2、ThinkPHP預設以x-www-form-urlencode的方式去解析POST的引數，所以解析不了Angular的請求。。。。 一種解決方案是將Angular的POST換成x-www-urlencode模式，對應的程式碼：

var transform = function(data){
    return $.param(data);
}

$http.post("/foo/bar", requestData, {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    transformRequest: transform
}).success(function(responseData) {
    //do stuff with response
});

更多：請見StackOverflow上的討論

ThinkPHP與Angular使用POST方法傳遞資料的問題

在最近的一個專案中前端使用了Angular，後臺使用了ThinkPHP。但是在前後臺數據交換的時候發現下面問題： ThinkPHP的I方法並不能解析出POST請求攜帶的資料。一、場景還原 Angular 的POST請求： <!DOCTYPE html> <

Vue父子vue-router路由傳遞資料與父子元件傳遞資料之分析

父子路由傳遞資料分析如下實際上等同於父子元件之間，資料的傳遞；父傳子 ---------> 父繫結屬性，子props接受屬性值子傳父 ---------> 觸發自定義事件，子觸發$emit,父接收父元件觸發子事件 ------->

在JNI與java之間傳遞資料

傳遞String字串 #MainActivity.java： JNI jni = new jni();//例項化JNI物件 jni.helloFromC("world！");//呼叫本地方法 #JNI.java: public c

Java類的組合與繼承小問題分析（建構函式引數的傳遞方法、資料隱藏的處理：對比C++）

一、類的組合： 1、初始化問題（建構函式的引數傳遞方法）：在C++中，通常只要物件中不含有指標類資料的話，物件與物件之間是可以相互賦值且不會出錯的，因此組合出來的類完全可以將傳遞過來的物件引數直接賦值給對應資料成員；而在java中，物

Angularjs cors 用get、post方法與springmvc後傳遞json資料的配置

首先介紹跨域問題，基於安全的考慮，頁面只有在同一個域名下，交流資料，比如網易就不能申請百度的服務（抓取網頁那是另外的技術），ajax也是這個使用範圍，跨域就失效了。在移動開發中，手機本身就是web站點，後臺pc伺服器是另外一個web站點。這樣就存在跨域問題。早先用js

jQuery實現區域性區域滾動條滾動到底部自動載入資料的問題總結與實現方法

1 需求背景在我們做管理系統，需要從後臺資料庫取出資料顯示到前臺時，可能我們的做法就是將資料全部取出然後利用jQuery動態新增到表格當中，但是當我們取出的量非常大時問題就出現了，我們會發現頁面載入的速度非常慢，這時我們就可利用分頁或者這種監聽滾動條來自動載入資料，這種技術也稱為“

Activity 與 DialogFragment 之間的資料傳遞

這篇文章參考了網友的相關資料（因為參考了多名前輩的資料，這裡就不一一指明出處了），不過還是非常感謝前輩們的無私分享。此文僅是學習過後的總結，主要目的是以後自己看著方便，如果恰巧能幫到你那也是再好不過了。（文中程式碼並不全，只是概括了思路，是從我目前的專案中拆下來的） Activity

activity與fragment之間的傳遞資料

首先activity之間的資料傳遞就是用intent和intent+bundle intent 傳遞 Intent i= new Intent(MainActivity.this,TheAty.class); i.putExtra("date","Hello

kotlin安卓開發：fragment向activity傳遞資料通過handler，設定回撥方法

從activity向fragment傳遞就比較方便了，直接用： fg.arguments = arguments 現在看看怎麼從fragment向activity傳遞資料。比如說，我們在一個ViewPage裡面設定了若干個fragment，fragment裡面有一個按鈕，提交相關

缺失資料的Bootstrap與Jackknife方法：《Statistical Analysis with Missing Data》習題5.1 & 5.2

一、題目 5.1 本題基於之前習題1.6產生關於 ( Y 1

【開發筆記】Unity聯網鬥地主的實現（一，伺服器與客戶端的資料傳遞流程）

話不多說，先上我李老師的思維導圖大致構思了一個框架 1.首先要定義一下伺服器與客戶端的傳輸協議，必須保持一致 2.定義服務於客戶端傳輸的訊息型別，如（申請加入，同意加入，出牌，之類的） 3.定義一下牌的型別，出的牌的型別，在客戶端判斷是否可以出牌，牌型傳給伺服器，伺服器在完成三個玩家的出

海量資料處理：十道面試題與十個海量資料處理方法總結（大資料演算法面試題）

第一部分、十道海量資料處理面試題 1、海量日誌資料，提取出某日訪問百度次數最多的那個IP。首先是這一天，並且是訪問百度的日誌中的IP取出來，逐個寫入到一個大檔案中。注意到IP是32位的，最多有個2^32個IP。同樣可以採用對映的方法

資料結構基礎------1.線性表之單鏈表的建立與輸出方法（Java版）

基礎知識：線性表（linear list），是其組成元素間具有線性關係的一種線性結構。線性表有 ①順序儲存結構（sequential storage structure）順序儲存結構可以簡單的理解利用為陣列的形式來進行儲存資料。 ②鏈式儲存結構（ch

電子資料取證與python方法第三章

import os import csv import hashlib import time import logging def getinfo1(dirfile): m = hashlib.sha256() f=open(dirfile,'rb'

多頁面之間傳遞資料的方法

傳統的前端開發中，頁面之間是少有引數互動的，甚至沒有，而在如今的前端環境下，一個稍微正式點的專案都不可能少了頁面間傳參，頁面的跨越、伺服器後臺進行資料請求等，都需要一個或多個傳參的方法。那麼引數在不同的頁面間進行傳遞，一個頁面的引數被另一頁面使用，如何才能做到不同頁面間進行引數傳遞？

海量資料處理：十道面試題與十個海量資料處理方法總結

第一部分、十道海量資料處理面試題 1、海量日誌資料，提取出某日訪問百度次數最多的那個IP。首先是這一天，並且是訪問百度的日誌中的IP取出來，逐個寫入到一個大檔案中。注意到IP是32位的，最多有個2^32個IP。同樣可以採用對映的方法，比如模1000，把整個大檔

CS231n 卷積神經網路與計算機視覺 6 資料預處理權重初始化規則化損失函式等常用方法總結

1 資料處理首先註明我們要處理的資料是矩陣X，其shape為[N x D] (N =number of data, D =dimensionality). 1.1 Mean subtraction 去均值去均值是一種常用的資料處理方式.它是將各個特徵值減去其均

java在子執行緒與主執行緒傳遞資料（回撥函式）

預習知識點：什麼是回撥函式？下面是知乎大神的回答，簡直不能再精闢程式碼： package kun.thread; public class THread { static C c=new C(); //flag用來標誌子執行緒執行結束 stati

SSM簡單引數傳遞與獲取方法

一：引數獲取的幾種方法 1》 /*** * （簡單新增方式一）接受Xueyuan這個實體類的引數物件即xueyuan * @param xueyuan * @param request * @param response * @throws Exception

MySql資料引擎簡介與選擇方法

ISAM ISAM是一個定義明確且歷經時間考驗的資料表格管理方法，它在設計之時就考慮到資料庫被查詢的次數要遠大於更新的次數。因此，ISAM執行讀取操作的速度很快，而且不佔用大量的記憶體和儲存資源。ISAM的兩個主要不足之處在於，它不支援事務處理，也不能夠容錯：如果你的硬碟崩潰了，那麼資料檔案就無法恢復了。如果

ThinkPHP與Angular使用POST方法傳遞資料的問題

一、場景還原

相關推薦