手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Ajax异步提交表单数据的说明及方法实例
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> </span>'login.action',

<span> </span>{

<span> </span>"username":jQuery('#username').val(),

<span> </span>"password":jQuery('#password').val()

<span> </span>},

<span> </span>function(result) {

jQuery('#tips').html(result);

<span> </span>},

<span> </span>"json"

<span> </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();

}

输入处理结果即可。

【Ajax异步提交表单数据的说明及方法实例】相关文章:

js兼容火狐显示上传图片预览效果的方法

JS实现定时自动关闭DIV层提示框的方法

AngularJs中route的使用方法和配置

jQuery获得字体颜色16位码的方法

JS实现两表格里数据来回转移的方法

JavaScript获取两个数组交集的方法

js实现顶部可折叠的菜单工具栏效果实例

Jquery解析json字符串及json数组的方法

Jquery实现动态切换图片的方法

js+html5实现canvas绘制简单矩形的方法

精品推荐
分类导航