zoukankan      html  css  js  c++  java
  • struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及非文件上传的部分

    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的异步数据请求交互。

  • 相关阅读:
    Ubuntu 14.04 配置FTP
    python 命名规范
    Windows 多用户远程访问 Ubuntu 14.04桌面
    ubuntu 安装Matlab 解决显示中文乱码
    形式参数、实际参数和值传递、引用传递
    关于Hibernate中的临时态, 持久态, 游离态
    HTTP错误
    SpringMVC注解
    java变量的命名使用规则
    字节流与字符流的区别详解
  • 原文地址:https://www.cnblogs.com/cyh123/p/3209776.html
Copyright © 2011-2022 走看看