ajax和jquery
ajax的定义：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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 src="js/jquery-1.7.2.js"></script>
</head>
<script type="text/javascript">
$(function(){
//按钮单击时执行
$("#testAjax").click(function(){
$.ajax({url:"index.jsp",
success:function(data){
//alert(data);
$("#myDiv").html(data);
}
} );
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX 改变文本</h2></div>
<button id="testAjax" type="button">Ajax改变内容</button>
</body>
</html>
我的那个url地址是另一个jsp页面，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<!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 src="js/jquery-1.7.2.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
<link href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet"/>
</head>
<style>
tr,td{
border:1px solid;
padding:10px;
text-align:center;
}
#firstTable th{
border:1px solid;
width:200px;
}
#firstTable{
position: relative;
}
#tableTwo{
display:none;
position: absolute;
left:500px;
top:100px;
background:white;
}
#div{
background-color:#E8E1CF;
width:100%;
height:100%;
opacity: 0.6;
position: fixed;
display:none;
}
</style>
<%
SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
String date=sdf.format(new Date());
session.setAttribute("date", date);
%>
<body>
<div id="div"></div>
<div>
<h3 style="text-align:center">借书卡管理系统</h3>
<div><a href="#" style="margin-left:600px" id="add">新增借书卡</a>
<a href="#" style="margin-left:50px" id="del">删除借书卡</a>
<a href="#" style="margin-left:50px" id="update">修改借书卡</a>
<input placeholder="请根据姓名或者卡号进行查询" size="30px" name="midSelect"/><button id="midSelect">模糊查询</button></div>
<table id="firstTable"> </table>
</div>
<form action="" method="post" name="addForm">
<table id="tableTwo">
<tr>
<td colspan=2>借书卡信息登记</td>
</tr>
<tr>
<td>姓名:</td>
<td><input name="name"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" checked value="男" name="sex"/>男<input type="radio" value="女" name="sex"/>女</td>
</tr>
<tr>
<td>办卡日期:</td>
<td><input name="date" value="${date }"/>(yyyy-mm-dd)</td>
</tr>
<tr>
<td>押金:</td>
<td><select name="deposit">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
</select>
</td>
</tr>
<tr>
<td colspan=2><input type="button" value="确认" id="confirm"/><input type="hidden" name="hide"/> <input type="button" value="取消" id="cancle"/></td>
</tr>
</table>
</form>
</body>
<script>
function load(param){
var msg="";
$.ajax({
url:"BookCardServlert",
type:"post",
data:param,
dataType:"json",
success:function(data){
msg+="<tr>";
msg+="<th><input type='checkbox'id='all' onchange='selectAll()'/>全选<input type='checkbox' id='opposite' onchange='notSelectAll()'/>反选</th>";
msg+="<th>卡号</th>";
msg+="<th>姓名</th>";
msg+="<th>性别</th>";
msg+="<th>办卡日期</th>";
msg+="<th>押金</th>";
msg+="</tr>";
if(data!=null){
for(var i=0;i<data.length;i++){
msg+="<tr>";
msg+="<td><input type='checkbox' name='id' value='"+data[i].cid+"'</td>";
$.each(data[i],function(name,value){
msg+="<td>"+value+"</td>";
});
msg+="</tr>";
}
}else{
msg+="<tr><td colspan=6><h3>没有你要查询的内容</h3></td></tr>";
}
$("#firstTable").html(msg);
}
});
}
load();
//模糊查询
$("#midSelect").click(function(){
var param=$("input[name='midSelect']").serialize();
alert(param);
load(param);
});
//新增.修改
function add(type){
if($(addForm.name).val()!=""){
if($(addForm.name).val().length<7){
if($(addForm.date).val()!=""){
var text=$("input[name='date']").val();
if(text!=""){
var date=/^\d{4}-((0?[1-9])||1[1,2])-(([1,2]\d)||([0]?[1-9])||(3[0,1]))$/;
if(date.test(text)){
var param=$(addForm).serialize();
//alert(param);
$.ajax({
url:"addBookCard?type="+type,
type:"post",
data:param,
success:function(data){
alert(data);
load();
$("#tableTwo").hide();
$("#div").css("display","none");
$(addForm)[0].reset();
},error:function(data){
alert("加载不到数据");
alert("错误编码："+data.status+",错误信息"+data.statusText);
},
timeout:1000
});
}else{
alert("日期格式错误");
}
}
}else{
alert("日期不能为空");
}
}else{
alert("用户名长度最多为7");
}
}else{
alert("用户名不能为空");
}
}
//修改
$("#update").click(function(){
//将被选中的多选框序列化
var param=$(":checkbox:checked").serialize();
//当参数不为空的时候
if(param!=""){
if($(":checkbox:checked").length>1){
alert("一次只能修改一个");
}
//将提交按钮变成修改
$("#confirm").val("修改");
$("#tableTwo").show();
$("#div").css("display","block");
//获取所有的td
var $td=$(":checkbox:checked").not("#all").not("#opposite").eq(0).parent().siblings();
//alert($td[0].nodeName);
$(addForm.name).val($td.eq(1).text());
$(addForm.sex).val([$td.eq(2).text()]);
$(addForm.date).val($td.eq(3).text());
$(addForm.deposit).val([$td.eq(4).text()]);
$(addForm.hide).val($td.eq(0).text());
}else{
alert("请选择你要选择的数据");
}
});
//看是添加还是删除
$("#confirm").click(function(){
if($("#confirm").val()=="确认"){
add("insert");
$(addForm)[0].reset();
}else if($("#confirm").val()=="修改"){
add("update");
}
});
//删除
$("#del").click(function(){
//获取被选中的个数
var length=$("input[name='id']:checked").size();
if(length<=0){
alert("您还没有勾选数据");
}else{
var check=$("input[name='id']:checked");
var param=check.serialize();
$.ajax({
url:"del",
type:"post",
data:param,
success:function(data){
alert(data);
load();
}
});
}
});
//全选
//var both=false;
function selectAll(){
$("#opposite").prop("checked",false);
var flag=$("#all").prop("checked");
$(":checkbox").not("#opposite").not("#all").prop("checked",flag);
}
//反选
function notSelectAll(){
//获取所有的复选框
$("#all").prop("checked",false);
var $check=$(":checkbox").not("#all").not("#opposite");
//alert($check.prop("checked"));
for(var i=0;i<$check.length;i++){
if($check.eq(i).prop("checked")){
$check.eq(i).prop("checked",false);
}else{
$check.eq(i).prop("checked",true);
}
}
}
$("#add").click(function(){
$("#tableTwo").show();
$("#confirm").val("确认");
$(addForm)[0].reset();
$("#div").css("display","block");
});
$("#cancle").click(function(){
$("#tableTwo").hide();
$("#div").css("display","none");
});
</script>
</html>
通过例子我们可以更好的理解ajax的作用
下面我们来总结下
JQUERY：
$.ajax({
type:'post',//可选get
url:'action.jsp页面',//路径
data:data=param,//获取的参数
dataType:"text",//服务器返回的数据类型，可选XML,Json,script,html,text等
success:function(msg){
//这里是ajax提交成功后，action或jsp返回的数据处理函数。msg是返回的数据，数据类型在dataType参数里定义！
},error:function(){
ajax提交失败的处理函数！
}})
ajax和jquery的更多相关文章
- AJAX和jQuery Ajax总结
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- 第四章 Ajax与jQuery
第四章 Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...
- Ajax 与 jquery
jquery 里面的ajax用法: $.ajax({ 参数设置: 如果返回数据不是json的时候,记得转化为json . var data = json.parse(data); json 可以直接点 ...
- 框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）
一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...
- AJAX，jQuery Ajax和Deferred
AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用,改善用户体验,实现无刷新效果的技术. 使用AJAX的优 ...
- ajax的jquery写法和原生写法
一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指: ...
- Ajax json jquery实现菜单案例
需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...
- JavaScript、Ajax与jQuery的关系 分类： C1_HTML/JS/JQUERY 2014-07-31 10:15 3388人阅读 评论(0) 收藏
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
随机推荐
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- 自动化运维 Expect
Mac 下载:brew install homebrew/dupes/expect expect : -> 自动化脚本工具: 用于处理交互命令; #注意 调用时并不是使用的 /bin/b ...
- Java控制Appium server start/stop
相信很多人都会遇到这种场景,在进行appium自动化的时候用Windows OS,不好实现后台运行,每次启动Appium server: 使用Appium GUI版手动点击 就是在cmd line 启 ...
- Linux下文件的三种时间戳
Linux下文件的三种时间标记 三种时间对应关系表 column column column 访问时间 Access atime 修改时间 Modify mtime 状态改动时间 Change cti ...
- iOS之滑动隐藏导航
滑动隐藏导航狼栏 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ CGFloat offsetY = scrollView.content ...
- 三层架构的OPP实现的演示例子
例子:演示会员添加与删除 说明:因为是简单的例子,我们用在屏幕上打印"添加成功"和"删除成功"这几个字表示会员的添加与删除,仅仅为了演示如何实现三层的分离: 1 ...
- Linux C编程学习6---字符串处理、数据转换
1.字符串 应用程序按其功能可分为数值计算.非数值计算以及输入输出操作等.非数值计算程序占相当大的比例,其核心就是字符串处理1.1.字符测试 1.1.1.测试字符是否为英文字母 int isalpha ...
- ghoest32 不重启电脑手动备份系统为.gho
备份系统我们一般使用DOS之家的ghoest备份工具,但备份必须是重启电脑在DOS命令行下,其实,可以不重启电脑备份系统,也就是手动备份系统.DOS之家用的ghoest本质也是赛门铁克公司出的ghoe ...
- CozyRSS开发记录14-RSS源管理初步完工
CozyRSS开发记录14-RSS源管理初步完工 1.添加源的响应 DialogHost.Show有几个版本的重载,加一个DialogClosingEventHandler参数.我们让添加源对话框的添 ...
- Andriod学习笔记2：“Your content must have a ListView whose id attribute is 'android.R.id.list'”问题的解决办法
问题描述 activity_main.xml代码如下: <?xml version="1.0" encoding="utf-8"?> <Lin ...