Springmvc 处理ajax请求

最新推荐文章于 2022-09-12 22:32:45 发布

香芋菠萝派

最新推荐文章于 2022-09-12 22:32:45 发布

阅读量254

点赞数

文章标签： ajax javascript java mvc spring

本文链接：https://blog.csdn.net/weixin_73468155/article/details/126641392

版权

目录

一、AJAX概念

二、AJAX简介

1.关于 jQuery 与 AJAX

2.AJAX定义和用法

三、JSON

1.概念

2.ajax - post() 方法并使用 AJAX 请求来获得 JSON 数据

3.使用对象返回，Json自动解析

4. 解决中文乱码原理:

5.集合列表展示

一、AJAX概念

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
简而言之：局部刷新。

二、AJAX简介

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图

1.关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

2.AJAX定义和用法

$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType });

三、JSON

1.概念

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解
JSON 语法是 JavaScript 对象表示法语法的子集。
数据在【名称/值对中；数据由逗号分隔；花括号保存对象；方括号保存数组】

{ "employees": [

{ "firstName":"John" , "lastName":"Doe" },

{ "firstName":"Anna" , "lastName":"Smith" },

{ "firstName":"Peter" , "lastName":"Jones" }

] }

JSON 值可以是：数字（整数或浮点数）；字符串（在双引号中）；逻辑值（true 或 false）；数组（在方括号中）；对象（在花括号中） null

2.ajax - post() 方法并使用 AJAX 请求来获得 JSON 数据

1)创建po包中的User类

/**
 * @author lyt
 * 用户类
 */
public class User {
    private int id;
    private String name;
    private String age;
    private String phone;
toString方法，构造器，setter&getter方法
}

2）AjaxColltroller

    @RequestMapping("/tosendjson.action")
    public String tosendjson(){
        logger.info("控制器跳转至：sendjson");
        return "sendjson";
    }

    /**
     * @param name 不支持中文的名字
     * @return str
     */
    @RequestMapping("/receive.action")
    @ResponseBody
    public String receive(@RequestBody String name){
        logger.info(name);
        String str = "welcome"+name;
        logger.info(str);
        return str;
    }

3)sendjson.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = "http://"+request.getServerName()+":"+request.getLocalPort()+request.getContextPath();
    request.setAttribute("dp",path);
%>
<html>
<head>
    <title>welcome</title>
    <script type="text/javascript" src="${dp}/js/jquery-1.4.4.min.js"></script>
    <script>
        function myfun(){
            var name = $("#name").val();//Jquery获取文本框值·的写法
            //使用Ajax完成参数传递，请求
         $.ajax({
                type:"post",
                url:"receive.action",//请求服务器地址
                data:name,
                contentType:'application/json;charset=utf-8',
                //回调函数
                success: function (data){
                    console.log(data);
                    //将页面中的内容更新
                    $("#h").html(data);

                }
            });
           /* $.post("receive.action",{data:name},function (data){
                $("#h").html(data);
            })*/
        }

    </script>
</head>
<body>

  <input type="text" id="name" placeholder="name">
  <button type="button" onclick="myfun()" >button</button>
<h1 id="h"></h1>
</body>
</html>

第二种ajax 表达

  $.post("receive.action",{data:name},function (data){
                $("#h").html(data);
            })

3.使用对象返回，Json自动解析

需要jackson-all-1.8.10.jar包，否则无法解析该类对象

1)AjaxColltroller

该方法的参数上必须加入注解“@RequestBody”

 @RequestMapping("/tosendjson2.action")
    public String tosendjson2(){
        logger.info("跳转到页面 sendjson2");
        return "sendjson2";
    }

    @RequestMapping("/receive2.action")
    @ResponseBody
    public String recevie2(@RequestBody User user){
        logger.info(user);
        String str = "welcome"+user.getName();
        return str;
    }

2)sendjson2.jsp

注意： @RequestBody接收的是一个Json对象的字符串，而不是一个Json对象用 JSON.stringify(data)的方式就能将对象变成字符串

<html>
<head>
    <title>Title</title>

    <script type="text/javascript" src="${dp}/js/jquery-1.4.4.min.js"></script>
    <script>
        var user={
            name:"lili",
            age:18,
            phone:123456789
        }
        function sendjson(){
            console.log(user);
            var str = JSON.stringify(user);
            console.log(str);
            $.ajax({
                type:"post",
                url:"receive2.action",
                data:str,
                contentType:'application/json;charset=utf-8',
                success: function (data) {
                    console.log(data);
                    //将页面中的内容更新
                    $("#h").html(data);
                }
            });
        }
    </script>
