javaScript+jsp+Servlet局部刷新页面

Jsp】Ajax提交数据不刷新页面 传统的网页基本都是通过get或者post提交数据,但是一旦提交,本页面就被刷新了,即便提交到本页面,原本用户修改的数据就被清空了,这个场景在用户注册时,体验是很糟糕的。 Ajax为此而生,它可以提交数据,而不刷新页面,甚至可以更新局部信息,以下用实例来讲解。 Ajax使用JavaScript来实现,不仅在Jsp中可用,PHP、Asp.Net中同样可以用 先建立一个接收数据的servlet,名... 阅读详情
    1、script脚本
 //Ajax实现下拉框二级级联,根据第一个下拉框的值改变第二个下拉框内的列表   
   //根据 浏览器的类型,创建xmlHttpRequest对象   
   function createXmlHttpRequest()   
    {   
        if(window.ActiveXObject)   
        {   
            return new ActiveXObject("Microsoft.XMLHTTP");   
        }   
        else if( window.XMLHttpRequest())   
        {   
            return new XMLHttpRequest();   
        }       
    }   
    var xmlHttpRequest;   
     
    //异步响应函数,搜索专业    
    function searchMajor(para)   
    {   
        var url="majorSearch.action?para="+para;     //后台请求的路径    
        xmlHttpRequest=createXmlHttpRequest(); 
        xmlHttpRequest.onreadystatechange=callbackMajor;   //将回调函数注册给状态改变事件     
        xmlHttpRequest.open("GET",url,true);   
        xmlHttpRequest.send(null);     
    }
   
    //异步响应函数,搜索班级号 
    function searchClass(para)   
    {   
        var url="classSearch.action?para="+para;     //后台请求的路径    
        xmlHttpRequest=createXmlHttpRequest(); 
        xmlHttpRequest.onreadystatechange=callbackClass;   //将回调函数注册给状态改变事件     
        xmlHttpRequest.open("GET",url,true);   
        xmlHttpRequest.send(null);     
    }
   
    //回调函数,得到搜索班级号结果   
    function callbackClass()   
    {         
   var c_num=document.getElementById("c_num");   
         //请求被成功响应,已接收到结果   
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)   
         {                       
            var result=xmlHttpRequest.responseText;          //返回的结果字符串    
            var classArray= result.split(",");   //返回的结果字符串中,值之间是以,分隔的,所以先拆分成数组   
            var count = classArray.length;   
            c_num.length=0;   //先将下拉列表框清空   
            for (var i = 0; i <count; i++)    
            {      
                c_num.options.add(new Option(classArray[i+1], classArray[i]));   //将结果循环添加到下拉列表中
                i++;  
            }
            if(classArray[count-1] == ""){
             c_num.length=0;   //先将下拉列表框清空
             c_num.options.add(new Option("暂无班级分类",""));
            }      
              
         }   
         else  
         {   
             c_num.length=0;   
             c_num.options.add(new Option("暂无班级分类",""));   
         }   
           
    }
   
     //回调函数,得到搜索专业结果   
    function callbackMajor()   
    {         
   var major=document.getElementById("major");   
         //请求被成功响应,已接收到结果   
         if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200)   
         {                       
             var result=xmlHttpRequest.responseText;          //返回的结果字符串    
            var majorArray= result.split(",");   //返回的结果字符串中,值之间是以,分隔的,所以先拆分成数组   
            var count = majorArray.length;    
            major.length=0;   //先将下拉列表框清空   
            for (var i = 0; i <count; i++)    
            {      
                major.options.add(new Option(majorArray[i+1], majorArray[i]));   //将结果循环添加到下拉列表中
                i++;  
            }
            if(majorArray[count-1] == ""){
             major.length=0;   //先将下拉列表框清空
             major.options.add(new Option("暂无专业分类",""));
            }    
              
         }   
         else  
         {   
             major.length=0;   
             major.options.add(new Option("暂无专业分类",""));   
         }   
           
    }          
      
 //下拉框改变事件 1  
 function changeMajorOptions()   
 {   
     var academy = document.getElementById("academy");        
     if(academy.value != "")   
     {   
      searchMajor(academy.value);      
     }       
    return;      
 }
 //下拉框改变事件 2
 function changeClassOptions(){
  var major = document.getElementById("major").value;
  if(major != ""){
   searchClass(major);
  }
 }
2、 jsp页面
<td height="30" align="right">院系班级:</td>
    <td>
     <select name="academy" id="academy" onblur="changeMajorOptions()">
      <c:if test="${empty alist}">
       <option value="">暂无注册班级</option>
      </c:if>
      <c:if test="${!empty alist}">
       <c:forEach items="${alist}" var="academy">
        <option value="${academy.m_id}">${academy.m_name}</option>
       </c:forEach>
      </c:if>
     </select>&nbsp;
     <select name="major" id="major" onblur="changeClassOptions()">
      <option value="">请选择专业</option>
     </select>&nbsp;
     <select name="c_num" id="c_num">
      <option value="">请选择班级</option>
     </select>
    </td>
