JSON+AJAX+STRUTS2操作页面表格示例

最新推荐文章于 2025-08-08 15:43:57 发布

pengjian0624

最新推荐文章于 2025-08-08 15:43:57 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

文章标签： ajax json struts xmlhttprequest string function

本文链接：https://blog.youkuaiyun.com/pengjian0624/article/details/5725797

本文介绍了一个使用JavaScript脚本动态更新HTML页面的具体案例，通过AJAX实现数据的异步加载，展示了订单信息填写及更新的过程。

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

主要使用脚本的对html页面进行动态更新

HTML页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>indexl.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">  </head> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> table { border:1px; border-collapse: collapse; } </style> <body> <input type="button" onclick="ajax()" value="提交" /> <input type="button" onclick="act()" value="提交" /> <div style="margin-left:100px" mce_style="margin-left:100px"> <table width="800px" border="1px" id="order"> <tr> <th colspan="4" align="center" >销售出货单</th> </tr> <tr> <td> 单号： </td> <td> <input type="text" id="orderNo" readonly="readonly"/> </td> <td> 日期： </td> <td> <input type="text" id="date"/> </td> </tr> <tr> <td> 客户： </td> <td> <input type="text" id="customer"/> </td> <td> 业务员： </td> <td> <input type="text" id="emp"/> </td> </tr> <tr> <td>明细</td> <td>备注</td> <td colspan="2"> </td> </tr> <tr> <td colspan="4" height="100px" align="center" > <table border="1px" colspan="0" rowspan="0" id="orderDetail"> <tr> <td>序号</td> <td>商品名称</td> <td>数量</td> <td>单价</td> <td>金额</td> <td> </td> </tr> <tr> <td>1</td> <td> <input type="text" /> </td> <td> <input type="text" onpropertychange="cale(this)" /> </td> <td> <input type="text" onpropertychange="cale(this)"/> </td> <td> </td> <td> <img src="Images/addrow.gif" mce_src="Images/addrow.gif" onclick="addRow(this)" /> <img src="Images/delrow.gif" mce_src="Images/delrow.gif" onclick="delRow(this)" /> </td> </tr> </table> </td> </tr> <tr> <td colspan="4" align="right"> <input type="button" value="保存" onclick="update()"/> <input type="button" value="关闭"/> </td> </tr> </table> </div> </body> </html>

struts配置

<package name="order" extends="struts-default" namespace="/"> <action name="order" class="OrderAction"> <result name="success">/index.jsp</result> </action> </package> <package name="orderAjax" extends="json-default"> <action name="orderAjax" class="OrderAction"> <result type="json"></result> </action> <action name="orderUpdate" class="OrderAction"> <result></result> </action> </package>

action类

package org.qyl.action; import java.io.IOException; import java.io.PrintWriter; import java.sql.SQLException; import java.sql.Timestamp; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.HashSet; import java.util.Set; import java.util.logging.SimpleFormatter; import org.apache.struts2.ServletActionContext; import org.qyl.pojo.TSaleform; import org.qyl.pojo.TSaleformDetail; import org.qyl.pojo.TSaleformDetailId; import org.qyl.service.IOrderService; import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionSupport; public class OrderAction extends ActionSupport { private IOrderService iorderService; public void setIorderService(IOrderService iorderService) { this.iorderService = iorderService; } //请求参数 private String tsNo; public String getTsNo() { return tsNo; } public void setTsNo(String tsNo) { this.tsNo = tsNo; } private TSaleform tsaleform; public TSaleform getTsaleform() { return tsaleform; } public void setTsaleform(TSaleform tsaleform) { this.tsaleform = tsaleform; } public String execute(){ try { tsaleform=iorderService.selectById(tsNo); ActionContext.getContext().getSession().put("tsaleform", tsaleform); return SUCCESS; } catch (Exception e) { e.printStackTrace(); return ERROR; } } //JSON串化属性 private String order; //JSON串化属性 private String detail; public String getOrder() { return order; } public void setOrder(String order) { this.order = order; } public String getDetail() { return detail; } public void setDetail(String detail) { this.detail = detail; } //更新方法 @SuppressWarnings("unchecked") public String updateOrder() throws Exception{ System.out.println(detail); String [] orders=order.split(","); TSaleform ts=new TSaleform(); ts.setFSaleformNo(orders[0]); SimpleDateFormat formate=new SimpleDateFormat("yyyy-MM-dd"); long time=formate.parse(orders[1]).getTime(); Timestamp date=new Timestamp(time); ts.setFSaleformDate(date); ts.setFCustomer(orders[2]); ts.setFSales(orders[3]); String [] details={detail.substring(0,detail.indexOf("|")),detail.substring(detail.indexOf("|")+1)}; Set dets=new HashSet(); for(String str : details){ String [] det=str.split(","); TSaleformDetailId tsdid=new TSaleformDetailId(); tsdid.setFLineId(Short.parseShort(det[0])); tsdid.setTSaleform(ts); TSaleformDetail tsd=new TSaleformDetail(); tsd.setId(tsdid); tsd.setFGoods(det[1]); tsd.setFQty(Double.parseDouble(det[2])); tsd.setFPrice(Double.parseDouble(det[3])); tsd.setFMoneyAmt(Double.parseDouble(det[4])); dets.add(tsd); } ts.setTSaleformDetails(dets); iorderService.updateDetail(ts); PrintWriter out=ServletActionContext.getResponse().getWriter(); out.print("提交成功"); return null; } public String selectOrderNo() throws Exception{ PrintWriter out=ServletActionContext.getResponse().getWriter(); out.print(iorderService.selectOrderNo()); return null; } }