jQuery中的ajax学习

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	<script type="text/javascript">		
	$(document).ready(function(){
		$("#btn_login").click( function() {
			var loginName=$("#loginName").val();
			var password=$("#password").val();
			$.ajax({            
				type: "POST",            
				dataType: "json",            
				url: 'ajaxLogin',
				data:  'loginName='+loginName+'&password='+password,         
				success: function(data) {
					alert(data);
				}
			});
		});
/**		//使用 Ajax 的方式 判断登录
		$("#btn_login").click( function() {
			var url = 'ajaxLogin';
			//获取表单值,并以json的数据形式保存到params中
			var params = {
				loginName:$("#loginName").val(),
				password:$("#password").val(),
			}
			//使用$.post方式	
			$.post(
				url,		//服务器要接受的url
				params,		//传递的参数	
				
				function cbf(data){	//服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
					alert(data);
					var member = eval("("+data+")");	//包数据解析为json 格式  
					$('#result').html("欢迎您:  "+member.name+"<br>您的密码是:"+member.password);
				},
				'json'	//数据传递的类型  json				   
			);
		});*/
	});
	
</script>
	</head>
	<body>
		<center>
		<table>
		<tr>
		<td>
		<span>用户名:</span>
		</td>
		<td>
		<input type="text" id="loginName" name="loginName">
		</td>
		</tr>
		<tr>
		<td>
		<span>密码:</span>
		</td>
		<td>
		<input type="password" name="password" id="password">
		</td>
		</tr>
		<tr>
		<td colspan="2">
		<input type="button" id="btn_login" onclick="check()" value="Login" />
		</td>
		</tr>
		</table>
		<p>
			这里显示ajax信息:
			<br />
			<span id="result"></span>
		</p>
		</center>
	</body>
</html>

 

 

struts.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<package name="default" extends="json-default">
		<action name="ajaxLogin" class="AjaxLoginAction">
			<!-- 返回类型为json 在json-default中定义 -->
			<result type="json">
				<!-- root的值对应要返回的值的属性 -->
				<!-- 这里的result值即是 对应action中的 result -->
				<param name="root">result</param>
			</result>
		</action>
	</package>
</struts>    

 

AjaxLoginAction.java:

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxLoginAction extends ActionSupport {

	// 用Ajax返回数据
	private String result;
	// struts的属性驱动模式,自动填充页面的属性到这里
	private String loginName;
	private String password;

	public String getResult() {
		return result;
	}


	public void setResult(String result) {
		this.result = result;
	}


	public String getLoginName() {
		return loginName;
	}


	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}


	public String getPassword() {
		return password;
	}


	public void setPassword(String password) {
		this.password = password;
	}


	@Override
	public String execute() {

		System.out.println("------------");
		List list=new ArrayList();
		list.add(0, "huhu");
		list.add(1, "33");
		// 用一个Map做例子
		Map<String, String> map = new HashMap<String, String>();

		// 为map添加一条数据,记录一下页面传过来loginName
		map.put("name", loginName);
		map.put("password",password);
		map.put("mes", "成功啦!");
		map.put("list", list.toString());

		// 将要返回的map对象进行json处理
		JSONObject jo = JSONObject.fromObject(map);

		// 调用json对象的toString方法转换为字符串然后赋值给result
		result = jo.toString();

		// 可以测试一下result
		System.out.println(this.result);

		return SUCCESS;

	}

}

 

public String myData(){
	System.out.println("************");
	User user=new User();
	user.setId(11);
	user.setName("hhkk");
	List<User> list=new ArrayList();
	list.add(user);
	System.out.println(list);
	Map<String, Object> map = new HashMap<String, Object>();
	map.put("user", list);
	map.put("haha", "哈哈");
	JSONObject jo = JSONObject.fromObject(map);   
	result=jo.toString();
	System.out.println(result);
	return SUCCESS;
}

 

 

你可能感兴趣的:(jquery,Ajax)