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

毕业设计---json,Struts,ajax以及JQuery简单案例

2016-10-17 20:19 393 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航