相信很多人都对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
展示一下结构图
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">
<!-- 配置Controller扫描 -->
<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元素 ，用于设置主键字段与领域模型属性的映射关系
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>
以下展示结果
想要实现在界面显示一个小窗口那种的，可以自己去了解一下alert（）。
alert()是给用户展示，极大提高用户体验（大部分没有反馈，我都不知道到底执行情况怎么样）
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
