『壹』 如何獲取前端傳過來的json對象
獲取前端傳過來的json對象
代碼如下
public JSONObject getRequestContent(HttpServletRequest req) {
JSONObject data = null;
try {
InputStream is = req.getInputStream();
BufferedReader br = new BufferedReader(new InputStreamReader(is, "utf-8"));
String line = null;
StringBuffer content = new StringBuffer();
while ((line = br.readLine()) != null) {
System.out.println(line);
content.append(line);
System.out.println(content);
}
String reqStr = content.toString().trim();
if (StringUtils.isEmpty(reqStr)) {
return new JSONObject();
}
if (reqStr.contains("=")) {
reqStr = reqStr.replaceAll("=", ":");
}
if (!reqStr.startsWith("{")) {
reqStr = "{" + reqStr;
}
if (!reqStr.endsWith("}")) {
reqStr = reqStr + "}";
}
data = JSONObject.fromObject(reqStr);
} catch (Exception e) {
e.printStackTrace();
return new JSONObject();
}
return data;
}
『貳』 【JSON】JSON在前端和後端傳遞
後端：我們假定使用的是java語言
前端：毫無疑問是js
java語言：是一種強類型的語言，必須定義類型，然後生成實例；而js卻不是，雖然它也是面向對象的，但是它並沒有先定義類這一種概念（但是js也有類型），它是基於原型的一種模式，和java完全不同。很顯然，二者的原理，機制，語法並不能兼容。二者產生的對象並不能被對方解讀。再來看網路傳輸，通常就是http/tcp協議嘍，使用的其實是請求-響應，再說白了即使字元串，不論後台傳來的是什麼類型的數據，也不論前台傳回的什麼類型的數據，網路層統統當作字元串處理，它也沒有辦法來解析類型啊！說到這里，前後台傳數據也就只能用字元串了，那也就意味著它們各自都要完成一個轉換過程，把要發送的轉換成字元串，把要收到的字元串解析成自己的對象。因為傳輸的字元串會涉及前後台雙方的解析和處理，所以雙方都必須認識或者知道字元串該怎麼轉，也就是說，最好能有一種通用的規則來編輯，轉換字元串，這個標准或者協議就是JSON，JSON就是用來交換數據的，是一種string，一種獨立於平台的數據格式。
這樣一來，前台就需要把自己的數據類型轉成JSON，然後發給後台，後台在用JSON來解析數據，轉換成自己的類型。後台傳前台一樣。那麼，怎麼把自己的數據轉成JSON呢？
`JSON`對象可以通過JavaScript存取屬性！JSON對象封裝成JSON字元串經常用於前後台傳輸數據！
如果在前端使用，那麼JSON對象可以通過 對象.屬性名 來調用，如果是json字元串，那麼只是字元串了！
在數據傳輸過程中，JSON是以文本、即字元串的形式傳遞的，而JavaScript操作的是JSON對象，所以，JSON對象和JSON字元串之間的相互轉換是關鍵。
JSON字元串：var str = '{ name: 'xmt', sex: 'woman' }'；
JSON對象： var str = { name: 'xmt', sex: 'woman' }；
JSON字元串轉化為JSON對象：var obj = JSON.parse(str) ；
JSON對象轉化為JSON字元串：var str = JSON.stringify(obj)；
『叄』 如何拿到前端傳過來的json對象
將數據以json格式傳給前端：
function generateDtb() {
//寫入
var txtName = document.getElementById("txtName").value;
//創建數組
var dtb = new Array();
//通過循環把數據寫入到數組並返回
for (var i = 0; i < firstGroup.length; i++) {
var row = new Object();
row.Name = txtName;
row.fullMoney = firstGroup[i].value;
row.discount = secondGroup[i].value;
dtb.push(row);
}
return dtb;
}
把數組轉換成json串傳入到後台：
$(function () {
//點擊botton1
$("#lbtnOK").click(function () {
var url = "DiscountManger.aspx?ajax=1";
var dtb = generateDtb();
// var strName = document.getElementById("txtName").value;
if (dtb == null)
{ }
else {
//序列化對象
var postdata = JSON.stringify(dtb);
//非同步請求
$.post(url, { json: postdata }, function (json) {
if (json) {
jBox.tip("添加成功！", "提示");
location.reload();
}
else {
jBox.tip("添加失敗！", "提示");
location.reload();
}
}, "json")
}
});
});
在後台的操作：
首先判斷是否需要傳輸數據
if (!IsPostBack)
{
//判斷是否非同步請求
if (Request.QueryString["ajax"] == "1")
{
ProcessRequest();
}
在這里進行對數據的處理：
///
/// 處理非同步請求
///
private void ProcessRequest()
{
//存入要填寫的策略
ArrayList arrDiscount = new ArrayList();
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反序列化DataTable
if (json == null)
{
return;
}
else
{
DataTable newdtb = Json2Dtb(json);
for (int i = 0; i < newdtb.Rows.Count; i++)
{
Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount();
//打折方案名
enStrategyDiscount.name = newdtb.Rows[i]["Name"].ToString();
//商店ID
enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID);
enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i]["fullMoney"].ToString());
enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i]["discount"].ToString());
//寫入數據到數組
arrDiscount.Add(enStrategyDiscount);
}
//寫入數據到資料庫
IStrategyBLL strategy = new StrategyBLL();
if (strategy.AddStrategyDiscount(arrDiscount))
{
Response.Write("true");
Response.End();
}
else
{
Response.Write("false");
Response.End();
}
}
這里，我們需要把json轉換成datatable
///
/// Json轉DataTable
///
///
///
private DataTable Json2Dtb(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = jss.Deserialize(json);
DataTable dtb = new DataTable();
if (dic.Count > 0)
{
foreach (Dictionary drow in dic)
{
if (dtb.Columns.Count == 0)
{
foreach (string key in drow.Keys)
{
dtb.Columns.Add(key, drow[key].GetType());
}
}
DataRow row = dtb.NewRow();
foreach (string key in drow.Keys)
{
row[key] = drow[key];
}
dtb.Rows.Add(row);
}
}
return dtb;
}
這樣，就可以把數據無刷新的寫入到資料庫。
當然，如果我們有一個從資料庫讀取的datatable，如果通過json顯示在前台呢。
首先，我們需要把datatable轉換為json數據
///
/// DataTable轉Json
///
///
///
private string Dtb2Json(DataTable dtb)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary drow = new Dictionary();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
return jss.Serialize(dic);
}
然後寫回到前台
///
/// 處理非同步請求
///
private void ProcessRequest()
{
Response.ContentType = "text/html";
string json = Request.Form["json"];
//反序列化DataTable
DataTable newdtb = Json2Dtb(json);
//序列化DataTable為JSON
string back = Dtb2Json(newdtb);
Response.Write(back);
Response.End();
}
在前台接受顯示：
$(function() {
//點擊botton1
$("#botton1").click(function() {
createTable(json);
});
});
//顯示Json中的數據
function createTable(json) {
var table = $("");
for (var i = 0; i < json.length; i++) {
o1 = json[i];
var row = $("");
for (key in o1) {
var td = $("");
td.text(o1[key].toString());
td.appendTo(row);
}
row.appendTo(table);
}
table.appendTo($("#back"));
}
『肆』 前端圖片上傳給後端還需要給後端欄位嗎
【聚焦前端實戰】後端讓我把圖片文件和欄位一起上傳了...
2022年11月21日但是如果要把欄位和圖片文件一起上傳那就不支持了,當然也不能像普通的欄位上傳一樣使用JSON,這個時候就要掏出我們的FormData格式了!
CSDN編程社區
大家還在搜
js將文件轉為二進制流
vue選擇文件夾獲取絕對路徑
後端響應圖片url給前端
前端上傳文件到伺服器
formdata和json區別
vue上傳圖片到後端
前端將二進制流轉換成圖片
通過url訪問伺服器上的圖片
前端怎麼把圖片傳到後端
前端上傳圖片到資料庫
前端適配移動端
js文件轉二進制
vue3上傳圖片
前端圖片上傳後端伺服器
前端傳圖片給後端
java後端如何傳圖片給前端
前端上傳圖片到後端vue
django返回圖片給前端
java後端接收前端傳來的圖片
js給一個對象添加屬性
js引入圖片
網頁堆棧溢出怎麼解決
前端上傳圖片到後端
前端把圖片傳給後端
圖片上傳伺服器並返回url
前端瀏覽器適配方案
前端上傳圖片到後端優化
前後端圖片傳輸
url統一資源定位符
前端上傳圖片
前端如何上傳圖片在返給後端 - 糖是苦滴的博客 - CSDN博客
2022年8月9日on-success:後面跟一個方法,通過這個方法我們可以獲取到後端返還給我們的url,這個時候我們需要把url通過表單提交給後端,這個時候上傳就成功完成了。
CSDN編程社區
前端如何將圖片傳到後端原生js(nodejs後端保存代碼請...
2022年6月21日後端將照片重新命名,就保存到了後端,不需要再傳遞照片名,後端接收到req.files上面有這個圖片原來的名字。
CSDN編程社區
前端上傳圖片到後端伺服器 - RainCat - zZ的博客 - CSDN博客
2021年9月4日JAVA後端 ---這里可以使用MultipartFile直接接收文件信息,也可以使用HttpServletRequest先接收 -...
CSDN編程社區
大家還在搜
前端向後端傳輸數據的方法有哪些
js給一個對象添加屬性
前端圖片API
前端上傳圖片的邏輯
前端上傳圖片的時機
前後端圖片傳輸
前端上傳圖片到資料庫
前端適配移動端
前端圖片上傳給後端還需要給後端欄位嗎 - 資深答主答疑 - 網路問一問
在線
2240位電子數碼答主在線答
已服務超1.5億人5分鍾內回復
Hi，為您實時解答電子數碼類軟硬體等問題，與數碼行家、發燒友1對1在線溝通
前端圖片上傳給後端還需要給後端欄位嗎
馬上提問
vue顯示後端傳來的圖片
116人正在咨詢
前端上傳圖片到伺服器
117人正在咨詢
做前端好還是後端好
121人正在咨詢
vue顯示後端傳來的圖片
116人正在咨詢
網路問一問
關於圖片上傳的問題(後端+前端) - 龍小超的博客 - CSDN博客 - 後端...
2022年10月28日這個方法可以讓你接受到從前端接受到的圖片,為post傳值 前端部分(使用了element-ui的圖片上傳) <el-image :src="'http://localhost:3000/...
CSDN編程社區
圖片上傳流程&前端上傳文件&後端保存文件&並返回圖片...
2022年7月26日比如在用戶界面,用戶選擇本地的一張照片,前端把照片傳到後端,後端怎麼把照片保存到伺服器,然後返回...
CSDN編程社區
...思路總結 - 琹箐的博客 - CSDN博客 - 前端上傳圖片到後端
2022年4月28日注:此處只提供前端向後端傳圖片思路的大致框架,不能正常運行。轉圖片的代碼未提供,還需整理。 <template> <!--
CSDN編程社區
前端上傳圖片到後端 - 小餅干 - mum的博客 - CSDN博客 - 前段上傳j...
2017年7月25日方法一、前端通過控制項傳給後端的是經過base64編碼的字元串,後端拿到這個字元串後再經過base64解碼,把解碼後的圖片存到伺服器的某個位置,然後數...
CSDN編程社區
大家還在搜
前端將圖片放在後端
前端把圖片傳給後端
圖片上傳前端鏈接
如何傳圖片給後端
前端瀏覽器適配方案
js文件轉二進制
圖片前後端怎麼傳輸
圖片上傳伺服器並返回url
vue前端上傳文件給後端的兩種方式 - 覺非逸的博客 - CSDN博客 - v...
2022年5月27日multiple="true" :before-upload="beforeUpload" :customRequest="selfUpload" accept=".png,.jpg" > 上傳圖片 1 2 3 4 5 6 7 ...
CSDN編程社區
前端上傳圖片(文件)到後端 - 觀棋不語的我的博客 - CSDN博客...
2019年11月23日然後取出文件數組的第一個文件就是你想要上傳的文件了, 將其賦值到Vue結構裡面, 函數就可以拿來用了。 update:function(){if(!checkEmpty(thi...
CSDN編程社區
前端提交對象給後端:不使用前端技術也可以 - 知乎
2020年12月14日1:前端提交欄位數據(可以是from,也可以是get請求,只要能將欄位數據發送到後端即可)。
知乎
...彩虹下的布迷的博客 - CSDN博客 - 前端上傳圖片到後端vue
2022年6月7日前端傳圖片給後端的方式,是通過bsae64傳輸,然後後端把接收到的轉化為位元組流在把圖片展示出來 後端傳前端直接傳輸了位元組流 Base64是網路上最常...
CSDN編程社區
vue+elementui:前端文件上傳與後端文 - 唐代王維寫代碼...
2022年8月12日vue前端上傳文件給後端的兩種方式 7303閱讀·0評論·0點贊2022年5月27日 使用element-ui中的Upload 上傳向後端傳輸圖片 184閱讀·0評論·0點...
CSDN編程社區
大家還在搜
前端向後端傳輸數據的方法有哪些
java後端怎麼寫介面給前端
web前端開發環境配置
gitee不配置公鑰可以上傳嗎
後端傳遞圖片至前端
vue上傳圖片的代碼
後端怎麼給前端圖片
前後端獲取圖片
【前端上傳文件,後端保存】 - sgmwgntw的博客 - CSDN博客 - 前端...
2022年8月25日一、前端的要求 1.採用post方式提交數據 2.採用multipart格式上傳文件 3.使用input的file控制上傳 例: <inputname="myFile"type="file"/> ...
CSDN編程社區
js前端上傳圖片識一張一張上傳要合成一個整體字元串傳給...
2022年2月10日js前端上傳圖片整合一個字元串拼接傳給後端 上傳了之後是這樣的 原始的: 解決方案: 1、...
博客園
前端將文件/圖片傳給後端 - 灰信網(軟體開發博客聚合)
前端將文件/圖片傳給後端,灰信網,軟體開發博客聚合,程序員專屬的優秀博客文章閱讀平台。
www.freesion.com
【Web前端問題】前端上傳圖片該如何傳數據給後端,如果...
2021年4月30日除了uploadFiles外還要傳遞圖片key等數據給後端,用上述input選擇圖片後,傳遞數據會把圖片路徑還是圖片...
www.h5w3.com
大家還在搜
如何傳圖片給後端
前端傳輸圖片到後端
前端傳文件給後端
圖片前後端怎麼傳輸
Java實現文件上傳
圖片是傳到後端還是前端
前端如何傳圖片給後端
vue3實現圖片上傳
...圖片並上傳,前端一步到位,無需用到後端 - 子慕大詩人...
2015年8月24日本質還是需要先上傳到後台,最後還是後端剪裁,和之前的方式一樣,只是用了canvas而已。 自己實現前端剪裁一步到位: 後來我就想了想canvas能存儲ba...
博客園
前端怎麼傳圖片給後台(java)? - 網路知道
2個回答回答時間：2018年2月23日
最佳回答：你可以現在前台控制台列印一下base64的流，看看是否獲取圖片成功。如果成功再去後台看看獲取的文件信息，haerd中是否有數據。然後就...
『伍』 關於websocket發送圖片
發送圖片有兩種方法：1.json傳送，2.base64傳送
json傳送：
base64傳送
這兩種方法都可以傳送圖片，那麼有什麼區別呢？通俗來說，json是一種比較「敗家」的行為，傳json開銷比較大，因為在嵌入式開發中，如果硬體資源比較有限，那麼就容易出問題，相對比較來說，傳送base64相對比較節約。但是json帶來的開銷也是有好處的，因為它可以傳的東西太多了，比如json的key-value對用來傳數組就很方便，（這個可以去看我的另一篇文章 https://www.jianshu.com/p/772a49948792 ，裡面有json格式傳送數組）。
在嵌入式開發中，json可以使用在雲端到前端中，但是在雲端到邊緣端中還是能省就省，如果有比json更節約資源的方式，那麼還是第二考慮使用json的。
以上是我實際經驗，如果有什麼問題，歡迎聯系我。