Struts2调整jquery利用json与后台交互
日期：2014-05-16 浏览次数：20360 次
Struts2整合jquery利用json与后台交互
Struts2整合jquery利用json与后台交互
总觉得写个实例更容易理解,这个例子是通过帐号密码查出一个类然后将一个实体类由json格式返回。
环境是由eclipse搭建
Json需要的包
commons-beanutils.jar
commons-collections-3.2.jar
commons-lang.jar
commons-logging-1.1.1.jar
ezmorph-1.0.3.jar
json-lib-2.1-jdk15.jar
struts2-json-plugin-2.2.1.1.jar
struts需要的包
…………
项目名strutsJquery
1.Web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
2.建立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">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
//将form表单中的数据一同序列化，以便传递到后台
var params = $("#reg").serialize();
//通过getjson方法与后台经行交互
$.getJSON("reg.action",params,function(text){
var rs = $.parseJSON(text);
//注意这里的rs.data 的 data 是在后台定义的
//返回的val是一个json格式的对象即{"data":[{"id":1,"pwd":"123","uname":"qwe"}]}
$.each(rs.data,function(key,val){
$("#vie").append("<tr class=gg><td>"+val.id+"</td><td>"+val.uname+"</td><td>"+val.pwd+"</td></tr>");
});
});
/*
第二种方式
$.ajax({
url: "reg",
// 数据发送方式
type: "post",
// 接受数据格式
dataType : "json",
// 要传递的数据
data : params,
// 回调函数，接受服务器端返回给客户端的值，即result值
success : function(result){
//测试result是否从服务器端返回给客户端
//alert(result);
//解析json对象
var re = eval("("+result+")");
alert(re);
for(var i=0;i<re.data.length;i++){
Struts2整合jquery利用json与后台交互
总觉得写个实例更容易理解,这个例子是通过帐号密码查出一个类然后将一个实体类由json格式返回。
环境是由eclipse搭建
Json需要的包
commons-beanutils.jar
commons-collections-3.2.jar
commons-lang.jar
commons-logging-1.1.1.jar
ezmorph-1.0.3.jar
json-lib-2.1-jdk15.jar
struts2-json-plugin-2.2.1.1.jar
struts需要的包
…………
项目名strutsJquery
1.Web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
2.建立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">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
//将form表单中的数据一同序列化，以便传递到后台
var params = $("#reg").serialize();
//通过getjson方法与后台经行交互
$.getJSON("reg.action",params,function(text){
var rs = $.parseJSON(text);
//注意这里的rs.data 的 data 是在后台定义的
//返回的val是一个json格式的对象即{"data":[{"id":1,"pwd":"123","uname":"qwe"}]}
$.each(rs.data,function(key,val){
$("#vie").append("<tr class=gg><td>"+val.id+"</td><td>"+val.uname+"</td><td>"+val.pwd+"</td></tr>");
});
});
/*
第二种方式
$.ajax({
url: "reg",
// 数据发送方式
type: "post",
// 接受数据格式
dataType : "json",
// 要传递的数据
data : params,
// 回调函数，接受服务器端返回给客户端的值，即result值
success : function(result){
//测试result是否从服务器端返回给客户端
//alert(result);
//解析json对象
var re = eval("("+result+")");
alert(re);
for(var i=0;i<re.data.length;i++){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
