精华内容
下载资源
问答
  • 因为使用模态窗就不能访问后台了。使用跳转页面是可以访问后台的,可以发起一个新的请求。那么数据就从当前页面的表格里取。 二·修改 复制“学生注册登记模态窗”,删除“form”,换成原来“update_student.jsp”...

    一·前情提要

    使用模态窗进行修改的第一个问题,是在修改时向用户显示的数据从哪来。因为使用模态窗就不能访问后台了。使用跳转页面是可以访问后台的,可以发起一个新的请求。那么数据就从当前页面的表格里取。
    在这里插入图片描述

    JavaScript DOM操作,可以读取网页的内容。

    二·修改

    复制“学生注册登记模态窗”,删除“form”,换成原来“update_student.jsp”的表单。
    大致如下:

    <!-- 新生修改模态窗口 -->
    <div class="modal fade" tabindex="-1" id="regStuModal">
    	<div class="modal-dialog">
    		<div class="modal-content">
    			<div class="modal-header">
    				<h5 class="modal-title">学生信息修改</h5>
    				<button type="button" class="close" data-dismiss="modal"
    					aria-label="Close">
    					<span aria-hidden="true">&times;</span>
    				</button>
    			</div>
    			<div class="modal-body">
    				<form class="col-6" action="stuMgr" method="post">
    					<input type="hidden" name="task" value="updateStu" />
    					<!-- 学生学号也要传上去,单数不能出现在界面上,所以添加隐含域 -->
    					<input type="hidden" name="stuno" value="${stu.stuNo}" />
    					<div class="form-group">
    						<label>学生学号:${stu.stuNo}</label>
    						<!-- 学号是不可修改的 -->
    					</div>
    					<div class="form-group">
    						<label>学生姓名:</label> <input type="text" class="form-control"
    							name="stuname" value="${stu.stuName}">
    						<!-- 用EL表达式来回填的 -->
    					</div>
    					<div class="form-group">
    						<label>学生成绩:</label> <input type="text" class="form-control"
    							name="stumark" value="${stu.stuMark}">
    					</div>
    					<button type="submit" class="btn btn-primary">信息修改</button>
    				</form>
    			</div>
    			<div class="modal-footer">
    				<button type="button" class="btn btn-secondary"
    					data-dismiss="modal">取消</button>
    				<button type="button" class="btn btn-primary" onclick="regStu()">确认修改</button>
    			</div>
    		</div>
    	</div>
    </div>
    

    三·测试模态窗

    不访问后台就不能这样写了。
    在这里插入图片描述
    稍作修改,先测试模态窗能不能弹出:

    	<!-- 新生修改模态窗口 -->
    	<div class="modal fade" tabindex="-1" id="updateStuModal">
    		<div class="modal-dialog">
    			<div class="modal-content">
    				<div class="modal-header">
    					<h5 class="modal-title">学生信息修改</h5>
    					<button type="button" class="close" data-dismiss="modal"
    						aria-label="Close">
    						<span aria-hidden="true">&times;</span>
    					</button>
    				</div>
    				<div class="modal-body">
    					<form class="col-6" action="stuMgr" method="post">
    						<input type="hidden" name="task" value="updateStu" />
    						<!-- 学生学号也要传上去,单数不能出现在界面上,所以添加隐含域 -->
    						<input type="hidden" name="stuno" value="" />
    						<div class="form-group">
    							<label>学生学号:</label>
    							<!-- 学号是不可修改的 -->
    						</div>
    						<div class="form-group">
    							<label>学生姓名:</label> <input type="text" class="form-control"
    								name="stuname" value="">
    							<!-- 用EL表达式来回填的 -->
    						</div>
    						<div class="form-group">
    							<label>学生成绩:</label> <input type="text" class="form-control"
    								name="stumark" value="">
    						</div>
    						<button type="submit" class="btn btn-primary">信息修改</button>
    					</form>
    				</div>
    				<div class="modal-footer">
    					<button type="button" class="btn btn-secondary"
    						data-dismiss="modal">取消</button>
    					<button type="button" class="btn btn-primary" onclick="">确认修改</button>
    				</div>
    			</div>
    		</div>
    	</div>
    
    

    添加脚本:
    在这里插入图片描述
    测试:
    在这里插入图片描述
    可行。

    四·获取按钮所在行的信息,将其填充到模态窗中

    每次点击按钮都不一样,所以要把按钮传进去。
    在这里插入图片描述

    1·找到按钮的父元素

    按钮:
    在这里插入图片描述
    <td>是按钮的父元素:
    在这里插入图片描述
    试着把父元素拿出来:
    在这里插入图片描述

    进入网页->右键->“检查”:
    在这里插入图片描述
    点击“修改”:
    在这里插入图片描述
    找到按钮所在的<td>但是还是不够的:
    在这里插入图片描述
    要找到<td>的兄弟,就要继续寻找父元素:
    在这里插入图片描述
    在这里插入图片描述
    找到了<tr>,<td>的父元素是<tr>,找到<tr>之后才能回来找到这几个<td>:
    在这里插入图片描述
    查询文档:
    在这里插入图片描述
    childNode包含文字和注释,是我们不需要的东西,不够纯净,那么用“children”回来找按钮的兄弟结点:
    在这里插入图片描述
    “btn.parentNode.parentNode”的所有子元素都构成一个“children”数值,“children[0]”是第一个:
    在这里插入图片描述
    OK!

    2·给表单元素赋值

    要给元素赋值,需要先找到表单
    给表单起个名字:
    在这里插入图片描述
    查看要给哪些元素赋值:
    在这里插入图片描述
    完善脚本,代码如下:

    function showUpdateDlg(btn){
    	/* 在模态窗显示之前要进行一些操作 */
    	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
    	/* $('#updateStuModal').modal('show'); */
    	/* 创建变量 */
    	var elements = btn.parentNode.parentNode.children;
    	
    		var frm = document.forms['updateStuFrm'];
    
    	
    	frm.stuno = elements[0].innerText;
    	frm.stuname = elements[1].innerText;
    	frm.stumark = elements[2].innerText;
    
    	
    	$('#updateStuModal').modal('show');
    	
    }
    

    测试:
    在这里插入图片描述
    数据还没进来。
    调试:
    在这里插入图片描述
    写成了给主键赋值。
    修改:

    function showUpdateDlg(btn){
    	/* 在模态窗显示之前要进行一些操作 */
    	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
    	/* $('#updateStuModal').modal('show'); */
    	/* 创建变量 */
    	var elements = btn.parentNode.parentNode.children;
    	
    	var frm = document.forms['updateStuFrm'];
    
    	
    	frm.stuno.value = elements[0].innerText;
    	frm.stuname.value = elements[1].innerText;
    	frm.stumark.value = elements[2].innerText;
    	
    	$('#updateStuModal').modal('show');
    	
    }
    

    测试:
    在这里插入图片描述
    再进到调试界面:
    在这里插入图片描述
    学生学号还是有问题的。
    在“学生学号”添加:
    在这里插入图片描述
    完善脚本,使用jQuery的方法:

    function showUpdateDlg(btn){
    	/* 在模态窗显示之前要进行一些操作 */
    	/* console.log(btn.parentNode.parentNode.children[0].innerText); */
    	/* $('#updateStuModal').modal('show'); */
    	/* 创建变量 */
    	var elements = btn.parentNode.parentNode.children;
    	
    	var frm = document.forms['updateStuFrm'];
    
    	
    	frm.stuno.value = elements[0].innerText;
    	frm.stuname.value = elements[1].innerText;
    	frm.stumark.value = elements[2].innerText;
    	$("#stuno").text(elements[0].innerText);/* 使用jQuery的方法 */
    	
    	$('#updateStuModal').modal('show');
    	
    }
    

    按钮多了一个,删除这一行:
    在这里插入图片描述

    五·实现更新

    1·修改按钮在这里插入图片描述

    2·编写脚本

    找到表单,模态窗在完成提交后隐藏。

    function updateStuModal(){
    	document.forms['updateStuFrm'].submit();
    	$('#updateStuModal').modal('hide');    	
    }
    

    六·测试

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    成功!

    展开全文
  • <div><p>学习 React 过程中实现了一个个人主页,没有复杂的实现和操作,适合入门 ~ 这个项目其实功能很简单,就是常见主页、博客、demo、关于我等功能。 页面样式都是自己写,黑白...
  • 学习Javaweb,不能不清楚servlet中重定向和转发区别,虽然两种方式都可以实现页面跳转,但是混用可能会发生盗链问题。 先来总结,再来详细看看区别在: 重定向特点: 1. 地址栏会发生变化,显示是转向...

    Servlet的重定向与转发的区别(附做验证码的例子)


    学习Javaweb,不能不清楚servlet中的重定向和转发的区别,虽然两种方式都可以实现页面跳转,但是混用可能会发生盗链问题。

    先来总结,再来详细看看区别在哪:
    重定向的特点:
    1. 地址栏会发生变化,显示的是转向的其他站点的地址
    2. 重定向可以访问其他网站的资源
    3. 重定向对浏览器做的是两次请求,并且不能使用request对象来存储和共享数据
    4. 重定向是客户端行为

    转发的特点:
    1. 转发中地址栏路径不会发生变化,不会显示出转向的其他站点的地址
    2. 转发只能访问当前服务器下的资源
    3. 转发对浏览器做的是一次请求,可以使用request对象来共享数据
    4. 转发是服务器行为

    接下来看看解释:

    1.重定向访问过程结束后,浏览器地址栏中显示的URL地址会发生改变,由初始的URL地址变成另外一个站点的URL;请求转发过程结束后,浏览器地址栏URL仍然指向开始的页面。

    2.值得注意的是,我们可以利用response.sendRedirect() 方法重定向到当前应用程序中的其他资源,也可以重定向到同一个站点上的其他应用程序中的资源,还可以使用重定向到其他站点的资源。虽然转发速度更快(重定向需要经过客户端,而转发不需要。),还能保持request内的对象,但是它只能将请求转发给当前WEB的应用程序,不能访问其他站点资源,如果用转发来访问其他站点资源,容易造成盗链问题,很可能访问不到其他站点资源。

    3.这里其实是很容易理解的,因为在重定向中,它会向服务器报告状态码302,然后服务器会告诉客户端要转向哪个地址,客户端再自己去请求转向的地址,因此,状态栏中会显示转向站点的地址,所以说,客户端对浏览器至少进行了两次的访问请求。
    而在转发中,是服务器自己代替客户端去请求其他站点资源,然后返回给客户端。客户端并不知道服务器帮他去访问了,因此状态栏中地址不会显示出转向的地址,还是保留原来的地址。

    举个例子,就好比如你去村委会叫他们帮你办件事,但是村委会一看这事他们帮不了忙,叫你自己去镇政府找人帮忙,然后你就拿着村委会给的地址去镇政府,找到人解决了事情。然后你来看看,你是不是一共去了两个地方,访问了两个站点?这就很好地解释了为什么重定向对浏览器做的是两次请求了。

    再来看看转发,你去村委会叫他们帮你办件事,村委会一看这事他们帮不了忙,但是他们叫你在这里等着,他自己去打电话给镇政府叫人来帮忙,然后事情解决了。在这个过程中,你不知道村委会去叫人来帮忙了,你还以为是村委会帮你解决的,这也是为什么说转发容易造成盗链的原因了。我们来看,在这个过程中你只去过村委会,只访问一个站点,因此转发对浏览器做的是一次请求。

    4.重定向经过客户端,需要客户端自己另外去访问其他站点,而转发只是在服务器内完成了。

    实现代码:

    //转发,转发到other.html
    request.getRequestDispatcher("other.html").forward(request, response);
    
    //重定向,重定向到new.html
    response.sendRedirect("new.html");
    
    

    附做最基础最低级验证码的代码:

    html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <script>
        /*
        点击刷新验证码
        步骤:
    	      1.给超链接和图片绑定单击事件
    	      2.重新设置图片的src属性值
         */
        window.onload = function(){
            //1.获取图片对象
            var img = document.getElementById("checkCode");
            //2.绑定单击事件
            img.onclick = function(){
                //加时间戳
                var date = new Date().getTime();
                img.src = "/day15/checkCodeServlet?"+date;
            }
        }
    </script>
    </head>
    
    <body>
    
    <img id="checkCode" src="/day15/checkCodeServlet" />
    <a id="change" href="">看不清换一张?</a>
    
    </body>
    </html>
    

    Java代码:

    package Response_Study;
    /**
        做验证码
     */
    
    import javax.imageio.ImageIO;
    import javax.servlet.ServletException;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.awt.*;
    import java.awt.image.BufferedImage;
    import java.io.IOException;
    import java.util.Random;
    
    @WebServlet("/checkCodeServlet")
    public class CheckCodeServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            int width = 100;
            int height = 50;
    
            //1.创建一对象,在内存中图片(验证码图片对象)
            BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    
    
            //2.美化图片
            //第一步: 填充背景色
            Graphics g = image.getGraphics();//画笔对象
          	g.setColor(Color.yellow);//设置画笔颜色
            g.fillRect(0,0,width,height);
            
            //第二步:1.画边框
            g.setColor(Color.BLUE);
            g.drawRect(0,0,width - 1,height - 1);
            String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
            //第二步:2.生成验证码随机角标
            Random ran = new Random();
     
            //第三步:写验证码
            for (int i = 1; i <= 4; i++) {
                int index = ran.nextInt(str.length());
                //获取字符
                char ch = str.charAt(index);//随机字符
           //验证码关键步骤
           g.drawString(ch+"",width/5*i,height/2);
            }
    
            //第四步:画干扰线
            g.setColor(Color.RED);
    
            //随机生成干扰线坐标点
            for (int i = 0; i < 10; i++) {
                int x1 = ran.nextInt(width);
                int x2 = ran.nextInt(width);
                int y1 = ran.nextInt(height);
                int y2 = ran.nextInt(height);
                g.drawLine(x1,y1,x2,y2);
            }
    
            //3.将图片输出到页面展示
            ImageIO.write(image,"jpg",response.getOutputStream());
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            this.doPost(request,response);
        }
    }
    

    效果:
    在这里插入图片描述

    总结:在javaweb中servlet是比较重要的一个点,我们要牢牢掌握,虽然目前只是学习了一些皮毛,但是多个皮毛汇起来就是一件毛衣了,暖不暖和就不知道了,起码还可以穿吧。。

    展开全文
  • 而对于微前端概念感兴趣或熟悉同学,可以通过搜索引擎来获取更多信息,如 ;%E5%BE%AE%E5%89%8D%E7%AB%AF&type=content">知乎上相关内容</a>, 本文不再做过多介绍。 <p><em>两个...
  • java面试宝典

    2013-02-28 16:04:01
    167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? ...
  • 千方百计笔试题大全

    2011-11-30 21:58:33
    167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少Callback? 41 170、Javascript如何发送一个Ajax请求? 41 171、AJAX都有哪些有点和缺点? ...
  • java面试题

    2018-01-01 15:35:15
    84.9. 题目1:用1、2、2、3、4、5这六个数字,用java写一个main函数,打印出所有不同排列,如:512234、412345等,要求:"4"不能在第三位,"3"与"5"不能相连. 117 84.10. 写一个方法,实现字符串反转,如:输入...
  • asp.net知识库

    2015-06-18 08:45:45
    如何在Asp.Net1.1中实现页面模板(所谓MasterPage技术) Tool Tip 示例(FILTER版) Tool Tip示例 (htc版) 一个.net发送HTTP数据实体类 按键跳转以及按Enter以不同参数提交,及其他感应事件 动态控制Page页...
  • java面试题典 java 面试题 经典

    热门讨论 2010-06-18 13:42:36
    解析XML文档有种方式? 13 39. JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗? 14 40. 一个".java"源文件中是否可以包括多个类(不是内部类)...
  • Java面试宝典2010版

    2011-06-27 09:48:27
    10、使用final关键字修饰一个变量时,是引用不能变,还是引用对象不能变? 11、"=="和equals方法究竟有什么区别? 12、静态变量和实例变量区别? 13、是否可以从一个static方法内部发出对非static方法调用...
  • 最新Java面试宝典pdf版

    热门讨论 2011-08-31 11:29:22
    10、使用final关键字修饰一个变量时,是引用不能变,还是引用对象不能变? 11 11、"=="和equals方法究竟有什么区别? 11 12、静态变量和实例变量区别? 12 13、是否可以从一个static方法内部发出对非static方法...
  • 10、使用final关键字修饰一个变量时,是引用不能变,还是引用对象不能变? 11 11、"=="和equals方法究竟有什么区别? 11 12、静态变量和实例变量区别? 12 13、是否可以从一个static方法内部发出对非static方法...
  • 11.2.3 华丽转身——实现页面跳转 203 11.2.4 始终为用户做好服务——增加Service 203 11.2.5 细节决定成败——完善应用细节 203 11.3 成功就在眼前——应用测试和发布 204 11.3.1只欠东风——应用测试 204 ...
  • flash shiti

    2014-03-14 10:32:41
    影片不能有Loading B. 中间 C. 后面 D. 前面 2.Flash中设置属性命令是? A. Set Polity B. Polity C. Property D. Set Property 3.Flash action“while”意义是? A. 卸载动画片段符号 B. 声明局部变量...
  • 【容器信息】 查看每一个打开的Weex页面的基本信息和性能数据; 【DevTool】 快速开启Weex DevTool的扫码入口。 tips : 如果使用我们滴滴优秀的开源跨端方案 chameleon 也可以集成该工具集合 六、支持自定义的...
  • <div><p>在使用Promise处理一些复杂逻辑过程中,我们有时候会想要在发生某种错误后就停止执行Promise链后面所有代码。...但Q和$q(Angular)却不能这么做,具体要在个子对象原型上加或者改方法我...
  • 实例062 判断当前用户是哪种用户 3.6 获取windows日志信息 实例063 获取系统日志信息 实例064 获取安全日志信息 实例065 获取应用程序日志信息 实例066 创建并写入自定义日志信息 实例067 向系统日志写入自定义数据 ...
  • Visual Studio程序员箴言--详细书签版

    热门讨论 2012-10-16 20:37:39
    初学者还是经验丰富用户来说,了解、掌握并在实际工作中使用这些技巧都在开发中达到事半功倍效果。 作译者 作者: Sara Ford  Sara Ford 作为Visual Studio核心团队负责测试软件设计工程师,Sara Ford...
  • 2.内页展示提供两种样式,默认为showurl.asp样式,上面有导航条,另一种为showurl1.asp样式,直接跳转到对方网站,用户使用哪种,只要将文件名改为showurl.asp即可! 3.为防止用户修改后台模板出错,将首页模板和分类页模板,...
  • Java 面试宝典

    2013-02-01 10:02:08
    10、使用 final 关键字修饰一个变量时,是引用不能变,还是引用对象不能变? .................................................................................................................................

空空如也

空空如也

1
收藏数 20
精华内容 8
关键字:

哪种方式不能实现页面的跳转