JavaWeb開發$.ajax如何向後臺傳輸資料
在Web開發中,前臺和後臺的資料互動是十分頻繁的, 而JQuery對Ajax進行了封裝,使得前臺向後臺傳送資料變得十分簡單。
假如後臺有一個Java類User,來接收並封裝資料
public class User{
private Interger id;
private String name;
private String sex;
}
一、簡單的資料格式
$.ajax傳送資料的幾種形式
//1 直接在url中傳遞
$.ajax({
type: "POST",
url: "/testAjax/addUser?id=1&name=zhangxiaofan&sex=male" ,
success:function(data){
//TODO
}
})
//2 html頁面from表單序列化
var formData = $("#form").serialize();
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: formData,
success:function(data){
//TODO
}
})
//3 拼接data字串
var formData = $("#form").serialize();
$.ajax({
type: "POST" ,
url: "/testAjax/addUser",
data: "id=1&name=zhangxiaofan&sex=male",
success:function(data){
//TODO
}
})
//4 簡單的js物件
var userData = {
id:1,
name:zhangxiaofan,
sex:male
}
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: userData, //或者data:{id:1,name:zhangxiaofan,sex:male}
success:function(data){
//TODO
}
})
針對以上方式,後臺資料的獲取(SpringMvc框架)
@RequestMapping(value = "/testAjax")
public class UserController{
// 1 將User放到引數中,框架進行封裝
@RequestMapping(value = "/addUser")
public String addUser(User user) {
//TODO
}
// 2 自己獲取
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request) {
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex= request.getParameter("sex");
}
}
二、複雜的資料格式
複雜的資料一般採用JSON格式來傳輸,並且Java對JSON格式的資料也都有很好的支援,如JSON-lib的JSONArray和JSONObject、jackson等技術。
注意: 前後臺傳輸的JSON資料一般是JSON物件序列化的字串,而不是直接傳遞JSON物件。
//1 JSON物件
var user = {id:1,name:"zhangxiaofan",sex:"male"};
//2 自己拼接JSON字串
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
//3 JSON.stringify(data) JS方法序列化JSON物件
var userStr = JSON.stringify(user);
//1 將JSON字串作為value值,後臺藉助JSON解析工具
var userStr = '{"id":"1","name":"zhangxiaofan","sex":"male"}';
$.ajax({
type: "POST",
url: "/testAjax/addUser",
data: "user="+userStr ,
success:function(data){
//TODO
}
})
//後臺程式碼
String json = request.getParameter("link");
JSONObject j = JSONObject.fromObject(json);
System.out.println(j.get("linkId"));
//2 結合SpringMvc的@RequestBody,@RequestBody需要把所有請求引數作為json解析,不能包含key=value這樣的寫法在請求url中,可以輕易的將一個物件或者陣列傳到Java端,使用@RequestBody即可繫結到物件或者List/陣列
//(1)物件
var user = {
id:1,
name:"zhangxiaofan",
sex:"male"
}
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8", //需要設定contentType
url: "/testAjax/addUser",
data: JSON.stringify(user) ,
success:function(data){
//TODO
}
})
//後臺
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody User user) {
}
//(2)陣列
var users=[];
var user1={id:1,name:tom,sex:cat};
var user2={id:2,name:tom2,sex:cat};
users.push(user1);
users.push(user2);
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8", //需要設定contentType
url: "/testAjax/addUser",
data: JSON.stringify(users) ,
success:function(data){
//TODO
}
})
//後臺
@RequestMapping(value = "/addUser")
public String addUser(HttpServletRequest request,@RequestBody List<User> user) {
//上面也可以將List<User>改為User[]陣列
}
相關推薦
JavaWeb開發$.ajax如何向後臺傳輸資料
在Web開發中,前臺和後臺的資料互動是十分頻繁的, 而JQuery對Ajax進行了封裝,使得前臺向後臺傳送資料變得十分簡單。 假如後臺有一個Java類User,來接收並封裝資料 public class User{ private Interge
ajax動態接收後臺向後臺傳輸資料以及接收資料
ajax部分,接收後臺傳送的資料,要按照json格式將資料拼接好 unction save(){ var index = $("#index").val(); var id = $("#id").val(); var imgPath=$("#imgPath"
使用AJAX向後臺傳資料,為什麼會進入error?
問題:用ajax向後臺傳值,正常是根據伺服器的響應來決定進入success或者進入error,但是隻要執行ajax,不等後臺響應,直接進入error;然而後臺接受資料正常; 解決方法:(不要對號入座) html: <button type="submit" cla
Modal模態框使用ajax向後臺傳資料和檔案之modal複用
昨天把新增計劃概要寫完了,那麼今天要開始新增計劃了,經理開始催了,好急好急!!! 那麼新增計劃從哪裡開始呢,我們的前段已經編輯好了,像這樣的: OK,重點是天數,我們要先取到天數才行,那麼天數之前已經給出了,在第一頁上,我們直接用Jqu
通過ajax向後臺傳資料 後臺處理完後返回資料給ajax 提示找不到物件
今日坑,今日畢。明天還有新的坑。 問題: 通過ajax向後臺傳資料 後臺處理完後返回資料給ajax提示找不到物件。 大概是這樣的: 頁面: $.ajax({ url : url, data : data, type : "post", dataType : "json",
在Spring Security中使用AJAX向後臺傳送資料
工作中遇到的問題,這裡記錄下,也希望能夠幫助同學們少走彎路 為了快速幫助快速解決問題,我決定首先呈現問題的表現,再進行分析 環境:spring 4.2.3 spring security 4.1.3 表現: 2016-10-26 22:44:02 [http-apr-9
mvc 前臺向後臺傳輸資料
這幾天在學mvc,做個筆記,如有錯誤或者可以改進的地方請指教。VIew中name="course_name" 必填,否則json無法取到控制元件中的值。 <input name="course_name" data-options="prompt:'請輸入課程名稱'"
AJAX向後臺傳遞資料(包括陣列)的方法
我是一個Java Web新手程式設計師,今天來總結一下用AJAX向後臺傳遞資料的寫法,如有問題歡迎指正。首先我們來重申一下在JQuery中封裝的AJAX的寫法(相對於原生js寫法):$.ajax({ type : "post", url : "Student_Ch
jsp用ajax向後臺傳資料的格式
<script type="text/javascript"> $.ajax( { url: "test.action", async:true, cache:false, type:'post' dataType:'text', dat
JSP 頁面用 Ajax 向後臺傳資料中文亂碼
1. Jsp 頁面對變數進行編碼encodeURI(encodeURI(smsContent.value)); 2. 後臺接收解析變數smsContent = URLDecoder.decode(URLDecoder.decode(smsContent, "UTF-8"),"
Django中使用ajax post向後臺傳送資料時403 Forbidden (CSRF token missing or incorrect.):的解決辦法
在Django中使用ajax post向後臺傳送資料時會出現403 Forbidden (CSRF token missing or incorrect.): 的報錯。 第一種解決方法: 先看一下ajax的使用方法: $.ajax({ url: '{% url '
在使用ajax向後臺傳送json資料,存在格式不正確的問題
在一次servlet伺服器的專案中,想在前臺使用json向後臺傳送請求,其中data的格式如下: var requestData = { "services": [{ "lightbulb" : [{"alpha":0}], "operat
使用jquery validate和ajax進行表單驗證並向後臺提交資料
以前我都是在頁面中點選submit按鈕後提交給某個url一個post資料,使用validate後我們就可以使用html頁面和js來非同步的向後臺提交資料,具體程式碼如下 $("#form-product-add").validate({ rules : { tit
使用jq+ajax向後臺提交select input中的資料
1、html程式碼 <span class="request" style="margin: 0px 0px 0px 8px;float: left;font-size: 17px;">
jquery.ajax()向後臺傳遞陣列資料問題,java後臺無法接受
jquery.ajax()向後臺傳遞陣列資料問題,java後臺無法接受
js如何向陣列中新增物件並通過ajax向後臺傳遞list資料
js動態向陣列新增物件,並通過ajax提交List資料到後臺 var data=[{name: '張三',age: 18,id: 1},{name: '李四',age: 22,id: 2}]; var test= []; for (var i = 0; i < data.le
ajax xmlhttprequest使用post傳引數並向後臺獲取資料
ajax xmlhttprequest向後臺傳資料有兩種方式,一種是直接在地址URL後面加入引數,後臺用Request.QueryString來獲取,另外一種是採用POST來傳,send方法傳送引數對,比如send("a=3&b=4"),後臺用Re
Ajax向後臺發送數據
基於 src null ssa charset value test 3.2 form Ajax向後臺發送數據,三種情況: 1:Ajax手動發數據 #GET 發數據<div> <a class="btn" onclick="Ajax
js數組作為參數用ajax向後臺傳參數
log list syn void 循環 var bsp function [] 1 /*前臺往後臺傳參數時,可以這樣寫*/ 2 var chessId = "123"; 3 var i=0; 4 5 var d
ajax向後臺傳遞數組
nbsp clas 傳遞 接收 radi array div 數組接收 pre var ids = new Array(); ids.push(‘1‘); ids.push(‘2‘); $.ajax({ data:{ids:ids}, type:‘post