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 将元素显示在屏幕的中央的代码
Feb 27 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
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
Smarty模板类内部原理实例分析
2019/07/03 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python对json的相关操作实例详解
2017/01/04 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
django跳转页面传参的实现
2020/09/17 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
业务代表的岗位职责
2013/11/16 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
农业开发项目建议书
2014/05/16 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers