zoukankan      html  css  js  c++  java
  • 毕业设计---json,Struts,ajax以及JQuery简单案例

    <!-- Struts2的xml文件配置 -->
    <struts> <package name="default" namespace="/" extends="json-default" > <!-- 这里必须要继承json-default类 --> <action name="JsonAction" class="com.simpleton.demo.action.JsonAction" method="executeAjax"> <result type="json"> <param name="root">result</param> </result> <!-- 因为这里不是用result返回具体的视图,而是要返回json数据,所以这里的type是json --> </action> </package> </struts>

      action类:

    package com.simpleton.demo.action;
    import java.util.ArrayList;  
    import java.util.HashMap;
    import java.util.List;  
    import java.util.Map;
    
    import javax.servlet.http.HttpServletRequest;
    
    import net.sf.json.JSONObject;
      
    import com.opensymphony.xwork2.ActionSupport;  
      
    public class JsonAction extends ActionSupport{  
    	private static final long serialVersionUID = 1L;
    	private String result;
    	private String name;
    	private String age;
    	private String position;
    
    	/**
    	 * 	处理Ajax请求
    	 * */
    	
    	public String executeAjax(){
    		
    			System.out.println(name);
    			Map<String,Object> map = new HashMap<String, Object>();
    			map.put("name", name);
    			map.put("age", age);
    			map.put("position", position);
    			
    			JSONObject json = JSONObject.fromObject(map);
    			result = json.toString();
    			System.out.println(result);
    			return SUCCESS;
    	}
    
    	public String getResult() {
    		return result;
    	}
    
    	public void setResult(String result) {
    		this.result = result;
    	}
    
    	public String getName() {
    		return name;
    	}
    
    	public void setName(String name) {
    		this.name = name;
    	}
    
    	public String getAge() {
    		return age;
    	}
    
    	public void setAge(String age) {
    		this.age = age;
    	}
    
    	public String getPosition() {
    		return position;
    	}
    
    	public void setPosition(String position) {
    		this.position = position;
    	}
    }  
    

      html页面

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>n.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
    	
    	<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    	<script type="text/javascript">
    		function btn(){
    			var $btn = $("#btn");
    			$btn.bind("click",function(){
    				$.ajax({
    					type:"post",
    					url:"JsonAction",
    					data:{
    						name:$("input[name='name']").val(),
    						age:$("input[name='age']").val(),
    						position:$("input[name='position']").val()
    					},
    					dataType:"json",
    					success:function(data){
    						var d = eval("("+data+")");
    					
    						$("#s_name").text(""+d.name+"");
    						$("#s_age").text(""+d.age+"");
    						$("#s_position").text(""+d.position+"");
    					},
    					error:function(){
    						alert("错误");
    					}
    				});
    			});
    		}
    		
    		$(document).ready(function(){
    			btn();
    		});
    	</script>
      </head>
      
      <body>
      	<div id="div_json">
      		<h5>录入数据</h5>
      		<br>
      		<form action="JsonAction" method="post">
      			<label for="name">姓名</label><input type="text" name="name" />
      			<label for="age">年龄</label><input type="text" name="age" />
      			<label for="position">职务</label><input type="text" name="position" />
      			<input type="button" id="btn" class="btn" value="提交结果">
      		</form>
      		<br>
      		<ul>
      			<li>姓名<span id="s_name">暂无数据</span></li>
      			<li class="li_layout">年龄<span id="s_age">暂无数据</span></li>
      			<li class="li_layout">职务<span id="s_position">暂无数据</span></li>
      		</ul>
      		
      	</div>
      </body>
    </html>
    

      这个案例简单了实现了利用jQuery以及ajax进行html页面与struts之间的数据交互,摆脱了以前一直应用的jsp页面。

  • 相关阅读:
    C语言II博客作业04
    C语言II博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
    C语言I博客作业09
    C语言I博客作业08
    C语言I博客作业07
    C语言I博客作业06
    C语言I博客作业05
  • 原文地址:https://www.cnblogs.com/dyc940210/p/5971100.html
Copyright © 2011-2022 走看看