今天，在完成文章留言功能的时候，想实现用户留言信息异步提交，并在最开始的页面显示留言是否成功与否！经过一个上午的思考以及实践，现有两种方法可以实现其功能。
第一种：利用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><!--end header-->
<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><!--end leftbar-->
<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><!--end leftbar-->
<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><!--end leftwd_content-->
</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>
分享到：
相关推荐
在Java开发中，异步提交表单请求是一种常见的前端与后端交互方式，它通过Ajax技术实现，使得用户无需等待整个页面刷新即可完成数据的提交和获取，提升了用户体验。Ajax，全称Asynchronous JavaScript and XML（异步...
在现代Web开发中，异步提交（Async Submit）已经成为一种常见的技术，特别是在处理表单数据时，能够极大地提升用户体验。这种技术允许用户在不刷新整个页面的情况下提交数据，从而实现页面的动态更新。这里我们将...
`ajaxSubmit`是jQuery Form Plugin的一部分，它允许我们使用Ajax技术实现表单的异步提交，包括多文件上传。这种方式不仅可以提高用户体验，因为用户无需等待页面刷新，还能有效管理服务器资源，避免一次性处理大量...
3. **利用Ajax异步提交**：通过Ajax提交表单，可以在后台处理完数据后再更新页面状态，这样用户不会看到页面刷新，也就无法再次提交。在`success`回调中，可以重置表单或恢复提交按钮的状态。 4. **页面跳转或显示...
批量提交表单JS的核心概念是利用JavaScript对多个表单数据进行处理，然后一次性发送到服务器。传统的HTML表单提交会刷新整个页面，而使用JS的批量提交则可以在不刷新页面的情况下完成，提供更好的用户体验。 jQuery...
- **用户体验**：如果异步校验失败，用户可能需要多次尝试才能成功提交表单。 - **代码复杂度**：异步编程本身增加了代码的复杂性和维护难度。 因此，在某些情况下，将异步校验改为同步校验成为一种需求。本篇文档...
为了实现这一目标，我们可以利用 Promise 的特性来异步处理多个表单的验证结果，并且使用 `Promise.all` 方法来确保所有表单都验证通过。 ##### 1. 初始化变量 ```javascript let formArr = ["legalPerson", ...
在上述函数中，如果需要在禁止表单默认提交行为的同时，与服务器进行数据交互，则可以使用JavaScript的XMLHttpRequest或者现代的Fetch API来异步提交表单数据。使用AJAX提交表单数据的好处是，可以避免页面刷新，...
无刷新提交表单实现是现代Web开发中的一个重要技术，它为用户提供更为流畅的交互体验，无需等待整个页面刷新即可完成数据的提交与处理。这种技术通常依赖于Ajax（Asynchronous JavaScript and XML）或者现代浏览器...
总的来说，这个“jquery 实现异步提交文件组件”旨在简化文件上传的过程，提供良好的用户体验。在实际应用中，还需要考虑其他因素，如错误处理、多文件上传、文件类型的限制以及文件大小的控制等。请仔细阅读附件中...
### C#以POST方式模拟提交表单 - 关键知识点解析 ...综上所述，通过C#实现POST方式模拟提交表单不仅可以提高Web应用程序的灵活性，还能在安全性方面提供更多保障。开发者应熟练掌握这些技术，并结合实际情况灵活运用。
- 使用异步处理：使用Ajax提交表单，可以避免页面整体刷新，减少重复提交的机会。 - 提供明确的用户反馈：当表单成功提交后，显示清晰的反馈信息，告知用户操作已完成，防止他们因不清楚状态而多次尝试。 综上所...
在Web开发中，表单提交是一项基础且关键的操作，它允许用户向服务器发送数据进行...总的来说，防止表单重复提交是一个多层面、多层次的问题，需要综合运用客户端和服务器端的技术，以确保应用的稳定性和数据的一致性。
1. **前端**：使用HTML和JavaScript构建表单，通过AJAX或者Fetch API实现异步提交，以保持页面的交互性。 2. **文件上传**：HTML5引入了`<input type="file">`的`multiple`属性，允许用户选择多个文件进行上传。使用...
JQuery提供的一个插件JQuery.Form允许开发者以简单的方式实现表单的Ajax提交，也就是异步提交表单，无需页面刷新即可与服务器进行数据交换。 在本文中，我们将通过一个简单实例来学习如何使用JQuery.Form插件实现...
2. **使用Ajax异步提交**：通过Ajax进行表单提交，可以在发送请求后显示加载提示，直到收到服务器响应再决定是否允许再次提交。 ```javascript $.ajax({ url: 'yourSubmitUrl', type: 'POST', data: yourFormData...
【C#之自动提交表单登录QQ空间源码】是一个基于C#编程语言实现的项目，主要用于模拟用户登录QQ空间的过程。在Visual Studio 2008环境下开发和测试，这意味着该代码兼容.NET Framework 3.5及以上版本。C#是一种广泛...
在网页开发中，jQuery是一个非常...当然，这只是一个基础示例，实际应用中可能需要考虑更多细节，比如支持多个可提交的输入元素，或者处理多语言环境下的快捷键问题等。但这个基本框架已经足够让你开始实现类似的功能。
6. **异步提交表单**： - `fetch` API：发送HTTP请求，如`fetch(url, { method: 'POST', body: formData })`，将表单数据提交到服务器。 - `XMLHttpRequest`：老式但仍然广泛使用的API，实现异步提交。 7. **表单...
在实际应用中，你可能还需要添加更多的验证规则，如密码强度检测，以及使用AJAX异步提交表单数据，防止页面刷新。此外，为了提高用户体验，可以使用JavaScript动态显示错误消息，而不是弹出alert。 通过这些步骤，...