zoukankan      html  css  js  c++  java
  • Ajax异步提交表单数据简单方法

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

    输入处理结果即可。

  • 相关阅读:
    Nginx+uWsgi+Django+Python+MongoDB+mySQL服务器搭建
    Scott Guthrie's Blog on ASP.NET
    NPOI 读写excel
    用C#开发了一个Android 浏览器APP
    Windows 8 应用开发技术资源
    微软发布Sample Browser for Windows 8版:5000示例代码,"触手可及"
    依赖注入
    DIY 一套正版、免费、强大的 Visual Studio 2012 IDE
    基于JQuery EasyUI、Web Api的 ASP.NET MVC 代码生成插件
    深度剖析Byteart Retail案例:AOP 异常处理与缓存
  • 原文地址:https://www.cnblogs.com/qingzhouyi/p/3140705.html
Copyright © 2011-2022 走看看