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

Struts中利用ajax/jquery页面动态无刷新添加信息

2012-12-15 11:39 253 查看

一、代码简介

本段代码主要利用ajax/jquery在页面上动态无刷新添加信息(附带往后台传值)

二、图片预览

(1)刚进页面时

(2)点击“添加信息”按钮后

(3)后台输出

三、示例代码

(1)struts.xml配置文件中的代码段

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>

<package name="package" namespace="/" extends="json-default">

<action name="Refresh" class="com.HJQZ.Refresh.Raction" method="refresh">
<result name="success" type = "json" >/index.jsp</result>
<result name="error">/index.jsp</result>
</action>
</package>
</struts>

(2)Action中的代码段

package com.HJQZ.Refresh;

import java.util.ArrayList;
import java.util.List;

import com.HJQZ.DataBean.DataBean;
import com.opensymphony.xwork2.ActionSupport;

public class Raction extends ActionSupport {

private String tel;
private List list;
private DataBean bean;

public String refresh()
{
String [] telNum = new String[4];
telNum = tel.replaceAll(" ", "").split(",");
System.out.println("====="+telNum[0]+"======="+telNum[1]+"======="+telNum[2]);

list = new ArrayList();

bean=new DataBean();
bean.setName("红姬茄子");
bean.setInterest("爱吃红烧茄子");
list.add(bean);

bean=new DataBean();
bean.setName("红姬茄子");
bean.setInterest("爱吃风味茄子");
list.add(bean);

return SUCCESS;
}

public String getTel() {
return tel;
}
public void setTel(String tel) {
this.tel = tel;
}

public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
}

(3)Jsp中的代码段

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Jequery2</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

function addInfo() {

var tel = document.getElementById("tel").value;
post(tel);
}

function post(arry) {

$.post(	"Refresh",{"tel" : arry.toString()},function(data) {
var list = data.list;
var listSize = list.length;

var str = "";

$.each(list,function(i, HJQZ) {        ////$.each遍历输出

document.getElementById("name").value = HJQZ.name;
var xmlHttpReq; // = new ActiveXObject("MSXML2.XMLHTTP.3.0");

if(window.ActiveXObject){//IE浏览器
try{
xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本
}catch(e){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本
}
}
str += "<tr id='"
+ i
+ "'>"
+ "<td height='22' bgcolor='#FFFFFF'><div align='center'> "
+ HJQZ.name
+ " </div></td>"
+ "<td height='22' bgcolor='#FFFFFF'><div align='center'> "
+ HJQZ.interest
+ " </div></td></tr>";
})
$("#ShowResult").append(str);
},"json")
}
</script>

</head>
<body>
<input type="button" value="添加信息" onclick="addInfo()"/>
<input type="text" name="name" id="name" />
<input name="tel" type="text" id="tel" value="132,456,789" />
<table id="ShowResult" width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>
<div align='center'><font color="red">姓名</font></div>
</td>
<td>
<div align='center'><font color="red">兴趣，爱好</font></div>
</td>
</tr>
</table>
</body>
</html>

(4)Bean文件中的代码段

package com.HJQZ.DataBean;

import java.io.Serializable;

public class DataBean implements Serializable {

private String name;
private String interest;

public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getInterest() {
return interest;
}
public void setInterest(String interest) {
this.interest = interest;
}
}

四、总结

以上便是本文的全部内容，不足之处还请各位大侠多多指点，嘿嘿...

另外要记得在WebRoot目录下导入jquery-1.4.4.min.js文件哦，亲，嘿嘿...

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

标签：

相关文章推荐

新的分享

章节导航