AJAX处理数据提交到Servlet

jsp+ajax+servlet页面的提交,接收,显示数据流程 jsp+ajax+servlet页面的提交,接收,显示数据流程 最近想写一些偏基础性的文章,主要是因为,有一些学弟学妹们可能基础比较薄弱,于是我把一些常用功能但是又容易混淆的地方单独挑出来说说,当然也是方便回顾一下知识。 一般来说,业务开发有一些场景是: 比如 前台发起一个数据请求,然后后台接收,到数据库查询到数据了,然后这时候数据怎么返回给前台页面呢?前台页面怎么接收这些数据呢?接收到这些数据... 阅读详情

AJAX是与服务器交换数据的技术,它可以在不加载全部页面的情况下,实现对部分网页更新。也叫异步刷新技术:
在这里我需要提到的是使用AJAX来处理将数据提交到servlet:
创建web工程
首先创建一个jsp页面(index.jsp):

<%@ 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>index</title>
<!--必须引入jquery库-->
<script src="./JsFile/jquery-3.1.1.js"></script>
</head>
<body>
    <!--这是一个文本框,用于定义数据-->
    <input type="text" id="text" />
    <!--创建按钮:并通过单击事件来调用函数名为lixl()的函数
    那么这个函数做了些什么呢?-->
    <button onclick="lixl()">Put</button>
    <!--创建一个h1标签-->
    <h1>Hello</h1>
    <script>
    //它在这里
        function lixl(){
    //首先使用val()方法获取id为text文本框的内容
    //并赋予给value变量
            var value = $("#text").val();
            //定义ajax()
            $.ajax({
            //tyep:设置提交方式(get|post)
                type:"post",
            //url:提交到那个servlet,这里写它的路径
                url:"./Ajax_let",
        //data:定义数据,以键值对的方式放在大括号里
                data:{key_a:value},
        //statusCode:状态码,用于定义执行时提示的状态
                statusCode:{
                404:function(){
                    alert("404");
                },
                500:function(){
                    alert("500");
                }
                },
            //success:当ajax完成操作并且不出现异常执行它,自定义参数massage是用于存放servlet响应的数据,Status为ajax执行的状态
                    success:function(massge,Status){
                    //提示状态
                    alert(Status);
                //将h1的值替换为servlet返回的值   
                $("h1").text(massge);
                }
            });
        }
    </script>
</body>
</html>

好接下来我们来看看servlet里面做了些什么:Ajax_let.java

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class Ajax_let
 */
@WebServlet("/Ajax_let")
public class Ajax_let extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Ajax_let() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
/*由于我们的ajax是通过post方式提交给servlet的,
*所以我们要在servlet的post方法里来获取提交的数据
*/
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
    //通过request对象的getParameter方法来获取键key_a所对应的数据
    //在这里我们就完成了ajax提交数据到servlet了
        String value = request.getParameter("key_a");
    //打印一下结果
        System.out.println(value);
    //拓展一下:通过reuqest对象调用getWriter得到PrintWriter对象,
    //我们可以利用这个来响应ajax,定义一个字符串通过PrintWriter调用print方法来将字符串发送给ajax
        PrintWriter prin = response.getWriter();
        String massge = "Success!";
        prin.print(massge);
    }

}
jsp用Ajax提交表单并显示结果(一) 1.代码业务:页面填写用户名和书号,提交,显示借阅结果,如果借阅不成功显示不成功原因,如果成功,显示借阅信息(读者号,书号,借书日期,应还日期) 2.首先,在基础mvc中,我在jsp页面用Ajax实现表单提交,传给sevlet的post方法,借阅的过程是用的存储过程borrow写的。 3.由于ajax传表单后台返回的数据必须是json格式的,所以,在基础版MVC,使用JSON.fromObje 阅读详情

相关推荐

【Jsp】Ajax提交数据不刷新页面

传统的网页基本都是通过get或者post提交数据,但是一旦提交,本页面就被刷新了,即便提交到本页面,原本用户修改的数据就被清空了,这个场景在用户注册时,体验是很糟糕的。 Ajax为此而生,它可以提交数据,而不刷新页面,甚至可以更新局部信息,以下用实例来讲解。 Ajax使用JavaScript来实现,不仅在Jsp中可用,PHP、Asp.Net中同样可以用 先建立一个接收数据的servlet,名...

beatfan的博客 5882

Struts2实现文件上传报错(一)

