java 后端如何接受对象数组 java后端如何接收ajax

转载

mob6454cc69d373 2023-08-22 11:24:56

文章标签 java 后端如何接受对象数组 ajax javaweb ssm html 文章分类 Java 后端开发

jQuery与Ajax技术

1、先谈谈Ajax有什么用。

ajax 可以在网页交互时异步通信。

就是能在不重新加载网页的情况下，去和后台进行数据交互。

如：

注册账号时，在不提交的情形下，可以先行判断要注册的账号是否已经存在
更改密码时先行判断原密码是否正确。

上面两种情况可以增加用户体验，所以这也是Ajax能备受青睐的原因。

2、再谈谈后端人员怎么用。

因为Ajax的内容作为后端人员不需要全部掌握，只需要掌握其中一部分就能够满足日常开发

这里就不讲原生js实现Ajax的用法，直接使用 js 中的 jQuery来操作Ajax。

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

当然了，上面一大堆参数，大部分是不需要我们使用的，日常使用其中几个就行

url：请求地址
data：要发送的数据
success：成功之后执行的回调函数(全局)
error：失败之后执行的回调函数(全局)

3、讲一下如何去写一个ajax函数！

3.1、那就必须要先讲讲 jQuery

使用前要先下载相关的 js 包，推荐下载而不是引入，不推荐官网下载，会打不开！

地址：https://www.jq22.com/jquery-info122

java 后端如何接受对象数组 java后端如何接收ajax_html

作为简化 js 语言的一种方式，他有其独特的使用方法。

公式：$(‘selector’).action()

看着很蒙对吧，没关系慢慢解释。

首先：

$ 与 jQuery 等价，即 jQuery(‘selector’).action()

其次：

selector代表的是选择器（id选择器，类选择器等等），如：

我有一个标签：它的id为 b 
<a id="b"></a>
那么通常我们给这个a标签去加一些css样式时，是可以使用id选择器的方式去定位到目标标签a,即：#b{}

那么我们的jQuery为了锁定要作用的标签，也是采用这种方式，即

$('#b').action()

就代表接下来的操作与id为b的标签有关，同样的还有其他选择器也可以定位：

$('p').clickk();//标签选择器
$('#id1').clickk();//id选择器
$('.class1').clickk();//class选择器

action:代表的是要调用的方法

因为jQuery是js的库，那么作为一个库肯定有许多函数可以调用，如：
$("#button").click();
就是点击id为#button后要响应的事件，click()的括号中写响应的事件函数。

具体的其他方法百度去！

好讲完jQuery的使用方式后，就要开始写一个ajax函数

3.2、如何通过jQuery写ajax函数

公式：固定写法，变的是ajax括号中大括号里面的东西。

$("#button").click(function(){$.ajax({...})})

例：

$("#button").click(function(){$.ajax({
    url: "${pageContext.request.contextPath}/a1",
    data:{'K':V},
    success:function (data) {}
})})

作用，点击按钮后会执行ajax中的方法，

url：

ajax会通过url去后端寻找相应的路径的方法，

data：

如果想从前端传递数据到后端，就用到了data它是以键值对传值，K的名字要与后端参数的其中一个相同才能接收到。V值可以通过 $("#txtName").val() 去获取对应标签的value值，如文本输入框。

success：

如果后端接收成功并返回了数据就会执行 success 后面的函数，这个函数可以直接在success后面写，或者写函数名字。这里的成功是指，200 ，而不是：404,500等等，相应的 error 就是失败时执行的函数

一般情况下，前后端都是数据的交互，所以怎么将数据前后端传输就至关重要，上面已经讲了，如何从前端传给后，那么下面讲如何从后端传值给前端！

4、如何将后端的值传递给前端

例：

前端：

$("#btn").click(function () {
              $.ajax({
                url: "${pageContext.request.contextPath}/a1",
                success:function (data) {},
                error:function (data){}
              })
            })

后端：

@RestController 
public class AjaxController {
    @Autowired // 它可以对类成员变量、方法及构造函数进行标注，完成自动装配的工作。
    @Qualifier("BookServiceImpl") // 用来指明是使用BookService接口的哪个实现类！
    private BookService bookService;
    
    @RequestMapping("/a1")
    public List<Books> ajax1(HttpServletResponse response) throws IOException {
        List<Books> books1 = bookService.queryAllBook();
        System.out.println(JSON.toJSONString(books1));
        
        return books1;
    }
}

后端传值的方式：

一般情况下，我们会使用JSON格式来作为前后端数据传输标准！

那么，这里就涉及到了java的数据如何转换成json格式。

很简单：在后端的类上将@Controller 换成 @RestController 。

代表，将类下每个方法的返回值不经过springmvc而是直接将返回值转换成 json格式，

注：返回值为字符串的不会转换为json，但是依然能过去。

返回值为集合List，Map集合的都能转换为 json 只是取值方式不同。

前端获取值的方式：

在Ajax的success : function(data) { }方法中，data就是就是从后端返回的数据。

Map：是以K来取值，在前端，如：data[K]
List：利用for循环来遍历取值。

5、完整的例子

后端：将数据库中查询到的数据以对象形式存储进List集合中，并返回

注：

依赖要导入，否则不能自动转换为json格式：

<dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-databind</artifactId>
     <version>2.9.8</version>
</dependency>

@RestController :相当于@Controller+@ResponseBody

@RestController 
public class AjaxController {
    @Autowired // 它可以对类成员变量、方法及构造函数进行标注，完成自动装配的工作。
    @Qualifier("BookServiceImpl") // 用来指明是使用BookService接口的哪个实现类！
    private BookService bookService;
    
    @RequestMapping("/a1")
    public List<Books> ajax1(HttpServletResponse response) throws IOException {
        List<Books> books1 = bookService.queryAllBook();
        System.out.println(JSON.toJSONString(books1));
        
        return books1;
    }
}

要先导入下载好的js包jQuery！

前端：以for遍历方式取出List集合中的值，因为集合中存储的是对象，所以可以取对象中对应的属性值。

=========================== 要先导入下载好的js包jQuery ===========================
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
==============================================================================
<input type="button" id="btn" value="获取数据"/>
<script type="text/javascript">
            $("#btn").click(function () {
              $.ajax({
                url: "${pageContext.request.contextPath}/a2",
                success:function (data) {
                  var html="";
                  for (let i=0;i<data.length;i++){
                    html += "<tr>" +
                            "<td>" + data[i].bookName + "</td>" +
                            "<td>" + data[i].bookCounts + "</td>" +
                            "<td>" + data[i].detail + "</td>" +
                            "</tr>"
                  }
                  $("#content").html(html);
                },
                error:function (data){
                  alert(data);
                }
              })
            })
        </script>

6、利用Ajax完成注册提示的效果

直接写代码：

后端：

@RequestMapping("/a3")
public String ajax3(String name,String pwd){
   String msg = "";
   //模拟数据库中存在数据
   if (name!=null){
       if ("admin".equals(name)){
           msg = "OK";
      }else {
           msg = "用户名输入错误";
      }
  }
   if (pwd!=null){
       if ("123456".equals(pwd)){
           msg = "OK";
      }else {
           msg = "密码输入有误";
      }
  }
   return msg; //由于@RestController注解，将msg转成json格式返回
}

前端：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>ajax</title>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
   <script>

       function a1(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'name':$("#name").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#userInfo").css("color","green");
                  }else {
                       $("#userInfo").css("color","red");
                  }
                   $("#userInfo").html(data);
              }
          });
      }
       function a2(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'pwd':$("#pwd").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#pwdInfo").css("color","green");
                  }else {
                       $("#pwdInfo").css("color","red");
                  }
                   $("#pwdInfo").html(data);
              }
          });
      }

   </script>
</head>
<body>
<p>
  用户名:<input type="text" id="name" onblur="a1()"/>
   <span id="userInfo"></span>
</p>
<p>
  密码:<input type="text" id="pwd" onblur="a2()"/>
   <span id="pwdInfo"></span>
</p>
</body>
</html>

7、如果不幸传到前端的数据乱码了

springmvc-servlet.xml添加：

注意：添加进的配置文件中不能有<mvc:annotation-driven/>否则会不生效！如果有，要用下面的代替它！

<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true" >
            <bean class="org.springframework.http.converter.StringHttpMessageConverter" >
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" >
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean" >
                        <property name= "failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

8、获取baidu接口Demo

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>JSONP百度搜索</title>
   <style>
       #q{
           width: 500px;
           height: 30px;
           border:1px solid #ddd;
           line-height: 30px;
           display: block;
           margin: 0 auto;
           padding: 0 10px;
           font-size: 14px;
      }
       #ul{
           width: 520px;
           list-style: none;
           margin: 0 auto;
           padding: 0;
           border:1px solid #ddd;
           margin-top: -1px;
           display: none;
      }
       #ul li{
           line-height: 30px;
           padding: 0 10px;
      }
       #ul li:hover{
           background-color: #f60;
           color: #fff;
      }
   </style>
   <script>

       // 2.步骤二
       // 定义demo函数 (分析接口、数据)
       function demo(data){
           var Ul = document.getElementById('ul');
           var html = '';
           // 如果搜索数据存在 把内容添加进去
           if (data.s.length) {
               // 隐藏掉的ul显示出来
               Ul.style.display = 'block';
               // 搜索到的数据循环追加到li里
               for(var i = 0;i<data.s.length;i++){
                   html += '<li>'+data.s[i]+'</li>';
              }
               // 循环的li写入ul
               Ul.innerHTML = html;
          }
      }

       // 1.步骤一
       window.onload = function(){
           // 获取输入框和ul
           var Q = document.getElementById('q');
           var Ul = document.getElementById('ul');

           // 事件鼠标抬起时候
           Q.onkeyup = function(){
               // 如果输入框不等于空
               if (this.value != '') {
                   // ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
                   // 创建标签
                   var script = document.createElement('script');
                   //给定要跨域的地址 赋值给src
                   //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
                   script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
                   // 将组合好的带src的script标签追加到body里
                   document.body.appendChild(script);
              }
          }
      }
   </script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul">

</ul>
</body>
</html>

最后致谢：狂神说java。

学习并借鉴他的文章。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：python 背包问题贪心背包问题python语言

下一篇：java 千万级用户消息已读未读 java处理千万级别数据

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