您的位置: 首页  >  文章  >  Ajax简单前端和后台交互——基于Java SSM框架

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

分类: 文章 • 2024-03-29 13:06:04

相信很多人都对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
Ajax简单前端和后台交互——基于Java SSM框架展示一下结构图
2、第二部应为导入了，开始编写前端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>

3、接下来就是后台的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元素 ，用于设置主键字段与领域模型属性的映射关系
    		result元素 ，用于设置普通字段与领域模型属性的映射关系
		 -->
	    <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>

以下展示结果
Ajax简单前端和后台交互——基于Java SSM框架Ajax简单前端和后台交互——基于Java SSM框架想要实现在界面显示一个小窗口那种的，可以自己去了解一下alert（）。
Ajax简单前端和后台交互——基于Java SSM框架
alert()是给用户展示，极大提高用户体验（大部分没有反馈，我都不知道到底执行情况怎么样）

相关推荐