js傳遞數組類型的數據,並在後端解析

代碼思路:

  1. 將數組類型的數據打包成json數據
  2. 使用JSON.stringfy(json)方法傳遞json數據
  3. 引入相關jar包
  4. 後臺java解析json數據

廢話不多說,直接上代碼:

html代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js傳遞數組類型的數據,並在後端解析</title>
    <script type="text/javascript" src="/demo/lib/jquery-3.4.1.min.js"></script>
</head>
<body>
    <button id="btn">點擊傳遞數組數據到後臺</button>
</body>
</html>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function(){
            var array1 =[1,2,3,4,5,6,7,8,9];
            var array2=["aaa","bbb","ccc","ddd"];
            var str="海關退運洋垃圾大媽向趵突泉吐水鹽源縣3.6級地震廣州地陷3人被困張嘉倪保劍鋒合影浙傳老師美國失聯李陽疑似復婚曲協譴責張雲雷世界艾滋病日倫敦";

            //拼接json
            var jsonData={
                "array1":array1,
                "array2":array2,
                "str":str
            };

            $.ajax({
                url:"/demo/json/receiveJson",
                data:{"jsonData":JSON.stringify(jsonData)},//注意要轉成JSON.stringify
                dataType:"json",
                type:"post",
                success:function () {
                    alert("success");
                },
                error:function () {
                    alert("error");
                }
            });
        });

    });
</script>

 

後臺代碼:

package com.example.demo.controller;

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;
import java.util.Map;

/**
 * @Description TODO
 * @Author wangs
 * @Date 2019/12/217:05
 */

@Controller
@RequestMapping(value = "/json/")
public class JSonController {

    @RequestMapping("toTransJson")
    public String toTransJson(){
        return "web/transJson";
    }

    @RequestMapping("receiveJson")
    public void receiveJson(String jsonData){//參數注意和前端保持一致
        ObjectMapper mapper =new ObjectMapper();
        try {
            Map<String,Object>map =mapper.readValue(jsonData,Map.class);
            List<Integer> array1=(List)map.get("array1");
            List<String> array2=(List)map.get("array2");
            String str =map.get("str").toString();
            System.out.println(array1.toString());
            System.out.println(array2.toString());
            System.out.println(str);
        }catch (Exception e){
            e.printStackTrace();
        }

    }
}

點擊頁面按鈕後,打印輸出的結果:

成功!

注意,在pom.xml文件中引入以下依賴:

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<!--解析json的jar包-->
<dependency>
  <groupId>com.fasterxml.jackson.core</groupId>
  <artifactId>jackson-databind</artifactId>
  <version>2.9.10</version>
</dependency>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章