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] view plain copy

<script type=”text/javascript”>
(function(){
jQuery(‘#loginForm’).click(
function() {
jQuery(‘#tips’).html(“正在登录…..”);
jQuery.post(
’login.action’,
{
”username”:jQuery(‘#username’).val(),
”password”:jQuery(‘#password’).val()
},
function(result) {
jQuery(‘#tips’).html(result);
},
”json”
);
}
);
})();
</script>

post方法中有四个参数。

第一个是url地址，在struts2中，我们只需要提交给对应的action即可，或者指定方法。对于webx，我们需要这样写url地址login.htm?action=user_login&event_submit_do_user_login=any

第二个是参数列表，你要提交的数据，以键值对形式提交。

第三个参数是结果处理函数，那么结果将从result中取出。

第四个参数是数据返回格式。

那么action或者screen中需要做的处理是：

[java] view plain copy

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();
}

输入处理结果即可。

contentType有很多种格式，可以参考http://sin90lzc.iteye.com/blog/892162

本文链接地址: Ajax异步提交表单数据简单方法http://www.hongyanliren.com/2015m01/30091.html

红颜丽人

追求技术就像追求#$！不抛弃，不放弃！

Ajax异步提交表单数据简单方法

相关文章