Ajax异步提交表单数据的说明及方法实例


Posted in Javascript onJune 22, 2013

场景描述:
对于一个登录页面中有一个登录的表单,但是由于登录验证逻辑比较复杂,我们希望点击登录后不刷新当前页面,给出登录结果后再选择是跳到新的页面还是提示用户名密码错误。类似这样的问题很多很多。异步获取数据使用户体验大大增强。
背景知识:
Ajax指的是异步JavaScript及XML(Asynchronous JavaScript And XML)。
AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的
 Web 应用程序的技术。通过AJAX,您的JavaScript 可使用JavaScript 的XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象,您的JavaScript 可在不重载页面的情况与Web 服务器交换数据。AJAX
 在浏览器与Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX 可使因特网应用程序更小、更快,更友好。AJAX
 是一种独立于Web 服务器软件的浏览器技术。 AJAX 基于下列Web 标准:JavaScript XML HTML CSS 在AJAX 中使用的Web 标准已被良好定义,并被所有的主流浏览器支持。AJAX 应用程序独立于浏览器和平台。Web
 应用程序较桌面应用程序有诸多优势;它们能够涉及广大的用户,它们更易安装及维护,也更易开发。 不过,因特网应用程序并不像传统的桌面应用程序那样完善且友好。
 通过AJAX,因特网应用程序可以变得更完善,更友好。
具体用法:

<script type="text/javascript"> 
(function(){ 
    jQuery('#loginForm').click( 
        function() { 
            jQuery('#tips').html("正在登录....."); 
            jQuery.post( 
                <span style="white-space:pre">      </span>'login.action', 
                <span style="white-space:pre">      </span>{ 
                   <span style="white-space:pre">           </span>"username":jQuery('#username').val(), 
                   <span style="white-space:pre">           </span>"password":jQuery('#password').val() 
                <span style="white-space:pre">      </span>}, 
                <span style="white-space:pre">      </span>function(result) { 
                    jQuery('#tips').html(result); 
                <span style="white-space:pre">      </span>}, 
                <span style="white-space:pre">      </span>"json" 
             <span style="white-space:pre">     </span>); 
        } 
    ); 
})(); 
</script>

post方法中有四个参数。
第一个是url地址,在struts2中,我们只需要提交给对应的action即可,或者指定方法。对于webx,我们需要这样写url地址login.htm?action=user_login&event_submit_do_user_login=any
第二个是参数列表,你要提交的数据,以键值对形式提交。
第三个参数是结果处理函数,那么结果将从result中取出。
第四个参数是数据返回格式。
那么action或者screen中需要做的处理是:
HttpServletResponse response = rundata.getResponse(); 
response.setContentType("application/json"); 
PrintWriter out; 
try { 
    out = response.getWriter(); 
    String result = (String) context.get("result"); 
    JSONObject json = new JSONObject(); 
    json.put("result", result); 
    out.print(json); 
    out.flush(); 
} catch (IOException e) { 
    e.printStackTrace(); 
}

输入处理结果即可。
Javascript 相关文章推荐
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
js style动态设置table高度
Oct 21 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
KnockoutJs快速入门教程
May 16 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
javascript实现画板功能
Apr 12 Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 #Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 #Javascript
js写一个字符串转成驼峰的实例
Jun 21 #Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue中轮训器的使用
2019/01/27 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python实现扫描日志关键字的示例
2018/04/28 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
综合办公室主任职责
2013/12/16 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
入党积极分子个人总结
2015/03/02 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python