ajax

于 2021-04-24 22:46:11 发布
阅读量117 收藏
点赞数
分类专栏： 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李少
关注
专栏目录
前端怎么获得后端抛出的异常_Spring MVC/Boot 统一异常处理最佳实践
weixin_39533742的博客
11-20 3092
1. 前言在 Web 开发中, 我们经常会需要处理各种异常, 这是一件棘手的事情, 对于很多人来说, 可能对异常处理有以下几个问题:什么时候需要捕获(try-catch)异常, 什么时候需要抛出(throws)异常到上层.在 dao 层捕获还是在 service 捕获, 还是在 controller 层捕获.抛出异常后要怎么处理. 怎么返回给页面错误信息.2. 异常处理反例既然谈到异常, 我们先来...
后台传数据ajax接受不到问题
weixin_45551504的博客
05-29 1110
在综合SpringMVC的时候在前端写了$.ajax（调用了jQuery库）， js代码 `function a() { $.ajax({ //${pageContext.request.contextPath }是根目录相当于eclipse的webContant url:"${pageContext.request.contextPath }/login/jsontest", type:"GET",
jQuery中的$.ajax()方法参数详解
IT全栈 华强工作室
08-20 6589
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.time
$.ajax()需要清楚的知识
awodwde的博客
07-18 164
想搞清楚$.ajax()，先搞清楚下面几个概念： （摘要博客：https://blog.csdn.net/qq_41326048/article/details/86212373，仅供个人学习） 同步和异步 ajax 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），也就是无刷新数据读取。 同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事 异步: 请求通过事件触发->服务器处理（这是浏览器仍然可
原生ajax请求，$.ajax请求，原生封装方法
qq_30418537的博客
06-14 266
下面展示一些 内联代码片。 // -------------------$.ajax restful get风格的选择------------------------ $("#restfulget").on('click',function () { $.ajax({ url:'http://localhost/user', success:function (data) { console.log(data); } }) }) // -----
$.ajax()方法详解
qq_43075620的博客
08-10 144
$.ajax()方法详解 jquery中的ajax方法参数 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将...
Ajax从入门到精通.pdf
05-09
Ajax从入门到精通.pdf 本书籍旨在深入浅出地介绍 Ajax 技术，从基础知识到高级应用，全面覆盖 Ajax 的核心概念、技术原理、实现方法和实践应用。书籍的主要内容包括： 1. Ajax 概述：本书首先介绍了 Ajax 的概念、...
谷歌浏览器插件—— Ajax Interceptor
03-16
**Ajax Interceptor：深入理解与应用** Ajax Interceptor 是一款专为谷歌浏览器（Chrome）设计的插件，它允许开发者在Ajax请求发送后和响应返回前进行干预，从而实现对AJAX请求数据的修改。这款插件对于前端开发、...
chrome扩展插件获取ajax请求记录
04-06
在IT领域，尤其是在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种常用的技术，它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这极大地提升了用户体验，因为用户不再...
Ajax实现文件下载
12-11
JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的...
ajaxProxy:ajaxProxy 是一个ajax请求发送代理，支持链序请求和阻塞请求
06-03
ajaxProxy ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器，提供一种可读性更好的接口来实现异步请求的流程控制，...
ajax请求数据是数组时需要注意的问题
hx1024877209的博客
10-20 1069
项目中经常遇到批量删除、批量导出等需求，往往需要把多个id封装成数组传到后台做业务逻辑处理。但是普通ajax请求data参数是数组，后台用数组接收不到。 一般ajax写法 var ids= []; $.ajax({ url: 'xxxx.do', data: { ids: ids}, dataType: "json", type: "POST", success: function (responseJSON) {
Ajax
码农阿益的博客
04-13 224
Ajax简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest能够自动帮你完成搜索单词。 Google Suggest 使用 AJAX 创造
AJAX
m0_52440148的博客
02-26 83
一，原生实现方式 //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 post提交数据_Ajax使用中的常见问题
weixin_39963744的博客
11-22 426
阅读本文约需要5分钟大家好，我是你们的导师，我每天都会在这里给大家分享一些干货内容(当然了，周末也要允许老师休息一下哈)。上次老师跟大家分享了快速上手Ajax的知识，今天跟大家分享下Ajax常见问题的知识。0 前言ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层ajax实现。简单易用的高层实现见 $.get, $.post 等。$.ajax()返回其创建...
ajax异步传输实例java_Ajax 实现数据异步传输
weixin_31236795的博客
02-24 117
Ajaxfunction fun() {/* $.ajax({url:"ajaxServlet",//请求路径type:"get",//请求方式data:{"name":"jack","age":"12"}, //参数携带success:function (data) {alert(data);},//相应成功后的回调函数error:function () {alert("出错啦...");}...
$.ajax data怎么处理_[AJAX] -AJAX,你要学的,都在这儿(封装ajax+使用jQuery.ajax)
weixin_34665386的博客
12-26 232
案例1,注册页面时,提示用户名被占用思路:1、用户书写用户名信息，在失去焦点时进行用户校验2、失去焦点发送请求到服务器,服务器根据用户名信息去数据库中查询该用户名是否存在3、将校验结果响应给客户端4、在当前页面，也就用户名输入框后显示提示语技术:使用ajax技术一般是需要先进行格式校验的，但这里仅演示校验是否是否注册用户名被占用jsp页面<%@ page contentType="text/...
(源码)基于QT框架的云存储系统.zip
最新发布
11-13
# 基于QT框架的云存储系统 ## 项目简介 本项目是一个基于QT框架开发的云存储系统，旨在为用户提供一个安全、高效的文件存储和分享平台。系统采用CS架构，客户端通过QT框架搭建，服务端运行在Centos 7环境下。用户可以通过系统进行文件的上传、下载、分享，以及与好友的私聊和文件分享。 ## 项目的主要特性和功能 好友管理支持添加、删除好友，私聊好友，以及分享文件给好友。 文件管理提供文件夹的创建、删除、移动、重命名操作，支持文件的上传、下载、移动和分享。 用户界面使用QT框架搭建用户界面，提供友好的交互体验。 网络通信通过自定义的交互协议实现客户端与服务器的高效数据交互。 并发处理服务器端采用多路复用、内存池、线程池等技术，确保在并发环境下的稳定运行。 ## 安装使用步骤 1. 下载源码从项目仓库下载源码文件。 2. 配置开发环境 服务端安装Centos 7，并配置vim、G++、gdb等开发工具。
Ajax到JQuery Ajax学习指南
"这篇教程主要关注的是从基本的Ajax技术过渡到使用JQuery的Ajax功能的学习。Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器交换数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值