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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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 和 HTML
2006/10/09 PHP
PHP URL路由类实例
2013/11/12 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript this详细介绍
2016/09/19 Javascript
vue移动UI框架滑动加载数据的方法
2018/03/12 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
历史专业个人求职信分享
2013/12/20 职场文书
前处理班长职位说明书
2014/03/01 职场文书
供货协议书
2014/04/22 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
2015国庆节宣传语
2015/07/14 职场文书
运动会入场词
2015/07/18 职场文书
教师反邪教心得体会
2016/01/15 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis