Ajax简单前端和后台交互——基于Java SSM框架

男娘i 2022-02-13 04:17 287阅读 0赞

相信很多人都对Ajax有了一定的了解，但是对于怎么实现有一点问题，我写这个也是记录我的一个简单实现。  
**Ajax先说一下运用的地方（一般只要有提交的的地方都可以运用，经过各种判断，动态显示一个界面提示信息）**  
1、登录界面（判断用户和密码）  
2、查询界面  
3、提交界面  
**接下来在简单介绍下Ajax常用的参数，这几个一般是必须含有的**

1.url:  
要求为String类型的参数，（默认为当前页地址）发送请求的地址。  
2.type:  
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。  
3.data:  
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。  
4.dataType:  
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：  
xml：返回XML文档，可用JQuery处理。  
html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。  
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。  
json：返回JSON数据。  
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。  
text：返回纯文本字符串。  
5.success：要求为Function类型的参数，请求成功后调用的回调函数。  
6.error:要求为Function类型的参数，请求失败时被调用的函数。

**我开始展示基于Java SSM框架的Ajax前端后台交互（我以查询为例，比较好写，因为不用进行数据）**  
**1、第一步是为JavaScript前端的jsp做准备，及导入jQuery，这个网上一般都有，我用的是jQuery v2.1.4**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70]**展示一下结构图**  
**2、配置资源路径文件**

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
    	xmlns:context="http://www.springframework.org/schema/context"
    	xmlns:mvc="http://www.springframework.org/schema/mvc"
    	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.0.xsd">
    	
    	<context:component-scan base-package="xingluo" />
    	<context:property-placeholder location="classpath:weixin.properties" />
    	
    	
    	<mvc:annotation-driven />
    	
    	
    	<mvc:resources location="/themes/" mapping="/themes/**"/>
    	<mvc:resources location="/search/" mapping="/search/**"/>
    	<mvc:resources location="/themes/js/" mapping="/theme/js/**"/>
    	
    	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		
    		<property name="prefix" value="/WEB-INF/"></property>
    		
    		<property name="suffix" value=".jsp" />
    	</bean>
    </beans>

**3、第二部应为导入了，开始编写前端jsp**

//这里是自动生成的，网上有
    <%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!doctype html>
    //这里是资源路径，网上有
    <%@page import="org.springframework.http.HttpRequest"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <html>
    	
    	<head>
    		<meta charset="utf-8">
    		<title>管理员登录</title>
    		//导入的jQuery路径
    		<script type="text/javascript" src="/theme/js/jquery.min.js"></script>
    	</head>
    	
    	<body>
    		<div class="login">登 录
    		<div class="login-form">
    			<form action="/AdminLogin" method="post">
    				<input type="text" name="adminname" placeholder="用户名" /><br/>
    				<input type="password" name="password" placeholder="密码" /><br/>
    				<input type="submit" value="登录" /><br/>
    			</form>
    		</div>
    		
    		<div class="user">
    			<button onclick="selectAdmin()">查询</button><br/>
    		</div>
    		</div>
    	</body>
    	
    	<script>
    	//我分开几个函数写主要是好看，但最好写到一起，别人好一起理解
    	    function selectAdmin() {
    	        $.ajax({
    	        	//以POST传参，路径为url，不用date传到后台直接查询全部，返回类型json，我只写了成功，失败自己在加点就可以了
    	            type:"POST",
    	            url:"/selectAdmin",
    	            dataType:"json",
    	            success:function (date) {
    	                //调用参数名，date就为返回的json数据
    	                showResult(date);
    	            }
    	        })
    	    }
    	    function showResult(date) {
    	    	//定义显示数据的位置，根据div的class属性
    	        var target = $(".login .user ");
    	        //使按键消失，只按一次
    	        target.html("");
    	        //继续定义路径
    	        var table = "<table border='1'>"
    	        			+"<tr>"
    	        			+"<th>用户</th>"
    	        			+"<th>密码</th>"
    	        			+"</tr>";
    	        //取出所有匹配的数据，row定义为代表有几条数据
    	        for (var row=0;row<date.length;row++){
    	            table =	table
    	            		+"<tr>"
    	            		+"<td>"+date[row].name+"</td>"
    	            		+"<td>"+date[row].password+"</td>"
    	       				+"</tr>";
            				+"</table>";
    	    	}
    	    	//显示所有读取数据
    	        target.append(table);
    	    }
    	</script>
    </html>

**4、接下来就是后台的Ajax传数据，通过数据库查询**

import java.io.IOException;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import xingluo.navigate.entity.TB_DEST;
    import xingluo.navigate.service.TB_ADMINService;
    import xingluo.navigate.service.UserService;
    
    @Controller
    public class LoginControl {
    	@Autowired
    	TB_ADMINService tbad;
    	
    	@RequestMapping("/admin-login")
    	public String Admin() {
    		return "admin-login"; 
    	}
    	//ResponseBody这个很重要，没有的话，它就不会返回数据流，而是想上面跳转界面
    	@ResponseBody
    	@RequestMapping("/selectAdmin")
    	public List<Map<String, Object>> selectAdmin(){
    		List<Map<String, Object>> list = tbad.getAdminAll();
    		return list;
    	}
    }

**我相信看到这里的人dao层、mapper层、service层、controll层都能够自己编写，使返回数据库的信息是 List<Map<String, Object>>,或Map<String, Object>，或List。显示一下我返回 List<Map<String, Object>>的Mapper.xml**

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE mapper
    PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
    "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="xingluo.navigate.mapper.TB_ADMINMapper">
    
    	<resultMap id = "adminMap" type="TB_ADMIN">
    		
    	    <id property="id" column="id"/>
            <result property="name" column="name"/>
            <result property="password" column="password"/>
        </resultMap>
    	
    	
    	<select id="getAdminAll" resultMap="adminMap">
    		SELECT * FROM tb_admin
    	</select>
    	
    </mapper>

**以下展示结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 2]**想要实现在界面显示一个小窗口那种的，可以自己去了解一下alert（）。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 3]  
**alert()是给用户展示，极大提高用户体验（大部分没有反馈，我都不知道到底执行情况怎么样）**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70]: /images/20220213/514ceddd75f54ee989130f4ed18bc3bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190426201244558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 2]: /images/20220213/4b4ad76295974cf0b1c8bac71257b63c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEwOTAxMg_size_16_color_FFFFFF_t_70 3]: /images/20220213/95ca8f26b1d4485dab9ffc1731d51009.png