前端-------->後端
方法：POST
将要傳遞給背景的資料在前端拼接成url字元串，通過request.send()傳遞給背景，背景php把得到的資料以索引數組的方式存儲在$_POST中。接着背景就可以把資料插入相關聯的資料庫中。
後端--------->前端
方法：GET
前端通過get方法從後端擷取資料，如果在這個過程中需要向後端傳遞參數，就把該參數拼接在後端位址的後面。
request.open("GET","service.php?number="+document.getElementById("keyword").value)
背景把要傳遞的資料以索引數組的方式存儲在$_GET中，以xml的格式傳給前端，前端通過json.parse()把資料解析成json數組。接着就可以用jq對資料進行dom操作。
jsonp跨域
特點：不支援POST請求，隻支援GET請求
XHR2跨域
特點：html5新引入，IE10以下不支援,但很簡單，隻需要在服務端插入一行代碼。
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
示例代碼(jsonp跨域)
後端php(xampp)
header("Content-type:application/json;charset=utf-8");
$staff=array
(
array("name"=>"王軍","number"=>"101","sex"=>"男","job"=>"CEO"),
array("name"=>"王夏","number"=>"102","sex"=>"男","job"=>"CTO"),
array("name"=>"李冰","number"=>"103","sex"=>"女","job"=>"産品經理")
);
if ($_SERVER["REQUEST_METHOD"]=="GET") {
search();
}elseif($_SERVER["REQUEST_METHOD"]=="POST"){
create();
}
function search(){
$jsonp=$_GET["callback123"];
if (!isset($_GET["number"])||empty($_GET["number"])){
echo '{"success":false,"msg":"參數錯誤"}';
return;
}
global $staff;
$number=$_GET["number"];
$result=$jsonp.'({"success":false,"msg":"沒有找到該員工"})';
// 周遊$staff多元數組，查找key值為number的員工是否存在
foreach ($staff as $value) {
if ($value["number"]==$number) {
$result=$jsonp.'({"success":true,"msg":"找到員工:員工編号:'.$value["number"].',員工姓名:'.$value["name"].',員工性别:'.$value["sex"].',員工職位:'.$value["job"].'"})';
break;
}
}
echo $result;
}
function create(){
if (!isset($_POST["name"]) || empty($_POST["name"])
|| !isset($_POST["number"]) || empty($_POST["number"])
|| !isset($_POST["sex"]) || empty($_POST["sex"])
|| !isset($_POST["job"]) || empty($_POST["job"])
) {
echo '{"success":false,"msg":"參數錯誤，員工資訊填寫不全"}';
return;
}
echo '{"success":true,"msg":"員工:'.$_POST["name"].'資訊儲存成功！"}';
}
前端
Document
*{
margin: 0;padding:0;
font-size: 16px;
font-family: "微軟雅黑";
}
員工查詢
請輸入員工編号:
查詢
員工建立
請輸入員工姓名：
請輸入員工編号：
請輸入員工性别：
男
女
請輸入員工職位：
儲存
兩種方法實作asp.net方案的前後端資料互動(aspx檔案、html+ashx+ajax)
一個HTML頁面隻能顯示HTML代碼資訊,不能與資料庫進行資料的互動.asp.net方案提供了網頁與資料庫互動的方法,這裡舉出兩種:①aspx檔案 ②ashx檔案+ajax技術 一.建立資料庫 這裡以 ...
前後端資料互動處理基于原生JS模闆引擎開發
json資料錯誤處理,把json檔案資料複制到----> https://www.bejson.com/ 線上解析json 這樣能直覺的了解到是否是json資料寫錯,在控制台打斷點,那裡錯誤打那 ...
web前後端資料互動
前後端資料互動是每一名web程式員必須熟悉的過程,前後端的資料互動重點在于前端是如何擷取後端傳回的資料,畢竟後端一般情況下隻需要将資料封裝到一個jsonMap,然後return就完了.下面通過一個li ...
vue-resource的使用，前後端資料互動
vue-resource的使用,前後端資料互動 1:導入vue與vue-resource的js js下載下傳: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
對GraphQL-BFF：微服務背景下的前後端資料互動方案的研究-------引用
随着多終端.多平台.多業務形态.多技術選型等各方面的發展,前後端的資料互動,日益複雜. 同一份資料,可能以多種不同的形态和結構,在多種場景下被消費. 在理想情況下,這些複雜性可以全部由後端承擔.前端隻 ...
SpringMVC前後端資料互動總結
控制器 作為控制器,大體的作用是作為V端的資料接收并且交給M層去處理,然後負責管理V的跳轉.SpringMVC的作用不外乎就是如此,主要分為:接收表單或者請求的值,定義過濾器,跳轉頁面:其實就是ser ...
Spring MVC前後端資料互動總結
控制器 作為控制器,大體的作用是作為V端的資料接收并且交給M層去處理,然後負責管理V的跳轉.SpringMVC的作用不外乎就是如此,主要分為:接收表單或者請求的值,定義過濾器,跳轉頁面:其實就是ser ...
day67 前後端資料互動
目錄 一.前後端傳輸資料的編碼格式(contentType) 1 form表單 2 ajax請求 二.ajax發送json格式資料 三.ajax發送檔案 四.django自帶的序列化元件(drf做鋪墊 ...
使用ORM進行前後端資料互動
使用ORM進行資料互動 前期準備 必備知識:ORM操作,資料庫多表操作.Django部分知識. 三張表:班級.老師.學生 一對多關系:班級與學生 多對多關系:班級與老師 #建立班級表 class Cl ...
随機推薦
解決IE6,IE7下子元素使用position:relative、父元素使用overflow:auto後，子元素不随着滾動條滾動的問題
解決IE6,IE7下子元素使用position:relative.父元素使用overflow:auto後,子元素不随着滾動條滾動的問題 在IE6,IE7下,子元素使用position:relati ...
DataBase --- Intellij IDEA 14.1.4使用Java連接配接SQL Server教程
Java連接配接資料庫的方法大體分為兩種:正向連接配接和反向連接配接.反向連接配接需要編譯器提供相關的插件來支援,目前主流的java IDE都支援反向連接配接.這裡主要對正向連接配接做一個經驗總結. 一.資料庫的配置 1.新 ...
Cheatsheet: 2014 08.01 ~ 08.31
Web Slow Server? This is the Flow Chart You're Looking For A Strolll Through Node: Introduction .NET ...
Mac生存手冊
最近剛從Linux轉到了Mac系統上,感覺好的地方是再也不折騰了,什麼GNOME, KDE, XFCE,各種發行版本都遠離我而去了.當然Mac下很多好軟體都是要付費的,我隻能繞着走了: 1. 指令行, ...
Oracle資料庫之PL/SQL程式設計基礎
PL/SQL程式設計基礎 一.PL/SQL塊結構 前邊我們已經介紹了PL/SQL塊的結構,再來回顧一下: DECLARE ...
移動端網頁meta設定和響應式
蘇甯易購WAP的meta分析 響應式 meta設定 媒體查詢時讀的width為viewport的寬度.viewport寬度為手機分辨率.比如note2 1280*720.需要重置為裝置 640*360 ...
【linux之挂載，Raid，LVM】
一.挂載,解除安裝 挂載:将新的檔案系統關聯至目前根檔案系統解除安裝:将某檔案系統與目前根檔案系統的關聯關系移除 cat /etc/mtab 存儲着已經挂載的檔案系統 (跟 mount 一樣) mount:顯 ...
java垃圾回收機制，以及常用的回收算法
記得之前去平安面試的時候,面試官問到了垃圾回收,我當時也就是說說了垃圾回收的原理,但是具體有哪些實作政策,我當時是懵的. 概念: Java的垃圾回收機制是Java虛拟機提供的能力,用于在空閑時間以不定 ...
Spark-RPC了解
基本架構 Akka Actor式RPC架構 Spark采用的是AkkaActor架構實作RPC,但是實際使用過程為了相容不同節點之間的檔案下載下傳,采用Netty來實作Actor功能. Spark RPC ...