jquery ajax 如何向jsp提交表单数据


Posted in Javascript onAugust 23, 2015

AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者,当然我也要 “随波逐流”一把,不然饭碗不保啊!

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了 Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

ajax技术带给我们的是良好的用户体验,同时,使用jquery可以简化开发,提高工作效率。

下面介绍一下大致的开发步骤。

本文使用的是 jquery-1.3.2.min.js开发工具。

新建两个页面:

1、show.jsp:调用ajax,将表单中的数据发送给ajax.jsp页面。

2、ajax.jsp:获取show.jsp页面传递的表单数据,并返回结果。

两个页面的编码格式要设置为GBK:

<%@ page contentType="text/html;charset=GBK"%>

show.jsp页面的重点部分:

1、添加对 jquery-1.3.2.min.js 的引用:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

2、设置表单的id,在调用ajax的方法时要用到。

<form id="ajaxFrm" >

3、设置一个div,用于显示ajax.jsp页面返回的结果

<div id="ajaxDiv"></div>

4、增加一个按钮,用来调用ajax

<input type="button" onClick="doFind();" value="调用一下ajax" >

5、增加调用ajax的函数:

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败!");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}

ajax.jsp页面的源代码:

<%@ page contentType="text/html;charset=GBK"%>

<%

String userName = request.getParameter("UserName");

if(userName!=null){

userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

}

String returnString = "";

returnString="你好," + userName;

out.print(returnString);

%>

运行效果如下:

jquery ajax 如何向jsp提交表单数据

jquery ajax 如何向jsp提交表单数据

jquery ajax提交表单从action传值到jsp

jsp页面:

代码如下:

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
});

acion类:

代码如下:

HttpServletResponse res = ServletActionContext.getResponse(); 
res.reset(); 
res.setContentType("text/html;charset=utf-8"); 
PrintWriter pw = res.getWriter(); 
pw.print(random); 
pw.flush(); 
pw.close();

pw.print(random);这里的random就是action要向jsp传的值,在jsp中,success: function(text)这里的text就是接收从action传过来的值。

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
HTML的select控件美化
Mar 27 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 #Javascript
javascript中Array()数组函数详解
Aug 23 #Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 #Javascript
js实现的二级横向菜单条实例
Aug 22 #Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 #Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 #Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 #Javascript
You might like
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
Bootstrap3制作图片轮播效果
2016/05/12 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
建材业务员岗位职责
2013/12/08 职场文书
教师自荐信范文
2013/12/09 职场文书
校园之声广播稿
2014/01/31 职场文书
寄语十八大感言
2014/02/07 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
党员一句话承诺大全
2014/03/28 职场文书
优秀家长自荐材料
2014/08/26 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
毕业实习感受与体会
2015/05/26 职场文书
运动员入场词
2015/07/18 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