> web前端 > JavaScript > 正文 Ajax异步提交表单数据简单方法 2012-09-08            作者：tsyj810883979    我要投稿 场景描述：
对于一个登录页面中有一个登录的表单，但是由于登录验证逻辑比较复杂，我们希望点击登录后不刷新当前页面，给出登录结果后再选择是跳到新的页面还是提示用户名密码错误。类似这样的问题很多很多。异步获取数据使用户体验大大增强。
背景知识：
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，因特网应用程序可以变得更完善，更友好。
具体用法：
[javascript] 
<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中需要做的处理是：
[java] 
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(); 
} 
输入处理结果即可。

 
 
 
  点击复制链接 与好友分享!回本站首页 上一篇：jquery 进度条 下一篇：如何为现有网站添加Ajax Web窗体 相关文章

通过PHP和Sajax使用Ajax之JavaScript

ajax实例01

ajax实例01

javascript ajax

Ajax在请求和响应中使用XML示例

div弹出层的ajax登录（Jquery版）

jQuery - Ajax解决跨域问题

简单的前端js+ajax 购物车框架(入门篇

非ajax提交页面不跳转，java调用javas

Ajax XMLHttp 对象的获取