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实现控制台控件的代码
Sep 04 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 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与SQL注入攻击防范小技巧
2011/09/16 PHP
第五章 php数组操作
2011/12/30 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JavaScript 匿名函数和闭包介绍
2015/04/13 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
Node.js简单入门前传
2017/08/21 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
2018/08/27 Javascript
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
解决Mac下使用python的坑
2019/08/13 Python
python实现猜拳小游戏
2020/04/05 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
实习教师自我鉴定
2013/12/09 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
早读迟到检讨书
2014/01/24 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
授权委托书格式模板
2014/04/03 职场文书
施工安全生产承诺书
2014/05/23 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS