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 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
Linux CentOS系统下安装node.js与express的方法
Apr 01 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
angular学习之动态创建表单的方法
Dec 07 Javascript
vue在线动态切换主题色方案
Mar 26 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
基于empty函数的输出详解
2013/06/17 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS+Canvas 实现下雨下雪效果
2016/05/18 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
vue组件间通信解析
2017/03/01 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
vue实现浏览器全屏展示功能
2019/11/27 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
python实现简单成绩录入系统
2019/09/19 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
英语自荐信范文
2013/12/11 职场文书
索桥的故事教学反思
2014/02/06 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS
python缺失值填充方法示例代码
2022/12/24 Python