ajax

于 2021-04-24 22:46:11 发布
阅读量79 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47106572/article/details/116109322
版权

1

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'add.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
  <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript">
  		$(function(){
  			$("#myfrom").submit(function(){
  				var bookName=$("input[name='bookName']").val();
  				var author=$("input[name='author']").val();
  				var bookTime=$("input[name='bookTime']").val();
  				var type=$("select[name='type']").val();
  				var reg=/^\d{4}-\d{2}-\d{2}$/;
  				if(bookName==""){
  					alert("图书名字不能为空！");
  					return false;
  				}else if(author==""){
  					alert("图书作者不能为空！");
  					return false;
  				}else if(bookTime==""){
  					alert("购买日期不能为空！");
  					return false;
  				}else if(type=="0"){
  					alert("请选择图书类别！");
  					return false;
  				}else if(!reg.test(bookTime)){
  					alert("购买日期格式不正确！");
  					return false;
  				}
  				return true;
  			});
  			
  		});
  
  </script>
  </head>
  
  <body>
  		<form action="BookServlet" method="post" id="myfrom">
    	<table width="500" cellspacing="0" cellpadding="0" align="center" border="0">
    		<tr>
    			<td></td>
    			<td><h3>新增图书信息</h3></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>图书名称:</td>
    			<td><input type="text" name="bookName"/></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>图书作者:</td>
    			<td><input type="text" name="author"/></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>购买日期:</td>
    			<td><input type="text" name="bookTime"/></td>
    			<td>yyyy-MM-dd格式</td>
    		</tr>
    		<tr>
    			<td>图书类别:</td>
    			<td>
    				<select name="type">
    					<option value="0">选择所属分类</option>
    					<option value="1">计算机/软件</option>
    					<option value="2">小说/文摘</option>
    					<option value="3">杂项</option>
    				</select>
    			</td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td><input type="submit" value="增加图书"/></td>
    			<td></td>
    		</tr>
    	</table>
    	</form>
  </body>
</html>

2

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
 	<style type="text/css"></style>
  <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript">
  		$(function(){
  			
  			$("tr:first").css("background-color","pink");
  			$("tr:not(tr:first):odd").css("background-color","gray");
  			
  			
  			$("#myfrom").submit(function(){
  				/* var bookName=$("input[name='bookName']").val();
  				var author=$("input[name='author']").val();
  				var bookTime=$("input[name='bookTime']").val();
  				var type=$("select[name='type']").val();
  				$.post("BookServlet?opr=add",{bookName:bookName,author:author,bookTime:bookTime,type:type},function(){},"JSON"); */
  				//var paramsArray= $(this).serializeArray();
  				//alert(paramsArray);
  				//var params= $.param(paramsArray);
  				//alert(params);
  				//如果使用ajax的方式做表单提交数据(查询，新增，修改) 基于form表单获取数据
  				var params=$(this).serialize();
  				$.post("BookServlet?opr=add",params,function(data){
  					alert("data==>"+data);
  					if(data!=null){
  						alert("新增成功！");
  						//新建一行数据，添加到表格中
  						var newTr= $("<tr><td>"+data.bookName+"</td><td>"+data.author+"</td><td>"+data.bookTime+"</td><td>"+data.type+"</td><td><a href='javascript:void(0);' οnclick='del(this,"+data.bookId+")'>删除</a></td></tr>");
  						$("#table").append(newTr);
  						$("tr").css("background-color","white");
  						$("tr:first").css("background-color","pink");
  						$("tr:not(tr:first):odd").css("background-color","gray");
  					}else{
  						alert("新增失败！");
  					}
  				},"JSON"); 
  			
  			});
  			
  		});
  		
  		function del(obj,id){
  		
  			if(confirm("确定删除么?")){
  				$.post("BookServlet?opr=del",{bookId:id},function(data){
  					if(data==true){
  						alert("删除成功！");
  						$(obj).parent().parent().remove();
  						$("tr").css("background-color","white");
  						$("tr:first").css("background-color","pink");
  						$("tr:not(tr:first):odd").css("background-color","gray");
  					}else{
  						alert("删除失败！");
  					} 
  				},"JSON");
  			}
  		}
  
  </script>
  </head>
  
  <body>
    	<table id="table" width="700" cellspacing="0" cellpadding="0" align="center" border="1">
    		<caption>
    			<h1>图书信息</h1>
    		</caption>
    		<tr>
    			<th>图书名称</th>
    			<th>图书作者</th>
    			<th>购买时间</th>
    			<th>图书分类</th>
    			<th>操作</th>
    		</tr>
    		<c:forEach items="${list }" var="li">
    			<tr>
    				<td>${li.bookName }</td>
    				<td>${li.author }</td>
    				<td>${li.bookTime }</td>
    				<td>${li.type }</td>
    				<td>
    					<a href="javascript:void(0);" onclick="del(this,${li.bookId})">删除</a>
    				</td>
    			</tr>
    		</c:forEach>
    		
    	</table>
    	
    	<form action="javascript:void(0);" method="post" id="myfrom">
    	<table width="500" cellspacing="0" cellpadding="0" align="center" border="0">
    		<tr>
    			<td></td>
    			<td><h3>新增图书信息</h3></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>图书名称:</td>
    			<td><input type="text" name="bookName"/></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>图书作者:</td>
    			<td><input type="text" name="author"/></td>
    			<td></td>
    		</tr>
    		<tr>
    			<td>购买日期:</td>
    			<td><input type="text" name="bookTime"/></td>
    			<td>yyyy-MM-dd格式</td>
    		</tr>
    		<tr>
    			<td>图书类别:</td>
    			<td>
    				<select name="type">
    					<option value="0">选择所属分类</option>
    					<option value="1">计算机/软件</option>
    					<option value="2">小说/文摘</option>
    					<option value="3">杂项</option>
    				</select>
    			</td>
    			<td></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td><input type="submit" value="增加图书"/></td>
    			<td></td>
    		</tr>
    	</table>
    	</form>
    	
    	
  </body>
</html>

3

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	
	
  <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript">
  		$(function(){
  			/* $.post("TopicServlet",null,function(data){
  				//alert(data);
  				var str="";
  				$(data).each(function(){
  					str+="<li>&#160;&#160;&#160;&#160; "+this.tname+" &#160;&#160;&#160;&#160; <a href='topic_modify.jsp?tid="+this.tid+"'>修改</a>&#160;&#160;&#160;&#160; <a href='../TranServlet?opr=del&tid="+this.tid+"' οnclick='return confirm(\"确定删除么?\")'>删除</a></li>";
  				});
  				$("#myul").append(str);
  			},"JSON"); */
  			
  			$.getJSON("TopicServlet",null,function(data){
  				var str="";
  				$(data).each(function(){
  					str+="<li>&#160;&#160;&#160;&#160; "+this.tname+" &#160;&#160;&#160;&#160; <a href='topic_modify.jsp?tid="+this.tid+"'>修改</a>&#160;&#160;&#160;&#160; <a href='../TranServlet?opr=del&tid="+this.tid+"' οnclick='return confirm(\"确定删除么?\")'>删除</a></li>";
  				});
  				$("#myul").append(str);
  			});
  		});
  
  </script>
  </head>
  
  <body>
    	<ul id="myul">
    		
    	</ul>
  </body>
</html>
vip李少
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery中的$.ajax()方法参数详解
IT全栈 华强工作室
08-20 6401
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.time
原生ajax请求，$.ajax请求，原生封装方法
qq_30418537的博客
06-14 240
下面展示一些 内联代码片。 // -------------------$.ajax restful get风格的选择------------------------ $("#restfulget").on('click',function () { $.ajax({ url:'http://localhost/user', success:function (data) { console.log(data); } }) }) // -----
AJAX
m0_52440148的博客
02-26 65
一，原生实现方式 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立连接 /* 参数： 1. 请求
Ajax
m0_55857594的博客
04-05 92
Ajax 概述 Asynchronous JavaScript And XML 异步的JavaScript 和 XML AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 可以明显地提升用户的体验而不需要去刷新整个页面。 【补充】 异步和同步：客户端和服务器端相互通信的基础上（交互） 同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作。 异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作。 原生 js 实现 Ajax 步骤
ajax post提交数据_Ajax使用中的常见问题
weixin_39963744的博客
11-22 404
阅读本文约需要5分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了快速上手Ajax的知识，今天跟大家分享下Ajax常见问题的知识。0 前言ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层ajax实现。简单易用的高层实现见 $.get, $.post 等。$.ajax()返回其创建...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
AJAXCALL
10-31
AJAXCALL
Ajax详解
07-22
资源名称：Ajax详解内容简介：《Ajax 详解》电子书 chm格式，是《四天学会Ajax》一书扩展，更加详细的讲述Ajax的方方面面。 内容简要给大家说明一下：Ajax简介、使用Javaｓｃｒｉｐｔ和Ajax发出异步请求、Ajax中的...
ajax实例
01-08
ajax发送与接收数据 ajax可以使网页实现异步更新。意味着使用ajax获取服务器数据时，可以部分地更新页面而不用重载。 ajax JS代码 $.ajax({ contentType: application/x-www-form-urlencoded; charset=utf-8, //...
ajax 检测用户名是否被占用
01-21
try { ajax = new ActiveXObject(“Msxml2.XMLHTTP”); } catch (e) { try { ajax = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (E) { ajax = false; } } if (!ajax && typeof XMLHttpRequest!=’...
$.ajax data怎么处理_[AJAX] -AJAX,你要学的,都在这儿(封装ajax+使用jQuery.ajax)
weixin_34665386的博客
12-26 191
案例1,注册页面时,提示用户名被占用思路:1、用户书写用户名信息，在失去焦点时进行用户校验2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在3、将校验结果响应给客户端4、在当前页面，也就用户名输入框后显示提示语技术:使用ajax技术一般是需要先进行格式校验的，但这里仅演示校验是否是否注册用户名被占用jsp页面<%@ page contentType="text/...
后台传数据ajax接受不到问题
weixin_45551504的博客
05-29 1079
在综合SpringMVC的时候在前端写了$.ajax（调用了jQuery库）， js代码 `function a() { $.ajax({ //${pageContext.request.contextPath }是根目录相当于eclipse的webContant url:"${pageContext.request.contextPath }/login/jsontest", type:"GET",
$.ajax()需要清楚的知识
awodwde的博客
07-18 150
想搞清楚$.ajax()，先搞清楚下面几个概念： （摘要博客：https://blog.csdn.net/qq_41326048/article/details/86212373，仅供个人学习） 同步和异步 ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这是浏览器仍然可
ajax异步传输实例java_Ajax 实现数据异步传输
weixin_31236795的博客
02-24 100
Ajaxfunction fun() {/* $.ajax({url:"ajaxServlet",//请求路径type:"get",//请求方式data:{"name":"jack","age":"12"}, //参数携带success:function (data) {alert(data);},//相应成功后的回调函数error:function () {alert("出错啦...");}...
$.ajax()方法详解
qq_43075620的博客
08-10 103
$.ajax()方法详解 jquery中的ajax方法参数 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将...
Java软件开发实战 Java基础与案例开发详解 19-7 综合示例 共10页.pdf
最新发布
07-07
完整版：https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。
ajax笔记ajax笔记ajax笔记
04-03
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值