Struts中利用ajax/jquery页面动态无刷新添加信息_struts ajax动态画面-优快云博客

本文介绍如何利用Ajax和jQuery实现网页上信息的动态无刷新加载，并展示了一个具体的示例，包括Struts配置、Action处理、JSP前端交互及JavaBean实体定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、代码简介

本段代码主要利用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文件哦，亲，嘿嘿...