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,//服务器要接受的urlparams,//传递的参数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"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;}@Overridepublic 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添加一条数据，记录一下页面传过来loginNamemap.put("name", loginName);map.put("password",password);map.put("mes", "成功啦！");map.put("list", list.toString());// 将要返回的map对象进行json处理JSONObject jo = JSONObject.fromObject(map);// 调用json对象的toString方法转换为字符串然后赋值给resultresult = jo.toString();// 可以测试一下resultSystem.out.println(this.result);return SUCCESS;}}
页:
[1]