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判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
ant-design表单处理和常用方法及自定义验证操作
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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
Three.js学习之网格
2016/08/10 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
js实现简单的秒表
2020/01/16 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
介绍一下#error预处理
2015/09/25 面试题
专科毕业生就业推荐信
2013/11/01 职场文书
酒店管理专业毕业生推荐信
2013/11/10 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript