b/s结构无刷新录入界面实现

来源：互联网发布：cf手游潜龙之啸数据编辑：程序博客网时间：2024/05/02 13:49

一、jsp代码
<%@ page language="java"
import="java.util.*"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<link href="jpage/theme/default/css/jpage.css" type="text/css" rel="stylesheet">
<link href="jpage/theme/black/css/jpage.css" type="text/css" rel="stylesheet">
<script language="javascript" src="jpage/jquery.js"></script>
<script language="javascript" src="cookie/jquery.cookie.js"></script>
<script language="javascript" src="jpage/jquery.jpage.js"></script>
<script type="text/javascript">
$(function()
   {
      //界面初始化
      $("#name").focus();    //设置焦点
      $("#name").select();    //选中文字

         $("#inputArea input").keypress(function(e)
         {
            if (e.which == 13)                      //判断所按是否回车键
            {
               var inputs = $("#inputArea").find("input");                //获取表单中的所有输入框
               var idx = inputs.index(this);    //获取当前焦点输入框所处的位置

               if (idx == inputs.length - 1)    // 判断是否是最后一个输入框
               {
                     //if (confirm("最后一个输入框已经输入,是否提交?")) //用户确认
                        clickButton(); //提交
                     inputs[0].focus();    //设置焦点
                     inputs[0].select();    //选中文字
               }
               else
               {
                     inputs[idx + 1].focus();    //设置焦点
                     inputs[idx + 1].select();    //选中文字
               }
            }
         });
   });
function getTextValue()
{
var params = {
name : $("#name").val(),
address : $("#address").val(),
tel : $("#tel").val()
}
return params;
}
function clickButton()
{
var url ="AjaxAction.action";
var params = getTextValue();
//alert(params.name);
//alert(params.address);
//alert(params.tel);
$.getJSON(url,params,function(returnData){
//alert(returnData);
addRow(returnData);
});
}
function addRow(returnData){
//alert(returnData);
var content = eval("(" + returnData + ")"); //包数据解析为json 格式
jQuery("#listArea").append('<tr><td>' + content.name + '</td>'+'<td>' + content.address + '</td>'+'<td>' + content.tel + '</td></tr>');
}
</script>
<style type="text/css">
td {
border: 1px solid #750037;
width: 100px;
font-size: 12px;
text-align: center;
margin: 0px;
}
.userTable {
border-collapse: collapse;
}
.userTable .title {
font-weight: bold;
font-size: 14px;
background-color: #ffcdfc;
height: 25px;
}
.odd_table {
background-color: #00cd00;
}
.toggleClass {
background-color: #0fcd00;
}
</style>
</head>

<body>
<table id="inputArea" border="1" align="center">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="name" id="name">
</td>
</tr>
<tr>
<td>
地址:
</td>
<td>
<input type="text" name="address" id="address">
</td>
</tr>
<tr>
<td>
电话:
</td>
<td>
<input type="text" name="tel" id="tel">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input type="button" value="提交" >
</td>
</tr>
</table>
<table id="listArea" border="1" align="center">
<tr>
<td colspan="3">录入结果</td>
</tr>
</table>
</body>
</html>

二、struts配置
<package name="ajax" extends="json-default">
<action name="AjaxAction" class="com.teksun.action.AjaxAction">
<result type="json">
<param name="root">result</param>
</result>
</action>
</package>

三、action
package com.teksun.action;

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

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxAction extends ActionSupport {
private String result;
private String name;
private String address;
private String tel;

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 getAddress() {
return address;
}

public void setAddress(String address) {
this.address = address;
}

public String getTel() {
return tel;
}

public void setTel(String tel) {
this.tel = tel;
}
public String execute()
{
// 用一个Map做例子
Map<String, String> map = new HashMap<String, String>();

// 为map添加一条数据，记录一下页面传过来值
map.put("name", "hello " + this.name);
map.put("address", this.address);
map.put("tel", this.tel);
// 将要返回的map对象进行json处理
JSONObject jo = JSONObject.fromObject(map);

// 调用json对象的toString方法转换为字符串然后赋值给result
this.result = jo.toString();
return "success";
}
}