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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
利用javascript查看html源文件
Nov 08 Javascript
用js实现in_array的方法
Nov 05 Javascript
JavaScript实现的石头剪刀布游戏源码分享
Aug 22 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
vue实现打地鼠小游戏
Aug 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实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
EJB的基本架构
2016/09/22 面试题
医药销售自我评价200字
2014/09/11 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
小学教师岗位职责
2015/04/02 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
JavaScript分页组件使用方法详解
2021/07/26 Javascript
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python