3、MajorListAction类实现(ClassListAction同理)
  response.setContentType("text/html");
  response.setCharacterEncoding("utf-8");
  int para = Integer.parseInt(request.getParameter("para"));
  IUserIndexBusiness iuib = BusinessIndexFactory.getUserIndexBusiness();
  List<MajorValue> mlist = iuib.getMajorList(para);
  String result = "";
  if(mlist!=null&&mlist.size()>0){
   result = ""+mlist.get(0).getM_id();
   result += ","+mlist.get(0).getM_name();
   for(int i=1;i<mlist.size();i++){
    result += ","+mlist.get(i).getM_id();
    result += ","+mlist.get(i).getM_name();
   }
  }
  response.getWriter().write(result);
JSP】文件上传局部刷新 看到局部刷新,大家联想到的肯定是Ajax,但实际上,Ajax是没有办法实现文件上传的局部刷新的。由于安全性的需要,JavaScript代码是不能访问客户端文件系统,所以通过XMLHttpRequest的请求参数是无法得到上传文件的内容的,只能得到文件名。 那么我们又是怎样实现文件上传局部刷新的呢?其实我们再上传文件的时候采用的还是同步方式,为了不刷新整个页面,我们需要用到隐藏的iframe,我们 阅读详情

相关推荐

【异常】OpenClaw总Token超限400报错400 Total tokens of image and text exceed max message tokens. Request id:

摘要: 多模态大模型调用中,图文总Token超限导致的400报错是常见问题。本文分析了该报错的触发原因(文本+图片Token总和超出接口限额),并从技术层面解释了多模态Token的计数规则。解决方案分为三个层次:1)紧急修复(精简文本、压缩图片、拆分请求);2)标准化根治(预校验Token、图片预处理、限额适配);3)进阶兜底(分块处理、模型升级、容错机制)。通过前置管控与源头优化,可有效解决并预防此类问题,提升业务稳定性。

奶爸的编程之路,也就一周冷个三天 775

使用ajax和servlet实现网页局部刷新

使用ajax和jsp servlet实现网页局部刷新,,,聊天功能

移植Google Gemini Nano到RK3588 NPU,实现高效边缘推理

在嵌入式 AI 开发中,大家常常会遇到模型在硬件平台上运行时出现性能瓶颈的问题,比如推理速度慢、功耗过高,这严重影响了应用的实时性和稳定性 ,导致性能瓶颈,无法满足如智能安防、工业检测等场景的实时性需求。为了解决这些问题,我们可以将轻量模型移植到具有强大算力的硬件平台上。本文将手把手教你将 Google Gemini Nano(或类似轻量模型)移植到 RK3588 NPU,充分发挥 RK3588 NPU 的 6Tops 算力,实现高效的模型推理,提升嵌入式系统的 AI 处理能力。

远程部署调试 运行安装 项目调试 二次开发 项目技术新 持续迭代 部分源码免费分享 252

jsp实现局部刷新的一种方法

