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 原型继承介绍
Aug 30 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
类的另类用法--数据的封装
2006/10/09 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php输出1000以内质数(素数)示例
2014/02/16 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
JQuery获取表格数据示例代码
2014/05/26 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python正则表达式之作业计算器
2016/03/18 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
HTML5新增加标签和功能概述
2016/09/05 HTML / CSS
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
MySQL面试题目集锦
2016/04/14 面试题
出纳岗位职责范本
2013/12/01 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
行为规范主题班会
2015/08/13 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
python如何在word中存储本地图片
2021/04/07 Python
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript