异步提交表单多个应用 -

jasstion

浏览: 69534 次
性别:
来自: 成都

最近访客更多访客>>

londa

朱嫑膘

ts_heating

jacket233

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

异步提交表单多个应用

博客分类：

Structs

应用服务器 tinymce jQuery JavaScript Struts

今天，在完成文章留言功能的时候，想实现用户留言信息异步提交，并在最开始的页面显示留言是否成功与否！经过一个上午的思考以及实践，现有两种方法可以实现其功能。
第一种：利用JQuery的Ajax函数：
function load(){
var str=$("#replyform").serialize();
$.ajax({
    type: "POST",
    cache: false,
    url:"/On/myblog/Addleftwd.action",
    data:str,
    success: function(msg){
$("#result").html(msg);
    }
});
}
第二种：利用JQuery的load()函数：
function load(){
var str=$("#replyform").serialize();
alert(str);
  $("#result").load("/On/myblog/Addleftwd.action?"+str);
}
第三种：直接利用Struts 2.1.6中提供的异步提交标签：
又有两种：
<s:url var="l" action="Addleftwd.action" namespace="/myblog"></s:url>
<sx:a href="%{l}" formId="replyform" targets="result">
     点击此链接
</sx:a>
此标签放在提交表单外；
<sx:submit id="reply_go" value="提交" targets="result"></sx:submit>
此标签放在提交表单内部。

在利用Struts中自带的这些异步提交标签时，有事会发现一些属性不会被对应的表单域值所填从，不知道这是不是一个小BUG。
但是在利用前两种方法时，需要将表单域序列化，然后做最参数传递给Action，结果在留言内容部分出现乱码，试着用下面的方式在Action内部解决，还是显示乱码：
public Leftwd leftwd;
public String addleftwd()
{ Session sess=new BaseHibernateDAO().getSession();
Transaction tx=null;
try{tx=sess.beginTransaction();
byte[] temp =leftwd.getContent().getBytes("UTF-8");
leftwd.setContent(new String(temp, "GBK"));
//leftwd.getContent()=new String(getBytes("UTF-8"),"gb2312");
Timestamp datetime = new Timestamp(new Date().getTime());
leftwd.setDate(datetime);
sess.saveOrUpdate(leftwd);
tx.commit();
setMessage("发表留言成功！");
}
catch(Exception e ){if(tx!=null){tx.rollback();setMessage("抱歉！服务器繁忙！请稍后再试！");}
}
finally{sess.close(); return "addleftwd";}

}
希望高人指点一下！谢谢！！
我的文章显示界面：
<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<%@ page contentType="text/html; charset=GBK" %>
<%

//得到本页的参数内容
int totals=0,allrecords=1,prePageNo=1,pageNo=0,nextPageNo=1,preOk=1,nextOk=1;

      if(request.getParameter("allrecprds")!=null){allrecords = Integer.parseInt(request.getParameter("allrecords").toString());}
   if(request.getParameter("pageno")!=null){pageNo = Integer.parseInt(request.getParameter("pageno").toString());

   } prePageNo = pageNo;
nextPageNo=pageNo;
if (pageNo==0) nextOk=0;
if (pageNo*3>allrecords) preOk=0;

//计算上一页和下一页的页码及按钮的状态

%>
<html>
<head>
<sx:head debug="true" extraLocales="en-us,nl-nl,de-de"/>
<script type="text/javascript" src="/On/JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript" src="/On/JS/nav.js"></script>
<s:include value="/all.jsp"></s:include>
<script type="text/javascript" src="/On/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
  mode : "textareas",
  theme : "simple"

});

function load(){
var str=$("#replyform").serialize();
$.ajax({
    type: "POST",
    cache: false,
    url:"/On/myblog/Addleftwd.action",
    data:str,
    success: function(msg){
$("#result").html(msg);
    }
});
}

</script>

<title>无标题文档</title>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}
#topicdetail_content{
border:1px solid #996633;
margin-left:10%;
width:90%;
}
#content{
float:right;
width:80%;
border:1px solid #996633;
height:800px;
margin-top:0px;
}
#header{
float:left;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FFCC33;
margin-left:0px;
width:100%;
height:30px;
background:url(/On/jpg/nav.gif) repeat;
}
#header #headerul{
margin-top:1px;
margin-bottom:1px;
margin-left:0px;
list-style:none;
}
#header #headerul li{
text-align:center;
padding:5px 5px 5px 5px;
border: 1px solid #ffffff;

display: block;
float:left;
}
#header #author{
width:20%;

}
#picture{
width:100%;
height:300px;
}
#header #topic{
width:80%;

}
#authorinfo{
margin-left:0px;
list-style:none;
}
#authorinfo #authorinfoul{
margin-left:0px;}
#authorinfoul li{
margin-left:0px;
}
#leftbar{
border:1px solid #996633;
margin-left:0px;
width:20%;
float:left;
}
#elm{
font-family:Arial, Helvetica, sans-serif;

}
#leftwd_content{
float:right;
width:80%;
border:1px solid #996633;
margin-top:0px;
}

