js傳各種類型參數(shù)到Controller層的整理方式

更新時間：2023年02月27日 10:17:16 作者：無人與我把酒歡

這篇文章主要介紹了js傳各種類型參數(shù)到Controller層的整理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一 .@RequestBody和@RequestParam區(qū)別

1.@RequestParam

用來處理Content-Type: 為 application/x-www-form-urlencoded編碼的內(nèi)容。（Http協(xié)議中，如果不指定Content-Type，則默認傳遞的參數(shù)就是application/x-www-form-urlencoded類型）

RequestParam可以接受簡單類型的屬性，也可以接受對象類型。

實質(zhì)是將Request.getParameter() 中的Key-Value參數(shù)Map利用Spring的轉(zhuǎn)化機制ConversionService配置，轉(zhuǎn)化成參數(shù)接收對象或字段。

2.@RequestBody

處理HttpEntity傳遞過來的數(shù)據(jù)，一般用來處理非Content-Type: application/x-www-form-urlencoded編碼格式的數(shù)據(jù)。

GET請求中，因為沒有HttpEntity，所以@RequestBody并不適用。
POST請求中，通過HttpEntity傳遞的參數(shù)，必須要在請求頭中聲明數(shù)據(jù)的類型Content-Type，SpringMVC通過使用HandlerAdapter 配置的HttpMessageConverters來解析HttpEntity中的數(shù)據(jù)，然后綁定到相應的bean上。

3.@ModelAttribute

該注解有兩個用法，一個是用于方法上，一個是用于參數(shù)上；

用于方法上時：通常用來在處理@RequestMapping之前，為請求綁定需要從后臺查詢的model；

用于參數(shù)上時：用來通過名稱對應，把相應名稱的值綁定到注解的參數(shù)bean上；要綁定的值來源于：

A） @SessionAttributes 啟用的attribute 對象上；
B） @ModelAttribute 用于方法上時指定的model對象；
C）上述兩種情況都沒有時，new一個需要綁定的bean對象，然后把request中按名稱對應的方式把值綁定到bean中。

二.一些常用的傳參類型

1.字符串類型參數(shù)

/**
 * 傳遞字符串參數(shù)
 */
getStringParam:function(){
   var param={"stringParams":hidden_input_value};
   //var param={};兩種方式都行
   // param.stringParams=hidden_input_value;
   $.ajax({
      url:basePath+"/ParamFormatController/getStringParam.shtml",
      data:param,
      type : 'POST',
      dataType : 'json',
      success:function(data){
         
      },
      
   })
},

Controller層

  /**
     * 接收字符串類型參數(shù)
     * 
     * @param userName
     * @return
     */
    @RequestMapping("/getStringParam")
    @ResponseBody
    public String getStringParam(String userName) {
        String password = userService.getUserpassword(userName);
        return password;
    }

2.對象類型

/**
		 * 傳遞對象參數(shù)
		 */
		setObjectParam:function(){
			var objectParams={};
			objectParams.name="張三";
			objectParams.age="19";
			objectParams.sex="男";
			$.ajax({
				url:basePath+"/ParamFormatController/getObjectParam.shtml",
				data:objectParams,
				type : 'POST',
				dataType : 'json',
				success:function(data){
					
				},
			})
		},

    /**
     * 接收對象參數(shù)
     * 
     * @param
     * @return
     */
    @RequestMapping("/getObjectParam")
    @ResponseBody
    public void getObjectParam(Student objectParams) {
        System.out.println("姓名：" + objectParams.getName());
        System.out.println("性別：" + objectParams.getSex());
        System.out.println("年齡：" + objectParams.getAge());
 
    }

3.復雜對象類型

/**
		 * 傳遞復雜對象參數(shù)（包含id,username,String[],List<Person>）
		 */
		setHardObjectParam:function(){
			
			 var objectParams = {
	                    schoolName:"鵬峰中學",
	                    data:new Date(),
	                    teacherNames:["張老師","李老師","王老師"],
	                    students:[
	                        {name:"小明",sex:"男",age:"19"},
	                        {name:"小紅",sex:"男",age:"19"},
	                    ]
	                };
	                $.ajax({
	                    type: "POST",
	                    url:basePath+"/ParamFormatController/getHardObjectParam.shtml",
	                    data: JSON.stringify(objectParams),//重點
	                    contentType:"application/json"     //指定類型
	                })
		},

School類

public class School {
? ? private String[] teacherNames;
? ? private String schoolName;
? ? private Date data;
? ? private List<Student> students;
?
?
?
? ? public String[] getTeacherNames() {
? ? ? ? return teacherNames;
? ? }
?
? ? public void setTeacherNames(String[] teacherNames) {
? ? ? ? this.teacherNames = teacherNames;
? ? }
?
? ? public String getSchoolName() {
? ? ? ? return schoolName;
? ? }
?
? ? public void setSchoolName(String schoolName) {
? ? ? ? this.schoolName = schoolName;
? ? }
?
? ? public Date getData() {
? ? ? ? return data;
? ? }
?
? ? public void setData(Date data) {
? ? ? ? this.data = data;
? ? }
?
? ? public List<Student> getStudents() {
? ? ? ? return students;
? ? }
?
? ? public void setStudents(List<Student> students) {
? ? ? ? this.students = students;
? ? }
}

Controoler

? /**
? ? ?* 接收復雜對象參數(shù)（包含id,username,String[],List<Person>）
? ? ?*?
? ? ?* @param
? ? ?* @return
? ? ?*/
? ? @RequestMapping("/getHardObjectParam")
? ? @ResponseBody
? ? public void getHardObjectParam(@RequestBody School objectParams) {
? ? ? ? System.out.println("學校名：" + objectParams.getSchoolName());
?
? ? }

4.數(shù)組與字符串

/**
?? ??? ? * 傳遞數(shù)組與字符串
?? ??? ? */
?? ??? ?getArrayAndStringParam:function(){
?? ??? ??? ?var pointCodes= new Array(); //定義一數(shù)組 ?
?? ??? ??? ?pointCodes.push("1");
?? ??? ??? ?pointCodes.push("2");
?? ??? ??? ?pointCodes.push("3");
?? ??? ??? ?pointCodes.push("4");
?? ? ? ? ? ?$.ajax({ ?
?? ? ? ? ? ? ? ?url:basePath+"/ParamFormatController/getArrayAndStringParam.shtml", ?
?? ? ? ? ? ? ? ?type:"POST", ?
?? ? ? ? ? ? ? ?data:{"names":pointCodes,"id":'6'}, ?
?? ? ? ? ? ? ? ?dataType:"json", ?
?? ? ? ? ? ? ? ?success:function(res){ ? ??
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ? ? ?});?
?? ??? ??? ?
?? ??? ?}, ? ? ? ? ? ? ?


? ? /**
? ? ?* 接收數(shù)組與字符串
? ? ?*?
? ? ?* @param
? ? ?* @return
? ? ?*/
? ? @RequestMapping("/getArrayAndStringParam")
? ? @ResponseBody
? ? public void getArrayAndStringParam(@RequestParam(value = "names[]") String[] names, String id) {
? ? ? ? for (int i = 0; i < names.length; i++) {
? ? ? ? ? ? System.out.println(names[i]);
? ? ? ? }
?
? ? }

5.List字符串集合

?? ??? ?/**
?? ??? ? * 傳遞字符串List參數(shù)
?? ??? ? */
?? ??? ?getListByStringParam:function(){
?? ??? ??? ??? ?var orderNosList = new Array();?
?? ??? ??? ??? ?orderNosList.push("List1");
?? ??? ??? ??? ?orderNosList.push("List2");
?? ??? ??? ??? ?orderNosList.push("List3");
?? ??? ??? ??? ?orderNosList.push("List4");
?? ??? ??? ??? ?$.ajax({
?? ??? ??? ??? ??? ?url:basePath+"/ParamFormatController/getListByStringParam.shtml",
?? ??? ??? ??? ??? ?data:{"StringList":orderNosList},
?? ??? ??? ??? ??? ?type : 'POST',
?? ??? ??? ??? ??? ?dataType : 'json',
?? ??? ??? ??? ??? ?success:function(data){
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?})
?? ??? ??? ?
?? ??? ?},

? ? /**
? ? ?* 接收字符串List集合
? ? ?*?
? ? ?* @param
? ? ?* @return
? ? ?*/
? ? @RequestMapping("/getListByStringParam")
? ? @ResponseBody
? ? public void getListByStringParam(@RequestParam("StringList[]") List<String> list) {
? ? ? ? for (int i = 0; i < list.size(); i++) {
? ? ? ? ? ? System.out.println(list.get(i));
? ? ? ? }
?
? ? }

6.List對象集合

? ? /**
? ? ?* 接收對象List集合
? ? ?*?
? ? ?* @param
? ? ?* @return
? ? ?*/
? ? @RequestMapping(value = "/getListByObjectParam")
? ? @ResponseBody
? ? public void getListByObjectParam(@RequestBody List<Student> students) {
? ? ? ? for (int i = 0; i < students.size(); i++) {
? ? ? ? ? ? Student s = students.get(i);
? ? ? ? ? ? System.out.println(s.getName());
? ? ? ? }
?
? ? }

/**
?? ??? ? * 傳遞對象List參數(shù)
?? ??? ? */
?? ??? ?getListByObjectParam:function(){
?? ??? ??? ??? ? var param=[];
?? ??? ??? ??? ? var data1={"name":"張三","age":"21","sex":"2"};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?var data2={"name":"李四","age":"24","sex":"2"};
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?param.push(data1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?param.push(data2);
?? ??? ??? ??? ?$.ajax({
?? ??? ??? ??? ??? ?url:basePath+"/ParamFormatController/getListByObjectParam.shtml",
?? ??? ??? ??? ??? ?data:JSON.stringify(param),
?? ??? ??? ??? ??? ?type : 'POST',
?? ??? ??? ??? ??? ?contentType: "application/json",
?? ??? ??? ??? ??? ?success:function(data){
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?})
?? ??? ??? ?
?? ??? ?},

后續(xù)類型在補充。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Echart中國地圖更換背景圖的方法示例
本文主要介紹了Echart中國地圖更換背景圖的方法示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
js實現(xiàn)的仿Photoshop鼠標滾輪控制輸入框取值(修正兼容Chrome)
一直很想做這個效果，原理是監(jiān)聽鼠標滾輪事件；可將此效果繼續(xù)發(fā)散到其他應用上，如圖片縮放，頁面縮放等。
2010-02-02
基于zepto.js實現(xiàn)手機相冊功能
這篇文章主要為大家詳細介紹了基于zepto.js實現(xiàn)手機相冊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
js獲取單選按鈕的數(shù)據(jù)
js獲取單選按鈕的數(shù)據(jù)...
2006-11-11
Javascript中對象繼承的實現(xiàn)小例
這篇文章主要介紹了Javascript中對象繼承的實現(xiàn),需要的朋友可以參考下
2014-05-05
側(cè)欄跟隨滾動的簡單實現(xiàn)代碼
側(cè)欄里的有些內(nèi)容滾動到頁面頂端以后就固定在那個位置，不再跟隨滾動條而滾動，想必很多站長朋友都想實現(xiàn)這個效果吧，接下來為大家詳細介紹下，感興趣的你可不要錯過了哈
2013-03-03
JavaScript中綁定事件的三種方式及去除綁定
大家都知道要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對應不同的名稱。下面這篇文章給大家詳細介紹了JavaScript中綁定事件的三種方式以及去除綁定的方法，有需要來一起看看吧。
2016-11-11
用js控制電燈開關
這篇文章主要為大家詳細介紹了用js控制電燈開關，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
詳解JavaScript閉包的優(yōu)缺點和作用
閉包是指在 JavaScript 中,內(nèi)部函數(shù)可以訪問其外部函數(shù)作用域中的變量,即使外部函數(shù)已經(jīng)執(zhí)行完畢,這種特性被稱為閉包,本文將給大家介紹一下JavaScript閉包的優(yōu)缺點和作用,需要的朋友可以參考下
2023-09-09
js實現(xiàn)簡單的聯(lián)動菜單效果
這篇文章主要介紹了js實現(xiàn)簡單的聯(lián)動菜單效果,涉及javascript針對頁面元素的遍歷、讀取及設置技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08