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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
基于jquery实现人物头像跟随鼠标转动
Aug 23 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
php数据库配置文件一般做法分享
2012/07/07 PHP
php GUID生成函数和类
2014/03/10 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php发送邮件的问题详解
2015/06/22 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python with (as)语句实例详解
2020/02/04 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
党员评议个人总结
2014/10/20 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
详解Python牛顿插值法
2021/05/11 Python