• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery ajax 如何向jsp提交表单数据

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

作者:永远爱学习 字体:[增加 减小] 来源:互联网

永远爱学习 通过本文主要向大家介绍了jquery_ajax提交表单,jquery的ajax提交表单,jquery_ajax表单验证等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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技术提交表单数据

Jquery技巧:使用ajax技术提交表单数据

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传过来的值。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jquery validate和jquery form 插件组合实现验证表单后AJAX提交
  • jquery ajax 如何向jsp提交表单数据

相关文章

  • jQuery遍历Table应用示例
  • jQuery中的deferred使用方法
  • jquery实现图片上传前本地预览
  • jquery自定义类似$.ajax()的方法实现代码
  • jquery怎样实现ajax联动框(二)
  • jQuery新闻滚动插件 jquery.roller.js
  • jquery isType() 类型判断代码
  • jquery1.4 教程一 便利的设置函数
  • JQuery datepicker 使用方法
  • 基于cookie实现zTree树刷新后展开状态不变

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 聊一聊jQuery插件uploadify使用方法
    • 基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
    • jQuery中prevUntil()方法用法实例
    • jQuery动态添加的元素绑定事件处理函数代码
    • JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
    • Jquery动态改变图片IMG的src地址示例
    • JQuery Mobile 弹出式登录框的实现方法
    • 在jquery中combobox多选的不兼容问题总结
    • jQuery实现鼠标单击网页文字后在文本框显示的方法
    • 设置jquery UI 控件的大小方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有