1、具体报错如下 2014-5-1 23:02:38 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() for servlet [jsp] in context with path [/UploadFile] threw exception [An exception occurred pro...

牛栏山矿泉水 240

Servlet提交数据

数据提交的html文件涵盖jquery框架对AJAX支持的,因此需要了解利用此框架提交AJAX请求和后端进行数据交互。 基本的提交AJAX请求格式,有get和post方式: $.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开 第一个参数 url:(统一资源定位符)——page 表示访问的是page页面 第二个参数 data:(数据) 格式——{name:value} 表示提交的参数 第三个参数 success:成功响应—— function(){} 表示服务

yooppa的博客 437

Ajax 发送数据到 Servlet

本文介绍了 Ajax 发送数据到 Servlet 的相关内容。。。

Regino的博客 1725

LT9611EX芯片实战:如何用双端口MIPI转HDMI1.4打造高清播放器(附配置代码)

本文详细介绍了如何使用龙迅半导体的LT9611EX芯片实现双端口MIPI转HDMI1.4的高清播放器开发。内容涵盖芯片特性、硬件设计要点、寄存器配置技巧及完整代码实现,特别适合嵌入式视频处理应用,如机顶盒和便携式媒体播放器。

weixin_29256771的博客 321

SkyWalking跨线程Trace传递实战:手把手教你用RunnableWrapper解决异步链路中断问题

本文深入解析了SkyWalking在异步编程场景下链路追踪中断的根源,并提供了使用RunnableWrapper等官方包装类的实战解决方案。通过详细的原理解析和代码示例,手把手指导开发者如何实现跨线程的Trace传递,确保分布式系统监控链路的完整性,有效解决异步任务导致的链路中断问题。

sand8的博客 493

使用Ajax+Servlet访问MySQL数据库实现简易搜索框

最近在准备研究生复试的时候偶然看到关于Ajax技术的一篇文章,故也想来小试牛刀看看到底是怎么一回事这一段我就直接copy网上的介绍了,省得码字什么是Ajax:Ajax(Asynchronous Javascrpt And Xml)是一种运用于浏览器的技术,它可以在浏览器与服务器之间使用异步通信机制进行数据通信,从而允许浏览器向服务器获取少量信息而不是刷新整个页面。Ajax并不是一种新的技术,或者说...

飞奔的菜猪的博客 2965

5分钟快速验证lvgl界面:VScode模拟器极简配置法(免环境变量版)

本文介绍了一种5分钟快速验证LVGL界面的极简配置方法,使用VSCode模拟器免环境变量配置,适合UI设计师和产品经理快速预览界面效果。通过预编译的SDL2库和配置好的VSCode工程模板,实现开箱即用的LVGL界面验证,大幅提升工作效率。

weixin_30790841的博客 314

jQuery中的Ajax

(1)$ajax()方法 作用:发送ajax请求 $.ajax({ // 请求方式 type: 'get', // 请求地址 url: 'http://localhost:3000/base', // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response);

cake_eat的博客 328

AlphaFold3实战:用它预测抗体结构,我的CDR H3环RMSD降到了2Å以内

本文详细介绍了如何利用AlphaFold3(AF3)高精度预测抗体结构,特别是CDR H3环的建模,其RMSD可降至2Å以内。通过实战演示从序列输入到结构优化的全流程,包括参数配置、置信度指标解读及结果分析,帮助研究人员快速掌握AF3在抗体药物研发中的应用。

weixin_29224529的博客 187

NRF52832调试方法1——HardFault_Handler问题定位

一、遇到问题 keil debug模式下,直接点击全速运行(Run)发现程序卡死,点击stop按钮后,停到了HardFault_Handler位置,如下图所示。 此时使用navigate backwards(蓝色左箭头)是无效的,找不到程序卡在哪里。 二、解决办法 此时首先观察register窗口 若Stack为MSP,则复制R13(SP)的值到memory观察窗的地址搜索栏。每一行显示连续的28个地址上的存储信息,每个地址上存有一个字节。 从第21个位置起的连续四个字节是LR的值,

小梁的博客 3650

学习笔记——javaweb+ajax+servlet

学习笔记(一)——Java+ajax+servlet 前台 表单的提交 表单的Action提交,提交按钮类型submit &lt;form id="modifyForm" action="Actioncontroller.do?action=login" method="post"&gt; &lt;input id="test" name="test" type=&

qq_40634383的博客 286

基于OSEK_TP.dll封装通用,多ECU自由切换的诊断函数库

本文介绍了基于CANoe内置OSEK_TP.dll库实现通用诊断通讯的方法。通过封装CAN_TP.cin顶层脚本,实现了ECU连接管理、数据收发和多ECU切换功能。系统采用字典结构存储ECU参数,支持从配置文件读取诊断ID等配置信息,通过TpCreateConnection建立TP层连接。文章详细说明了诊断请求发送函数Uds_DiagSendRequest的实现逻辑,以及如何利用回调函数处理收发事件。该方法无需依赖诊断数据库,通过底层封装实现了灵活高效的诊断通讯方案,适用于车载诊断领域的测试需求。

蚂蚁小兵 1565

form表单提交数组java,表单form的提交和servlet的取值

表单form的提交和servlet的取值一、前言对于后端开发来说,经常要和前端进行联系的两个面就是:1、表单form提交至servlet。2、ajax提交至servlet进行处理。显然,有必要对这两个常用的功能进行一次梳理。1、一个中文乱码的坑在表单传值和后台进行交流的时候,一个最大的坑就是中文的乱码问题了。这个坑的具体分析不过多阐述,最佳实践就是: 使用post 方式进行数据的提交,后台设置字符...

weixin_36282765的博客 931

【异常】Claude Code CLI 模型调用异常 There‘s an issue with the selected model (claude-sonnet-4-6). It may not

摘要: Claude Code CLI v2.1.45版本存在适配缺陷,导致调用claude-sonnet-4-6模型时触发"模型不存在"的误报错误(跨Windows/Linux平台)。该问题为版本回归类异常,非模型或账户权限问题。解决方案包括:1) 校验模型名称格式为claude-sonnet-4-6;2) 降级至v2.1.34或等待官方修复;3) 检查API配置有效性;4) 通过CLI交互界面手动选择模型;5) 临时切换同系列可用模型。官方已确认该bug并将发布修复版本。

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