#leftwd_leftbar{
border:1px solid #996633;
margin-left:0px;
width:15%;
float:left;
height:250px;
}
#authorinfo{
margin-left:0px;
list-style:none;
}
#authorinfo #authorinfoul{
margin-left:0px;}
#authorinfoul li{
margin-left:0px;
}

#rightbar{
float:left;
height:250px;
width:80%;
}
#firstbar{
border:1px solid #FFFFFF;
width:100%;
height:10%;}
#leftword{
width:100%;
height:100%;
}
#lastbar{
border:1px solid #FFFFFF;

width:100%;
height:10%;
margin-bottom:0px;}
#changepage{
float:right;
width:80%;
border:1px solid #FFCCFF;
margin-top:0px;
}
#reply{
float:right;
width:80%;
border:1px solid #996633;
margin-top:0px;
}
#reply_go{
width:50px;
height:20px;
display:block;
border:1px solid #FFCCFF;
}
#changepage a{
background:#3366CC;
float:right;
width:60px;
display:block;
color:#FFFFFF;

}
</style>
</head>

<body>
<div id="topicdetail_content">
<div id="header">
<ul id="headerul">
<li id="author">作者</li>
<li id="topic">正文</li>
</ul>
</div>
<div id="leftbar">
<div id="authorinfo">
<ul id="authorinfoul">
<li id="photo"><a href="/On/myblog/showblog.action?mem=${member.id}"><img src="${member.picture}" id="picture"/></a></li>
<li>姓名:<s:property value="member.name"/></li>
<li>浏览次数：<s:property value="member.blogtimes"/> </li>
<li>积分:<s:property value="member.money"/></li>
<li>来自于:<s:property value="member.adress"/></li>
<li>是否在线</li>
<li>我要给他发送信息</li>
</ul>
</div>
</div>
<div id="content">
<H1 align="center">
<s:property value="topicblog.name"/></H1>
<h4 align="center"><s:property value="topicblog.data"/><s:property value="topicblog.times"/><br></h4>

<s:textarea readonly="true" id="elm" name="elm1" value="%{topicblog.content}" rows="42" cols="70" style="width:100%"/>
</div>

<s:iterator value="leftwdinfo">
<div id="leftwd_content">

<div id="leftwd_leftbar">
<div id="authorinfo">
<ul id="authorinfoul">
<li>姓名:<s:property value="name"/></li>
<li id="photo"><img src="${picture}" width="160" height="170" /></img></li>
<li>博客文章:<s:property value="topicnum"/></li>
<li>积分:<s:property value="money"/></li>
<li>来自于:<s:property value="adress"/></li>
<li>是否在线</li>
<li>我要给他发送信息</li>
</ul>
</div>
</div>
<div id="rightbar">
<div id="firstbar">
<strong>发表时间:<s:property value="date"/></strong>
</div>
<div id="leftword"><s:property value="content"/></div>
<div id="lastbar"></div>
</div>
</div>
</s:iterator>
<div id="changepage">
总共<s:property value="%{attr.allrecords}"/>留言
<a href="showtopicdetail.action?id=${topicblog.id}&mem=${topicblog.memberId}&pageno=${request.pageno}&up=false ">上一页</a>
<a href="showtopicdetail.action?id=${topicblog.id}&mem=${topicblog.memberId}&pageno=${request.pageno}&up=true ">下一页</a>
</div>

<div id="reply">
<strong>发表评论</strong><hr />
<div id="result">
</div>
<div id="reply_content">
<s:if test="%{#session.member!=null}">
<s:form id="replyform" method="post" theme="xhtml">
<s:hidden value="%{topicblog.id}" name="leftwd.topicBlogId"></s:hidden>
<s:text name="%{topicblog.id}"></s:text>
<s:hidden value="%{session.member.id}" name="leftwd.id"></s:hidden>
<s:textarea id="elm" name="leftwd.content" rows="6" cols="8" style="width:100%"/>
<a href="javascript:load()"><img src="/On/jpg/download.gif"/></a>
<sx:submit id="reply_go" value="提交" targets="result"></sx:submit>
</s:form>
<s:url var="l" action="Addleftwd.action" namespace="/myblog"></s:url>
<sx:a href="%{l}" formId="replyform" targets="result">
点击此链接
</sx:a>

</s:if>
<s:else>
请先<a href="/On/login.jsp">登录</a>或<a href="/On/register.jsp">注册</a>后才能留言！
</s:else>

</div>
</div>
</div>
</body>
</html>

3
顶

1
踩

分享到：

JQuery异步提交乱码问题解决 | 网页设计1

2009-09-13 10:35
浏览 4067
评论(1)
查看更多

1 楼 itaxi 2012-11-14

多谢, 一个serialize() 拯救了我

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

异步提交表单多个应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

异步提交表单多个应用

评论

发表评论

相关推荐

趣谈人与软件设计（struts1源码）

我的权限控制系统实现

Struts 2.1.6使用中的无奈！

struts 2.1.6表达式解析

数据结果封装

Structs学习心得

最近访客更多访客>>