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显示选择目录对话框的代码
Nov 10 Javascript
javascript 冒号 使用说明
Jun 06 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
详解python中递归函数
2019/04/16 Python
用python发送微信消息
2020/12/21 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
学校消防演习方案
2014/02/19 职场文书
环境建设实施方案
2014/03/14 职场文书
爱情保证书大全
2014/04/29 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python