您的位置：首页 > Web前端 > JQuery

struts2 + ajax（由前台的form提交数据到后台，再根据form所调用返回获取的后台json格式的数据返回到前端，然后前端用jquery对json数据进行解析）==》》涉及非文件上传的部分

2013-07-24 01:37 1446 查看
struts2 + ajax + form 表单提交的处理，如果不是文件上传的部分，就可以直接用ajax来实现，而不是像之前用iframe来仿ajax数据交互的方法。

用Ajax.Request()方法来实现！！

例子：

前台代码：

<%@ 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>使用JSON插件</title>

<script type="text/javascript" src="prototype-1.6.0.3.js"></script>

<script type="text/javascript" src="json2.js"></script>

<script type="text/javascript">

function gotClick(){

//请求的地址
var url = 'JSONExample.action';

//将favorite表单域的值转换为请求参数
var params = Form.serialize('form1');

//创建Ajax.Request对象，对应于发送请求
var myAjax = new Ajax.Request(
url,
{
//请求方式：POST
method:'post',

//请求参数
parameters:params,

//指定回调函数
onComplete:processResponse,

//是否异步发送请求
asynchronous:true
});

}

//作为ajax的回调函数
function processResponse(request){

//使用JSON对象将服务器响应解析成JSON对象
var res = JSON.parse(request.responseText);

//遍历JSON对象的每个属性
for(var propName in res){
$("show").innerHTML += propName + " --> " +
res[propName] + "<br />";
}
}
</script>

</head>
<body>

<form id="form1" name="form1" method="post">
field1:<input type="text" name="field1" id="field1" /><br>
field2:<input type="text" name="field2" id="field2" /><br>
field3:<input type="text" name="field3" id="field3" /><br>
<input type="button" value="提交" onclick="gotClick();" />
</form>

<div id="show"></div>

</body>
</html>


后台代码：

package action;

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

import org.apache.struts2.json.annotations.JSON;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings({ "rawtypes", "serial" })
public class JSONExample extends ActionSupport {

//模拟处理结果的属性
private int[] ints = {10,20};

private Map map = new HashMap();

private String customName = "顾客";

//封装请求参数的三个属性
private String field1;

//transient修饰的属性不会被序列化
private transient String field2;

private String field3;

@SuppressWarnings("unchecked")
@Override
public String execute() throws Exception {
map.put("name", "李刚");
return SUCCESS;
}

public int[] getInts() {

System.out.println("getInts()被调用");

return ints;
}

public void setInts(int[] ints) {
System.out.println("setInts()被调用");

this.ints = ints;
}

//使用注释语法来改变该属性序列化后的属性名
@JSON(name="newName")
public Map getMap() {
System.out.println("getMap()被调用");

return map;
}

public void setMap(Map map) {
System.out.println("setMap()被调用");

this.map = map;
}

public String getCustomName() {
System.out.println("getCustomName()被调用");

return customName;
}

public void setCustomName(String customName) {
System.out.println("setCustomName()被调用");

this.customName = customName;
}

public String getField1() {
System.out.println("getField1()被调用");

return field1;
}

public void setField1(String field1) {
System.out.println("setField1()被调用");

this.field1 = field1;
}

public String getField2() {
System.out.println("getField2()被调用");

return field2;
}

public void setField2(String field2) {
System.out.println("setField2()被调用");

this.field2 = field2;
}

//	public String getField3() {
//		return field3;
//	}
//
//	public void setField3(String field3) {
//		this.field3 = field3;
//	}

}


配置struts.xml：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.i18n.encoding" value="UTF-8" />

<package name="json" extends="json-default">
<action name="JSONExample" class="action.JSONExample">
<result type="json"></result>
</action>

<action name="">
<result>.</result>
</action>
</package>

</struts>


从而实现ajax的异步数据请求交互。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航