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(
'login.action',
{
"username":jQuery('#username').val(),
"password":jQuery('#password').val()
},
function(result) {
jQuery('#tips').html(result);
},
"json"
);
        } 
    ); 
})(); 
</script>

jQuery.post参数详解

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

输入处理结果即可。