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 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 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
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js不是基础的基础
2006/12/24 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
在Vue中使用Compass的方法
2018/03/02 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
python控制台中实现进度条功能
2015/11/10 Python
python基础练习之几个简单的游戏
2017/11/10 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python常用的json标准库
2019/02/19 Python
python数据化运营的重要意义
2019/11/25 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
元旦获奖感言
2014/03/08 职场文书
大学学风建设方案
2014/05/04 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL