struts2+json+jquery

project架构



 1.web.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
 <display-name>SSI</display-name>
 <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>/WEB-INF/classes/config/spring*.xml</param-value>
 </context-param>
 <filter>
  <filter-name>struts</filter-name>
  <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
 </filter>
 <filter-mapping>
  <filter-name>struts</filter-name>
  <url-pattern>*.action</url-pattern>
 </filter-mapping>
</web-app>

 2.struts.xml的配置

<!DOCTYPE struts PUBLIC  "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
	<include file="struts-default.xml"/>
	<package name="default" extends="struts-default,json-default" namespace="/">
		<action name="saveUserAccount" class="com.lixueli.business.action.UserAccountAction" method="saveUserAccount">
			<result type="json">  
                <!-- root的值对应要返回的值的属性 -->  
                <!-- 这里的result值即是 对应action中的 result -->  
                <param name="root">result</param>  
            </result>  
		</action>
	</package>
	
</struts>

 

3.action代码

package com.lixueli.business.action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.lixueli.business.model.UserAccount;
import com.lixueli.business.service.UserAccountService;
import com.lixueli.common.action.BaseAction;

public class UserAccountAction extends BaseAction {
	private static final long serialVersionUID = 1L;
	private UserAccountService userAccountService;//依赖注入
	private String result;

	public void setUserAccountService(UserAccountService userAccountService) {
		this.userAccountService = userAccountService;
	}

	public String getResult() {
		return result;
	}

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

	public String saveUserAccount() {
		boolean flag = false;
		UserAccount userAccount = new UserAccount();

		userAccount.setUsername(getParameter("username"));
		userAccount.setPassword(getParameter("password"));
		userAccount.setGroupname("computer");
		flag = userAccountService.saveUserAccount(userAccount);
		Map<String, String> map = new HashMap<String, String>();   
		if(flag == true){
			map.put("message", "保存成功!");   
		}else{
			map.put("message", "保存失败!");  
		}
		
        map.put("password","lixueli");  
		JSONObject jo = JSONObject.fromObject(map);
		this.result=jo.toString();
		if (flag == true) {
			return SUCCESS;
		} else {
			return INPUT;
		}
	}
}

 4.addUserAccount.jsp

<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="GBK"%>
<!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=gbk">
<title>添加信息</title>
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="addUserAccount.js"></script>
</head>
<body>
<form>
 <table>
   <tr>
      <td>姓名</td>
      <td><input type="text" name="username"/></td>
   </tr>
   <tr>
      <td>地址</td>
      <td><input type="text" name="password"/></td>
   </tr>
   <tr>
      <td colspan="2"><input id="save" type="button" value="提交"/></td>
   </tr>
 </table>
</form>
<div id="message"></div>
</body>
</html>

 

5.adduseraccount.js

$(document).ready(function(){

  var save_btn=$("#save");
  save_btn.click(function(){
  	var action="/SSI/saveUserAccount.action";
  	var username=$("input[name=username]:text").val();
  	var password=$("input[name=password]:text").val();
  	var data="username="+username+"&password="+password;
    saveUserAccount(action,data);
  });
});

function saveUserAccount(action,data){
	var message=$("#message");
	$.ajax({
		type : 'post',
		url : action,
		data : data,
		dataType : 'json',
		success : function(returndata) {
		  var info = eval("("+returndata+")");   
		   message.html(info.message);
		},
		error : function() {
		  message.html("保存失败!");
		}
	});
}

 6.$.getJSON

	$.getJSON(action,data,function(returndata){
//	    var info =$.evalJSON(returndata);// jQuery 插件把json转化为javascript对象 Converts from JSON to Javascript
//        var obj = jQuery.parseJSON('{"name":"John"}');
//        alert( obj.name === "John" );
		 var info=$.parseJSON(returndata);//Takes a well-formed JSON string and returns the resulting JavaScript object.
	     message.html(info.message);
	     var list=info.list;
	     $.each(list,function(i,useraccount){
	     	alert(useraccount.password);
	     });
	     
	})

 7.$.post

//	$.post(action,data,function(returndata){
//	    var info = eval("("+returndata+")");
//	    message.html(info.message);
//	},"json")

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值