<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My JSP 'index.jsp' starting page</title><script type="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><SCRIPT type="text/javascript">$(document).ready(function(){$("#send").click(function(){var url = 'ajax.action'; //要請求的actionvar params = { //傳遞的參數username : $('#username').attr('value'), password : $('#password').attr('value')};jQuery.post(url, params, myfun, 'json'); //jquery提供的ajax函數,myfun為回呼函數, 'json'為返回的資料類型});function myfun(data){var msg = $("#msg");msg.html(data.msg).fadeIn();setTimeout(function(){msg.fadeOut();},1000);}})</SCRIPT><style type="text/css">#msg{width:300px; height:50px; border:1px solid red; font-weight:900; display:none; text-align:center;}</style></head><body>username:<input type='text' name='username' id="username" value="" /><br>password:<input type='password' name="password" id="password" value="" /><br /><input type="button" value="submit" id="send"/><br/><div id="msg"></div></body></html>
使用json,大概是能直接讀取action中屬性的值而不用想servlet中的out.print( ... )
package com.ajax.action;import com.opensymphony.xwork2.ActionSupport;public class AjaxAction extends ActionSupport {private String username;//為減少牌面,自行添加get,set方法private String password;private String msg;public String execute() {if(username.equals("admin") && password.equals("admin")){msg = "hello, login successfully";}else{msg = "login fail";}return "success";}}
然後在配置xml檔案,主要是設定result的type為json,跟前面.post()中的dataType對應,還有就是要繼承json-default
<package name="ajax" namespace="/" extends="json-default"><action name="ajax" class="com.ajax.action.AjaxAction"><result type="json"></result></action></package>