struts2,jquery ajaxForm 插件的使用--验证后提交

xiaojin21cen

浏览: 97108 次
性别:
来自: 北京

最近访客更多访客>>

liukp981

arthorwei

loadsave

heyongkui

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery json Struts JavaScript Ajax

<script type="text/javascript" src="<%=path%>/js/jquery.js">
</script>
		<script type="text/javascript" src="<%=path%>/js/jquery.form.js">
</script>
	</head>
	<body>
		<h3>
			struts2,jquery  ajaxForm插件的使用--验证后提交
		</h3>

		<form id="myForm" action=""
			method="post">
			名称：
			<input type="text" name="customer.name" id="name" value="" />
			<br />
			地址：
			<input type="text" name="customer.address" id="address" value="" />
			<br />
			自我介绍：
			<textarea name="customer.comment" id="comment"  ></textarea>
			<br />
			<input type="submit" id="test" value="提交" /><br />
			<input type="submit" onclick="btn()" value="提交2" />
			<br />
			<input type="button" onclick="sub()" value="提交Ajax" />
			<br />			
			<div id="output1"></div>
		</form>
		<script type="text/javascript">			
function sub() {
	var name = $("#name").attr("value");
	//var name=document.getElementById("name").value;
	alert(name);
	$.ajax( {
		url : "<%=path%>/test/test!submitt.action?customer.name=" + name,
		cache : false,
		success : function(json) {
			alert(json.name);
		}
	});
}
<%--
demo1
$(document).ready(function() {
	$('#myForm').ajaxForm( {
		// 声明 服务器返回数据的类型.
		dataType : 'json',
		success : processJson
	});
});--%>
<%---
demo2
$(document).ready(function() {
	$('#myForm').ajaxForm(options);
});
var options={
	url:"<%=path%>/test/test!submitt.action",
	dataType : 'json',
		success : processJson
};
--%>
function btn1(){
	$('#myForm').submit(function(){
		$(this).ajaxSubmit(options);
		return false;
	});
}
function btn2(){
	$('#myForm').ajaxForm(options);
}
function btn(){
	$('#myForm').ajaxForm({
		url:"<%=path%>/test/test!submitt.action",
		dataType : 'json',
		success : processJson
	});
}
var options={
	url:"<%=path%>/test/test!submitt.action",
	dataType : 'json',
	success : processJson
};
function processJson(json) {
	// 'data'是一个json对象，从服务器返回的.
	alert(json.name+"成功了");
}
alert("sdf");
</script>

	</body>
</html>

下面是PO

package po;

public class Customer {
	private String name;
	private String address;
	private String comment;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public String getComment() {
		return comment;
	}
	public void setComment(String comment) {
		this.comment = comment;
	}
}

下面是Action

package test;

import po.Customer;

import com.opensymphony.xwork2.ActionSupport;
public class CustomerAction extends ActionSupport {
	private static final long serialVersionUID = 1L;
	private Customer customer = new Customer();
	public String init() {
		return "init";
	}
	public String submitt() {
		System.out.println(customer.getName());
		System.out.println(customer.getAddress());
		System.out.println(customer.getComment());		
		return "checkPerson";
	}
	public Customer getCustomer() {
		return customer;
	}
	public void setCustomer(Customer customer) {
		this.customer = customer;
	}
	public static long getSerialversionuid() {
		return serialVersionUID;
	}

}

最后是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="test" namespace="/test" extends="struts-default,json-default">

		<action name="test" class="test.CustomerAction" method="init">
			<result name="init">/index.jsp</result>
			<result name="add">/ok.jsp</result>
			<result name="checkPerson" type="json">
				<param name="root">customer</param>
			</result>
		</action>
	</package>
</struts>