Ajax异步提交表单数据简单方法_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 3419 | 回复: 0   主题: Ajax异步提交表单数据简单方法        下一篇 
zxl1990
注册用户
等级:上尉
经验:663
发帖:59
精华:1
注册:2012-12-19
状态:离线
发送短消息息给zxl1990 加好友    发送短消息息给zxl1990 发消息
发表于: IP:您无权察看 2012-12-19 13:09:38 | [全部帖] [楼主帖] 楼主

场景描述:
对于一个登录页面中有一个登录的表单,但是由于登录验证逻辑比较复杂,我们希望点击登录后不刷新当前页面,给出登录结果后再选择是跳到新的页面还是提示用户名密码错误。类似这样的问题很多很多。异步获取数据使用户体验大大增强。
背景知识:
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();
}


输入处理结果即可。




赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论