<!-- 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页面。

毕业设计---json,Struts,ajax以及JQuery简单案例的更多相关文章

  1. jQuery 简单案例

    案例一:全选.反选.取消实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. json数据格式的简单案例

    json数据是一种文本字符串,它是javascript的原生数据格式,在数据需要多次重复使用时,json数据是ajax请求的首先.(注:ajax返回的数据格式支持三种分别为:文本格式,json.和xm ...

  3. struts2：使用JQuery、JSON和AJAX处理请求

    目的 在struts2中使用JQuery.JSON.AJAX等技术处理用户请求,并返回结果.返回结果可以是以JSONObject的方式返回,也可以是以JSONArray方式返回结果. 实现 1. 创建 ...

  4. JQuery中Ajax详细参数使用案例

    JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...

  5. Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  6. JSON 在Ajax数据交换中的简单运用

    随着浏览器内核更新,原先的json.js在最新的谷歌浏览下不管用了,运行报错,特此修改下代码,不使用json.js,使用Object自带的json转换方法,修改时间,2016年10月26日. 首先需要 ...

  7. asp.net——Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  8. js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）

    js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...

  9. 原生js实现ajax与jquery的ajax库，及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

随机推荐

  1. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  2. pyspider爬取数据存入redis--1.安装驱动

    首先安装pyredis的驱动 wget https://pypi.python.org/packages/source/r/redis/redis-2.9.1.tar.gz 解压并cd python  ...

  3. 2018-2019-2 20175308实验一 《Java开发环境的熟悉》实验报告

    2018-2019-2-20175308 实验一 <Java开发环境的熟悉>实验报告 一.实验内容及步骤 (一)使用JDk编译.运行简单的Java程序 输入cd Code命令进入Code目 ...

  4. 希尔排序算法的php实现

    虽然现在各种程序语言都有其各自强大的排序库函数,但是这些底层实现也都是利用这些基础或高级的排序算法. 理解这些复杂的排序算法还是很有意思的,体会这些排序算法的精妙~ 一.希尔排序(shell sort ...

  5. 让win7变成无线路由（需要用管理员权限打开）最后完善.rar

    让win7变成无线路由(需要用管理员权限打开)最后完善.bat @ECHO OFF CLS color 0a netsh wlan show drivers ECHO.★★★★★★★★★★★★★★★★ ...

  6. 分裂 BZOJ2064 状压DP

    分析: 这个题很好啊,比起什么裸的状压DP高多了! 我们可以考虑,什么时候答案最大:全合并,之后再分裂 这样,我们必定可以得到答案,也就是说答案必定小于n+m 那么我们可以考虑,什么时候能够使答案更小 ...

  7. Scala_数据类型

    Scala与Java有着相同的数据类型,Scala数据类型都是对象,Scala中没有类似Java中那样的原始类型. Scala 的基本数据类型有: Byte,Short,Int,Long 和 Char ...

  8. 20155216 实验一 逆向与Bof基础

    实验一 逆向与Bof基础 一.直接修改程序机器指令,改变程序执行流程 使用 objdump -d pwn1 对pwn1文件进行反汇编. 可知main函数跳转至foo函数,先要使main函数跳转至get ...

  9. Vue 使用细节收集

    JSX 中 on 开头的属性名 在用 elementui 中的 el-upload 的时候,他们组件中有一个属性 on-change ,也不知道谁想出来的属性名,太扯淡了,非要 on 开头,我开始的代 ...

  10. 6、使用jconsole+VisualVM分析JVM

    一.不断增加对象触发GC的代码 VM 参数:-Xms100m -Xmx100m -XX:+UseSerialGC import java.util.ArrayList; import java.uti ...