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 相关文章推荐
JQuery 文本框使用小结
May 22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
Nov 07 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
vue中改变滚动条样式的方法
Mar 03 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
JS ES6异步解决方案
Apr 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
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php实现快速排序的三种方法分享
2014/03/12 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
小小聊天室Python代码实现
2016/08/17 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python实现猜拳游戏项目
2020/11/30 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
补充协议书范本
2014/04/23 职场文书
市场营销毕业求职信
2014/08/07 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
鸡毛信观后感
2015/06/11 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技