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生成SQL查询表单的方法
Aug 13 Javascript
json传值以及ajax接收详解
May 24 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
Oct 14 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 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读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
python匹配两个短语之间的字符实例
2018/12/25 Python
ubuntu上安装python的实例方法
2019/09/30 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
自我评价的写作规则
2014/01/06 职场文书
《在家里》教后反思
2014/03/01 职场文书
市场营销策划方案
2014/06/11 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL