Ajax发送复杂对象

最新推荐文章于 2022-07-25 10:49:55 发布

TxbLcy

最新推荐文章于 2022-07-25 10:49:55 发布

阅读量413

点赞数 1

分类专栏：框架文章标签： java ajax json

本文链接：https://blog.csdn.net/TxbLcy/article/details/106752630

版权

框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jsp文件中

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/6/14 0014
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <!-- http://localhost:8080/admin_webui_war/test/ssm.html -->
    <!--
          端口号前面的冒号不能省略
          contextPath 前面不能写 /
          contextPath后面必须写  /
          页面所有参照base标签的必须放在base标签后面，且标签路径不能以/开头
    -->
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/"/>
    <!-- 引入jquey-->
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>

    <script type="text/javascript">
      $(function () {
          $("#btn1").click(function () {
          //$.post();  $.get() 必须是服务器端成功处理了请求之后，才能调回调函数。响应状态码200
          $.ajax({   //可以在服务器端处理失败之后
            "url": "send/array/one.html",   //请求目标资源的地址
            "type": "post",             //请求方式
            "data": {                   //发送的请求参数
              "array": [5,8,12]
            },
            "dataType": "text",         //服务器端返回的数据解析格式
            "success": function (response) {
              alert(response)
            },
            "error":function (response) {
              alert(response)
            }
          });
        })

        $("#btn2").click(function () {
          $.ajax({   //可以在服务器端处理失败之后
            "url": "send/array/two.html",   //请求目标资源的地址
            "type": "post",             //请求方式
            "data": {                   //发送的请求参数  这种方法发过去必须使用一个实体类接收
              "array[0]": 5,
              "array[1]": 12,
              "array[2]": 8
            },
            "dataType": "text",         //服务器端返回的数据解析格式
            "success": function (response) {
              alert(response)
            },
            "error":function (response) {
              alert(response)
            }
          });
        })

        $("#btn3").click(function () {
          //准备好发送到服务器端的数组
          var array = [5,6,7];
          //将JSON数组转换为JSON字符串    "['5','6','7']"
          var requestBody = JSON.stringify(array);

          $.ajax({   //可以在服务器端处理失败之后
            "url": "send/array/three.html",   //请求目标资源的地址
            "type": "post",             //请求方式
            "data": requestBody,        //请求体
            "contentType": "application/json;charset=UTF-8",  //告诉服务器端本次请求体是JSON数据（必须）
            "dataType": "text",         //服务器端返回的数据解析格式
            "success": function (response) {
              alert(response)
            },
            "error":function (response) {
              alert(response)
            }
          });
        })

        $("#btn4").click(function () {    //Ajax传复杂对象
            //1.准备要发送的数据
            var student={
              "id":5,
              "name":'txb',
              "address":{
                "province":"湖南",
                "city":"娄底",
                "street":"涟源"
              },
              "subList":[    //[]里面是数组 {}里面是对象
                {
                  "subName":"JAVA",
                  "subScore":100
                },{
                  "subName":"ssm",
                  "subScore":1000
                }
              ],
              "map":{
                "k1":"v1",
                "k2":"v2"
              }
            };

            //2.将JSON对象转换为JSON字符串
            var requestBody=JSON.stringify(student);

            //3.发送Ajax请求
            $.ajax({
              "url":"send/compose/object.html",
              "type":"post",
              "data":requestBody,
              "contentType": "application/json;charset=UTF-8",
              "dataType":"text",
              "success":function (response) {
                alert(response);
              },
              "error":function (response) {
                alert(response);
              }
            })

        })

      })
    </script>

  </head>
  <body>

  <a href="test/ssm.html"><h1>hello</h1></a>

  <br/>

  <button id="btn1">One</button>

  <br/>

  <button id="btn2">Two</button>

  <br/>

  <button id="btn3">There</button>

  <br/>

  <button id="btn4">Four</button>

  </body>
</html>

复杂对象的三个实体类 get set toString 构造方法省略了。


public class Student {
    private Integer id;
    private String name;
    private Address address;
    private List<Subject> subList;
    private Map<String,String>map;
}

package com.lcy.crowd.entity;

public class Address {
    private String province;
    private String city;
    private String street;

package com.lcy.crowd.entity;

public class Subject {

    private String subName;
    private Integer subScore;
}

控制层

@Controller
public class TestHandler {

    @Autowired
    private AdminService adminService;

    //日志系统
    private Logger logger = LoggerFactory.getLogger(TestHandler.class);

    @ResponseBody
    @RequestMapping("send/compose/object.html")   //Ajax传递复杂对象
    public String testReceiveComposeObject(@RequestBody Student student) {
        System.out.println(student.toString());
        logger.info(student.toString());
        return "success";
    }

    @ResponseBody
    @RequestMapping("send/array/one.html")  //不太好用，在发送请求的时候，变量名会发送变化。
    public String testReceiveArrayOne(@RequestParam("array[]") List<Integer> array) {  //踩坑是array[] 要加[]
        for (Integer number :array) {
            System.out.println("number1"+number);
        }
        return "success";
    }

    @ResponseBody
    @RequestMapping("send/array/three.html")   //这个还可以
    public String testReceiveArrayThree(@RequestBody List<Integer> array) {

        for (Integer number :array) {
            logger.info("number3"+number);
        }
        return "success";
    }

    @RequestMapping("/test/ssm.html")  
    public String testSsm(ModelMap  modelMap) {
        List<Admin> all = adminService.getAll();
        modelMap.addAttribute("all",all);
        return "test";
    }

}

web.xml要配置DispatcherServlet注意的地方

    <!-- 配置核心分发器DispatcherServlet -->
    <servlet>
        <servlet-name>springDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:spring-web-mvc.xml</param-value>
        </init-param>
        <!-- Servlet默认生命周期中，创建对象是在第一次接收到请求时 -->
        <!-- DispatcherServlet创建对象后有大量的框架初始化工作，不适合第一次请求时来做 -->
        <!-- 将load-on-startup设置为1，为了让Web应用启动时跟着一起启动，创建对象，初始化 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springDispatcherServlet</servlet-name>
        <!-- url-pattern配置方式一：/表示拦截所有请求 只要是web应用的请求 -->
<!--        <url-pattern>/</url-pattern>-->

        <!-- url-pattern配置方式二: 配置请求扩展名 只要你的扩展名是不是html就不归springmvc管
                优点：静态资源不需要经过SpringMVC XXX.css XXX.js XXX.png等等
                     可以实现伪静态效果（表面上是一个访问Html文件的静态资源，实际上是经过Java代码运算）
                        作用：给黑客入侵增加难度
                              有利于SEO优化（让搜索引擎更容易找到我们的项目）
                 缺点：不符合RESTFUL风格
         -->
        <url-pattern>*.html</url-pattern>

        <!-- 如果一个Ajax请求扩展名是html,但是实际服务器给浏览器返回的是JSON数据,二者不匹配，就会出现406 -->
        <url-pattern>*.json</url-pattern>
    </servlet-mapping>

TxbLcy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax发送复杂对象

jsp文件中<%-- Created by IntelliJ IDEA. User: Administrator Date: 2020/6/14 0014 Time: 9:45 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html&.
复制链接

扫一扫