【漏洞复现】用友U9 UMWebService.asmx 任意文件读取漏洞

用友U9存在任意文件读取漏洞,未授权的攻击者可以通过该漏洞读取服务器任意文件,造成敏感信息泄露。

qq_67810151的博客 620

Checkbox框全选操作,form表单提交与jquery ajax提交两种处理方式

//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $("#basePath").val(); //上架操作 $("#upAll").click(function(){ ...

dfsafsd32323的博客 167

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

ajax提交数据给谁,jquery ajax提交数据给后端

大家好,今天铁柱兄给大家带一段jquery ajax提交数据给后端的教学。初学javaweb的同学前端提交数据基本上都是用form表单提交,这玩意儿反正我是觉得不太好玩。而JavaScript ajax写一大堆,看着都头痛。jquery ajax简单易懂容易学。废话不多说,上教程~新建一个Web项目,在\WebContent下新建一个index.jsp新建之后不用慌,默认的jsp编码得改一下,我这...

weixin_35406812的博客 604

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Jquery ajax 提交表单Demo

用jquery的ajax 异步提交表单数据demo, 导入相关的两个jquery的js包。   index.html [html] view plaincopy html>   head>       script type ="text/javascript" src="jquery.js">script>       scri

javaWeb 3566

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理 .

使用Ext.Ajax.request提交数据的代码如下(这段代码在一个Js文件中,为避免中文乱码,js文件必须是utf-8编码): Javascript代码 "text/javascript">   Ext.Ajax.request({

xiancaifu的专栏 5128

用Ajax方式提交数据给servlet

Jsp页面 <input type="text" name="root" id="go"> <input type="password" name="pass" id="to"> <p id="diao">点我</p> <script src="../css/JQuery.js"></script>//导入文件 <script type=

lican_2017的博客 1165

Servlet如何接收ajax提交的数组

在做Servlet项目过程中,遇到了一个需求,就是如何批量删除数据, 顾名思义,批量就是把多条数据同时删掉,那么这个时候,我们要把需要删除的数据提交到后台中,就需要把多条数据的主键id放到一个数组中,然后提交到servlet中进行处理,那么我们怎样把数组提交到servlet中呢? 刚刚开始我是用post提交过去的,用post提交必须要把数组转成字符串的格式才能提交,如果不转成字符串格式会序列化数据...

锦鲤(⑉°з°)--♡的博客 1002

前后端交互技术之servlet与form表单提交请求及ajax提交请求

1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body&...

weixin_30764137的博客 425

第一个ajax小例子

请求的按钮 <div style="text-align: center"> <input type="submit" onclick="loadName()" value="ajax提交"/> </div> 写好触发的方法 <script type="text/javascript"> function loadName(){ v...

weixin_45240705的博客 150

ajax与servclet后台交互

ajax与servlet交互一、简单例子1、前端ajax和 后台交互的例子:2、效果:二、ajax详解: 一、简单例子 1、前端ajax和 后台交互的例子: 前台页面输入信息,使用ajax提交后台,在前端页面不刷新的情况下,完成任务提交,后台返回结果传输到前台。 前端页面 &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF...

mmayanshuo的博客 1735
上一篇: Mybatis动态SQL
下一篇: mybatis逆向工程
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值