脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Ajax异步提交表单数据

Ajax异步提交表单数据的说明及方法实例

 更新时间：2013年06月22日 11:27:39   作者：  
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，因特网应用程序可以变得更完善，更友好。
具体用法：

复制代码 代码如下:

<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实现分页效果

    JavaScript实现分页效果

    本文主要介绍了JavaScript实现分页效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Object.defineProperty()函数之属性描述对象

    Object.defineProperty()函数之属性描述对象

    这篇文章主要介绍了Object.defineProperty()函数之属性描述对象，JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为:属性描述对象
    2022-09-09
  • jquery删除ID为sNews的tr元素的内容

    jquery删除ID为sNews的tr元素的内容

    这篇文章主要介绍了删除ID为sNews的索引为JQID的tr元素里的内容,需要的朋友可以参考下
    2014-04-04
  • JS去除右边逗号的简单方法

    JS去除右边逗号的简单方法

    这篇文章介绍了JS去除右边逗号的简单方法，有需要的朋友可以参考一下
    2013-07-07
  • JS实现简单的键盘打字的效果

    JS实现简单的键盘打字的效果

    本文给大家分享的是使用javascript实现的简单的键盘打字效果，十分的简单实用，推荐给有需要的小伙伴参考下。
    2015-04-04
  • javascript cookie的基本操作（添加和删除）

    javascript cookie的基本操作（添加和删除）

    这篇文章主要介绍了javascript cookie的基本操作的相关资料,这里对Cookie的操作进行了详细介绍包括获取，新建，设置有效期，添加和删除等，需要的朋友可以参考下
    2017-07-07
  • JavaScript常见JSON操作实例分析

    JavaScript常见JSON操作实例分析

    这篇文章主要介绍了JavaScript常见JSON操作,简单描述了json的概念、常见json类型,并结合实例形式分析了json的序列化、转换、格式化、解析等相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • 微信小程序中如何计算距离某个节日还有多少天

    微信小程序中如何计算距离某个节日还有多少天

    这篇文章主要给大家介绍了关于微信小程序中如何计算距离某个节日还有多少天的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • 使用原生js封装的ajax实例(兼容jsonp)

    使用原生js封装的ajax实例(兼容jsonp)

    下面小编就为大家带来一篇使用原生js封装的ajax实例(兼容jsonp)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)

    搞定js的加密和压缩，一方面可以提高页面加载性能，另外一方面也希望辛苦研发出来的成果得到一定的保护,感兴趣的朋友可以了解下，或许对你有所帮助
    2013-01-01

最新评论