废话不多少,直接上代码:  如下:当点击停用按钮后,前一列启用状态,改为 停用  操作列的停用改为启用。   我要说的是其中一种实现方法是替换文本的方式:   jsp页面代码为: 停用 启用 停用 启用 修改 删除 js事件操作为:红色部分就是替换文本内容 function openOrStop(i

lovebosom的博客 3万+

jsp+ajax自动刷新局部页面

通过 AJAX,JavaScript 可使用 JavaScriptXMLHttpRequest 对象来直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据。处理ajax请求的jsp文件:ajax.jsp。发送ajax请求的jsp文件:zx.jsp

1638

记录JavaWeb项目结合ajax进行简单的局部刷新操作

需求删除列表内数据,不影响到其他模块内的内容 后端处理代码 @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); resp.setCharacterEncoding("utf-8"); resp.setContentType("text/h

唐昊 521

Web- Jquery实现异步处理(Servlet),局部刷新功能

做的JAVAEE 课设的学习笔记:声明:直接复制代码是运行不了的 (1)在Java中正确得到JSONObject,需要导入JSON的JAVA支持包“json-lib-2.3-jdk15.jar”,同时需导入 JSON依赖包“commons-logging-1.0.4.jar”,“commons-lang.jar”,“commons- collections.jar”,“commons-beanu...

qq_32938957的博客 1237

jsp java局部刷新_JavaWeb-----------Ajax页面局部刷新(一)

1、Ajax是什么?简单来说ajax是一个局部刷新技术,通过向服务器发送并且获得请求来刷新某一个局部界面,而不是整个界面的刷新。它是通过在html页面中使用JavaScriptXmlHttpRequest来向服务器发送和获取数据。它可以实现页面局部刷新和异步刷新。2、如果没有Ajax会怎么样假如你在看网络视频的时候,如果没有ajax这个局部刷新技术,那么每次你评论视频的时候都会刷新页面。这样...

weixin_31163527的博客 614

JS、jquery静态(局部刷新页面(Ajax异步)

JS静态刷新 首先是JSP页面代码: &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt; &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01

念念不忘,必有回响 4242

ajax、js、jspservlet的联系和区别

简述 正在做项目的我对于ajax、jsp、js和servlet有了一个更深的理解,相比于之前对它们模糊不清的概念,似乎更加明显了。 关于AJAX:我起初学习ajax技术的时候,可能是因为我比较笨吧,觉得就是一个固定的模式,打固定的代码、执行固定的操作,但是就是不知道怎么用,所以在老师刚讲完,我并没有很清楚的知道它神奇的地方在哪。在做项目的过程中,我才慢慢的明白,AJAX其实用处有很多,它有一个固定的模式,可以把html/jsp中的参数传到servlet,再把servlet调取一系列方法锁获得的值作为A

weixin_46687295的博客 1416

JavaScript+Servlet实现进度条

为了给用户良好的体验,长时间的处理过程最起码应该添加进度条,显示处理的百分比或者剩余时间。             本篇通过JavaScriptServlet模拟进度条,其实现原理是每间隔一小段时间就异步访问服务器获取处理进度,然后局部刷新页面,直到处理完毕为止。 该进度条处理了各浏览器间差异,虽然在IE内核浏览器和非IE内核浏览器显示并不完全相同,但并不影响使用。

长弓的专栏 7337

Ajax---局部刷新

使用Ajax实现局部刷新页面

福仔的博客 771

动态生成能够局部刷新的验证码【AJAX技术】---看了不懂赔你钱

在开发JavaWeb应用时,动态生成能够局部刷新的验证码是一项必须的功能,在这里我们将会详细的讲解如何实现这一功能。 一、涉及技术 该功能需要用到AJAX异步传输技术,这样能保证在点击“看不清,重新获取验证码”按钮时,能够不刷新页面其它内容而局部刷新验证码图片内容。 还需要用到S...

WGH100817的博客 134

JavaWeb(15)之AJAX

全局刷新局部刷新 全局刷新局部刷新工作原理 AJAX的本质 AJAX的开发步骤 同步和异步区别 AJAX的命令 异步请求工作状态:5种 readystate属性:存储当前的工作状态

笑笑不说话 225

名词解释

js: jsp: ajax: json: url: cdn:内容分发网络 1、加速用户获取数据的系统 2、部署在离用户最近的网络节点上 3、命中CDN不需要访问后端服务器 jspservlet

weixin_42250357的博客 154

关于Ajax的学习笔记

1.导入jQuery(一种框架,Ajax是JQuery的一种方法)文件——例如: <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 写在jsp页面的<head>标签里面。是一门使用了js语言,可以使用于Javaweb,实现前端代码和后端代码连结的的一种异步同步(不需要等待服务器相应,就能够发送第二次请求)的一种技术,它主要用于网页内容的局部刷新,列如验证码、导航栏的刷新等。3.data:数据内容。

m0_74096456的博客 544

2021.0827 快手摸底(四)web

1,MySQl三层结构?存储结构? MySQL三层结构 <1>连接层:为请求做连接处理,授权认证、安全。 <2>SQL层:大多数MySQL的核心功能都在这一层,包括查询解析、分析、优化、缓存、内置函数,所有跨域存储引擎的功能都在这一层实现。 <3>存储层:负责MySQL中数据的存储和提取。 2,三层架构和MVC? 三层架构 <1>表示层(web):用户看到的界面,用户可以界面上的组件和服务器进行交互。 <2>业务逻辑层Service):处理

weixin_43722843的博客 255

Ajax数据库异步查询分页技术实现(数据—>xml—>数据)

Ajax,想必大家对它并不陌生(读音:e:j^ks,)AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML) 那我们要如何运用ajax实现异步的数据查询和把查询的数据封装成xml Dom 对象 然后再解析成数据显示回页面呢 。也许用人会说这个很简单,只要把nowpage 和 countpage 传过去就可以了 ,的确是这样 但是...

Longmanfei的专栏 277

Ajax校验用户名

一、Ajax介绍 1.1 是什么 “Asynchronous Javascript And XML”(异步JavaScript和XML) 并不是新的技术,只是把原有的技术,整合到一起而已。  使用CSS和XHTML来表示  使用DOM模型来交互和动态显示  使用XMLHttpRequest来和服务器进行异步通信  使用javascript来绑定和调用 1.2 有什么用 咱们的网页如...

扮猪吃老虎二号的博客 387

HT32F52352工程模板

HT32F52352工程模板,自己建立的,亲测可用,可以配合本人的其他关于HT32F52352的博客使用。

上一篇: Meta的使用方法技巧
Sweety802
博客等级 码龄15年 0粉丝 0原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值