</head>
<body>
<pre>
    var user={
            name:lili,
            age:18,
            phone:123456789
        }
</pre>
${dp}
<p>sendjson2</p>
<input>
<button onclick="sendjson()">确定</button>
<h2 id="h"></h2>
</body>
</html>

4. 解决中文乱码原理:

原理: 
手动给对应的Accept返回制定格式编码数据。
发现produces设置多个Accept只有第一个的charset是有用的,

    @RequestMapping("/tosendjson3.action")
    public String tosendjson3(){
        logger.info("跳转到页面sendjson3");
        return "sendjson3";
    }
    
    /**
     * 中文乱码得到解决
     * 原理: 手动给对应的Accept返回制定格式编码数据。
     * 发现produces设置多个Accept只有第一个的charset是有用的,
     * @param name 中文名字
     * @return str
     */
    @RequestMapping(value ="receive3.action",produces = {"text/html;charset=UTF-8;","application/json;"})
    @ResponseBody
    public String receive3(@RequestBody String name){
        logger.info(name);
        String str = "欢迎"+name;
        logger.info(str);
        return str;
    }

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${dp}/js/jquery-1.4.4.min.js"></script>
    <script>
        function myfun1(){
            var name = $("#name").val();//Jquery获取文本框值·的写法
        /* alert(name);*/
        //使用Ajax完成参数传递，请求
        $.ajax({
               type:"post",
               url:"receive3.action",
               data:name,
               contentType:'application/json;charset=utf-8',
               success: function (data){
                   console.log(data);
                   //将页面中的内容更新
                   $("#h").html(data);

               }
           });
       }
</script>
</head>
<body>
<p>sendjson3</p>
<input type="text" id="name" placeholder="name">
<button onclick="myfun1()">确定</button>
<h2 id="h"></h2>
</body>
</html>

5.集合列表展示

    @RequestMapping(value = "/tosendjson4.action")
    public String tosendjson4(){
        logger.info("跳转到页面sendjson4");
        return "sendjson4";
    }
    @RequestMapping(value ="receive4.action")
    @ResponseBody
    public List<User> receive4(){
     List<User> list = new ArrayList<>();
     list.add(new User("张三","10","123"));
     list.add(new User("李四","20","123"));
     list.add(new User("王五","10","123"));
     list.add(new User("赵六","10","123"));
     list.add(new User("周7","10","123"));
     return list;
    }

用table进行遍历

    <script>
        function myfun1(){
            var name = $("#name").val();//Jquery获取文本框值·的写法
        /* alert(name);*/
        //使用Ajax完成参数传递，请求
        $.ajax({
               type:"post",
               url:"receive4.action",
               data:name,
               contentType:'application/json;charset=utf-8',
               success: function (data){
                   console.log(data);
                  var html = " <tr><th>编号</th><th>姓名</th><th>年龄</th><th>电话</th></tr>";
                  $.each(data,function (i,item){
                      html += " <tr><td>"+i+"</td><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.phone+"</td></tr>";
                   });
                  console.log(html);
                  //将HTML中的table填充
                   $("#t1").html(html);
               }
           });
       }
</script>
</head>
<body>
<p>sendjson3</p>
<input type="text" id="name" placeholder="name">
<button onclick="myfun1()">确定</button>
<h2 id="h">展示用户集合列表</h2>
<div id="d1">
    <table id="t1" border="1" width="500px"></table>
</div>
</body>

用ul进行遍历

<head>
    <title>Title</title>
    <script type="text/javascript" src="${dp}/js/jquery-1.4.4.min.js"></script>
    <script>
        function myfun1(){
            var name = $("#name").val();//Jquery获取文本框值·的写法
        /* alert(name);*/
        //使用Ajax完成参数传递，请求
        $.ajax({
               type:"post",
               url:"receive5.action",
               data:name,
               contentType:'application/json;charset=utf-8',
               success: function (data){
                   console.log(data);
                  var html = " ";
                  $.each(data,function (i,item){
                      html += " <li>"+i+"姓名:"+item.name+"年龄:"+item.age+"电话:"+item.phone+"</li>";
                   });
                  console.log(html);
                  //将HTML中的table填充
                   $("#u").html(html);
               }
           });
       }
</script>
</head>
<body>
<p>sendjson3</p>
<input type="text" id="name" placeholder="name">
<button onclick="myfun1()">确定</button>
<h2 id="h">展示用户集合列表</h2>
<div id="d1">
   <ul id="u"></ul>
</div>
</body>

香芋菠萝派

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Springmvc 处理ajax请求

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图。
复制链接

扫一扫