页面中的删除确认（ajax）、输入框中确认信息是否可用（ajax）的jquery代码
2016-03-03 11:00
531 查看
1.页面中的删除确认（ajax）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(".delete").click(function(){
var lastName=$(this).next(":hidden").val();
var flag=confirm("确定要删除 "+ lastName + "的信息吗？");//confirm的返回值：当点击确定时，返回值为true，当点击取消时，返回值为false
if(flag){
var $tr=$(this).parent().parent();
//使用ajax方式进行删除操作
var url=this.href;
var args={"time":new Date()};
jQuery.ajax({
type:'post',
data:args,
url:url,
success:function(data){ //通过实践发现，若ajax有返回值，那么data就是返回值，若data没有返回值，默认情况下，这个data指的是就是当前这个页面
console.log(data);
if(data=='1'){
alert('delete successfully');
$tr.remove();
}
else{
alert('delete unsuccessfully');
}
}
})
}
return false;
});
})
</script>
</head>
<body>
<h4>Employee List Page</h4>
<s:if test="#request.employee==null || #request.employee.size()==0">
没有员工数据信息
</s:if>
<s:else>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>ID</td>
<td>LastName</td>
<td>Email</td>
<td>Birth</td>
<td>CreateTime</td>
<td>Department</td>
<td>edit</td>
</tr>
<s:iterator value="#request.employee">
<tr>
<td>${id}</td>
<td>${lastName}</td>
<td>${email}</td>
<td>
<s:date name="birth" format="yyyy-mm-dd"/>
</td>
<td><s:date name="createTime" format="yyyy-mm-dd hh:mm:ss"/>
</td>
<td>${department.departmentName}</td>
<td><a href= "emp-delete?id=${id}" class="delete">Delete</a>
<input type="hidden" value="${lastName}">
</td>
</tr>
</s:iterator>
</table>
</s:else>
</body>
</html>
2.输入框中确认信息是否可用（ajax）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(":input[name=employee.lastName]").change(function(){
var val=$(this).val();
val=$.trim(val);
var $this=$(this);
var url="emp-valid";
var args={"lastName":val,"time":new Date()};
if(val !=""){
$this.nextAll("font").remove();
jQuery.ajax({
type:'post',
data:args,
url:url,
success:function(data){
if(data=='1'){
$this.after("<font color='green'>LastName可用！</font>");
}else if(data='0'){
$this.after("<font color='red'>LastName不可用!</font>");
}
else{
alert("服务器异常");
}
}
})
}
})
})
</script>
</head>
<body>
<h4>Add new Employee</h4>
<s:form action="emp-save" method="post">
<s:textfield name="employee.lastName" label="LastName"></s:textfield>
<br>
<s:textfield name="employee.email" label="Email"></s:textfield><br>
<s:textfield name="employee.birth" label="Birth"></s:textfield><br>
<s:select list="#request.department"
listKey="id" listValue="departmentName" name="employee.department.id" label="Department"></s:select><br>
<s:submit> </s:submit>
</s:form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(".delete").click(function(){
var lastName=$(this).next(":hidden").val();
var flag=confirm("确定要删除 "+ lastName + "的信息吗？");//confirm的返回值：当点击确定时，返回值为true，当点击取消时，返回值为false
if(flag){
var $tr=$(this).parent().parent();
//使用ajax方式进行删除操作
var url=this.href;
var args={"time":new Date()};
jQuery.ajax({
type:'post',
data:args,
url:url,
success:function(data){ //通过实践发现，若ajax有返回值，那么data就是返回值，若data没有返回值，默认情况下，这个data指的是就是当前这个页面
console.log(data);
if(data=='1'){
alert('delete successfully');
$tr.remove();
}
else{
alert('delete unsuccessfully');
}
}
})
}
return false;
});
})
</script>
</head>
<body>
<h4>Employee List Page</h4>
<s:if test="#request.employee==null || #request.employee.size()==0">
没有员工数据信息
</s:if>
<s:else>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td>ID</td>
<td>LastName</td>
<td>Email</td>
<td>Birth</td>
<td>CreateTime</td>
<td>Department</td>
<td>edit</td>
</tr>
<s:iterator value="#request.employee">
<tr>
<td>${id}</td>
<td>${lastName}</td>
<td>${email}</td>
<td>
<s:date name="birth" format="yyyy-mm-dd"/>
</td>
<td><s:date name="createTime" format="yyyy-mm-dd hh:mm:ss"/>
</td>
<td>${department.departmentName}</td>
<td><a href= "emp-delete?id=${id}" class="delete">Delete</a>
<input type="hidden" value="${lastName}">
</td>
</tr>
</s:iterator>
</table>
</s:else>
</body>
</html>
2.输入框中确认信息是否可用（ajax）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$(":input[name=employee.lastName]").change(function(){
var val=$(this).val();
val=$.trim(val);
var $this=$(this);
var url="emp-valid";
var args={"lastName":val,"time":new Date()};
if(val !=""){
$this.nextAll("font").remove();
jQuery.ajax({
type:'post',
data:args,
url:url,
success:function(data){
if(data=='1'){
$this.after("<font color='green'>LastName可用！</font>");
}else if(data='0'){
$this.after("<font color='red'>LastName不可用!</font>");
}
else{
alert("服务器异常");
}
}
})
}
})
})
</script>
</head>
<body>
<h4>Add new Employee</h4>
<s:form action="emp-save" method="post">
<s:textfield name="employee.lastName" label="LastName"></s:textfield>
<br>
<s:textfield name="employee.email" label="Email"></s:textfield><br>
<s:textfield name="employee.birth" label="Birth"></s:textfield><br>
<s:select list="#request.department"
listKey="id" listValue="departmentName" name="employee.department.id" label="Department"></s:select><br>
<s:submit> </s:submit>
</s:form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery给div,Span, a ，button, radio 赋值取值
- JQuery eval函数
- jQuery UI resizable bug
- [jQuery] Cannot read property ‘msie’ of undefined错误的解决方法
- jquery validate 详解
- js Regex match, exec, test & jquery plugin, visit the official website!
- 初接触jquery easyui的一点认知
- jquery的$.extend和$.fn.extend作用及区别
- jQuery.extend和jQuery.fn.extend的区别
- 初学关于JQUERY、EasyUI的见解
- JavaScript、jQuery、css3实现瀑布流加载
- 通过js框架jquery判断IE浏览器版本来解决浏览器兼容性问题
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- 初学Jquery easyui后台框架基础所了解的知识和注意要点
- JQuery源码学习笔记（持续更新中）
- 20jquery题
- jQuery面试题答案
- jQuery日历插件datepicker用法详解
- JQuery日期插件datepicker的使用方法
- JQuery里的原型prototype分析