JSTL和Ajax小计
JSTL
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>JSTL标签第一个不用解释，第二个为时间的使用下面用代码块演示,prefix所定义的字母是可以随便改的，但是后面的引用也需要更改比如下面这段代码的<c:forEach
<c:forEach items="${list}" var="admin" varStatus="vs">
<tr>
<td>${vs.count }</td>
<td>${admin.name }</td>
<td>${admin.admin }</td>
<td>${admin.phone}</td>
<td><fmt:formatDate value="${admin.time }"
pattern="yyyy-MM-dd"></fmt:formatDate></td>
<td>
<c:choose>
<c:when test="${admin.role == 5 }">
<a class="summary" onmouseover="showDetail(true,this);"
onmouseout="showDetail(false,this);">超级管理员</a>
<!--浮动的详细信息-->
<div class="detail_info"> 超级管理员</div>
</c:when>
<c:when test="${admin.role== 6 }">
<a class="summary" onmouseover="showDetail(true,this);"
onmouseout="showDetail(false,this);">后台管理员</a>
<!--浮动的详细信息-->
<div class="detail_info"> 后台管理员</div>
</c:when>
<c:when test="${admin.role== 7 }">
<a class="summary" onmouseover="showDetail(true,this);"
onmouseout="showDetail(false,this);">业务管理员</a>
<!--浮动的详细信息-->
<div class="detail_info">业务管理员</div>
</c:when>
<c:when test="${admin.role== 8 }">
<a class="summary" onmouseover="showDetail(true,this);"
onmouseout="showDetail(false,this);">资费管理员</a>
<!--浮动的详细信息-->
<div class="detail_info">资费管理员</div>
</c:when>
</c:choose>
</td>
<td class="td_modi">
<input type="button" value="修改" class="btn_modify"
onclick="location.href='admin_modi.html?id=${admin.id}';" />
<input type="button" value="删除" class="btn_delete"
onclick="location.href='delete.html?id=${admin.id}';"/>
</td>
</tr>
</c:forEach>ajax样例
function searchAccounts(txtObj) {
$.post(
'searchAccounts.html',
{'account':$(".account").val()},
function (data) {
},
'json'
);
}当引用ajax时controller层需要加上注解，演示如下
//利用AJAX进行用户名是否存在的校验
@RequestMapping("/search.html")
@ResponseBody
public String search (@RequestParam("name")String name) {
// 接收前端输入的用户名
User userEntiy = new User();
userEntiy.setName(name);
User userName=userService.search("UsrMapper.search",userEntiy);
if(userName!=null){
return "fail";
}
return null;
}查询账号是否存在的ajax案例和密码两次输入是否一致的校验
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2018/12/5
Time: 18:05
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../css/css.css" rel="stylesheet" type="text/css" />
<link href="../css/common.css" rel="stylesheet" tyle="text/css" />
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="../js/common_js.js" type="text/javascript"></script>
<title>用户注册</title>
<%--<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.3.js"></script>--%>
<script type="text/javascript">
//自动查询账务账号
$(function()
{
$("#name").blur(function()
{
var name = $(this).val();
if(name=="")
{
$("#remind").html("用户名不能为空");
}
else
{
var url="<%=request.getContextPath()%>/tea/search.html"; // 请求的url
$.post(
url,
{'name':name},
function (data)
{
if(data=="fail")
{
$("#remind").html("用户名已存在");
}
else {
$("#remind").html("用户名可用");
}
}
);
}
});
});
//两次密码是否相同的校验
function validate() {
var pwd = $("#pwd").val();
var pwd1 = $("#pwd1").val();
<!-- 对比两次输入的密码 -->
if(pwd == pwd1)
{
$("#tishi").html("两次密码相同");
$("#tishi").css("color","green");
$("#xiugai").removeAttr("disabled");
}
else {
$("#tishi").html("两次密码不相同");
$("#tishi").css("color","red")
$("button").attr("disabled","disabled");
}
}
//邮箱的正则表达验证
function test(mail) {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(mail)) {
$("#email").css("color","green");
$("#email").html("邮箱地址正确");
} else {
$("#email").css("color","red");
$("#email").html("邮箱地址错误请重新输入");
}
}
//注册提交
function submit()
{
$("#form1").submit();
}
</script>
</head>
<body>
<!--顶部样式-->
<div class="common_top">
<div class="Narrow">
<div class=" left logo"><a href="#"><img src="../images/logo.png" /></a></div>
<!--电话图层-->
<div class="phone"><label>全国服务热线：</label><em>400-345-5633</em></div>
</div>
</div>
<!--用户注册样式-->
<div class="registered_style Narrow clearfix">
<div class="left_advertising">
<img src="../images/bg_03.png" />
</div>
<div class="right_register">
<div class="register_Switching" id="register_Switching">
<div class="hd">
<ul><li>快速注册</li><li>普通注册</li></ul>
</div>
<div class="bd">
<ul>
<form id="form1" name="form1" method="post" action="registeredhold.html">
<div class="form clearfix">
<div class="item"><label class="rgister-label">手 机 号：</label><input name="" type="text" class="text" /></div>
<div class="item"><label class="rgister-label" >验 证 码：</label><input name="" type="text" class="text" /><a class="phone_verification">获取验证码</a></div>
<div class="item-ifo">
<input type="checkbox" class="checkbox left" checked="checked" id="readme" onclick="agreeonProtocol();">
<label for="protocol" class="left">我已阅读并同意<a href="#" class="blue" id="protocol">《福际商城用户注册协议》</a></label>
</div>
</div>
<div class="rgister-btn">
<a href="javascript:;" class="btn_rgister">注 册</a>
</div>
<div class="Note"><span class="login_link">已是会员<a href="login.html">请登录</a></span></div>
</form>
</ul>
<ul>
<form id="form1" name="form1" method="post" action="registeredhold.html">
<div class="form clearfix">
<div class="item"><label class="rgister-label">用 户 名：</label><input name="name" id="name" type="text" class="text" /><span id="remind"></span><b>*</b></div>
<div class="item"><label class="rgister-label" >密 码：</label><input name="pwd" id="pwd"type="password" class="text" οnkeyup="validate()"/><b>*</b></div>
<div class="Password_qd"><ul><li class="r">弱</li><li class="z">中</li><li class="q">强</li></ul></div>
<div class="item"><label class="rgister-label " >确认密码：</label><input name="pwd" id="pwd1"type="password" class="text" οnkeyup="validate()" /><span id="tishi"/><b>*</b></div>
<div class="item"><label class="rgister-label" >电子邮箱：</label><input name="" type="text" class="text" onkeyup="test(this.value)"/><span id="email"/><b>*</b></div>
<div class="item "><label class="rgister-label ">验 证 码：</label><input name="" type="text" class="Recommend_text" /></div>
<div class="item-ifo">
<input type="checkbox" class="checkbox left" checked="checked" id="readme" onclick="agreeonProtocol();">
<label for="protocol" class="left">我已阅读并同意<a href="#" class="blue" id="protocol">《福际商城用户注册协议》</a></label>
</div>
</div>
<div class="rgister-btn">
<a href="javascript:;" onclick="submit()" class="btn_rgister">注 册</a>
</div>
<div class="Note"><span class="login_link">已是会员<a href="login.html">请登录</a></span></div>
</form>
</ul>
</div>
</div>
<script>jQuery(".register_Switching").slide({trigger:"click"});</script>
</div>
</div>
<!--底部样式-->
<div class="bottom_footer">
<p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">商家入驻</a> | <a href="#">法律申明</a> | <a href="#">友情链接</a> </p>
</div>
</body>
</html>仍有疑问可以加QQ275375496讨论
扫一扫
916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
