首页 > 代码库 > 花了一早上的时间(4个多小时)总结出来的教训:textarea标签中的文本内容不能够通过serialize()方法得到

花了一早上的时间(4个多小时)总结出来的教训:textarea标签中的文本内容不能够通过serialize()方法得到

?

1.先看一下完善的代码,也就是最终的答案!

function GetContent() {

return CKEDITOR.instances.nEditor.getData();//这里nEditor是textarea的name值

}

$("#btnAdd").click(function () {

//alert(GetContent());//测试使用

var data = $("#fContent").serialize();

// alert(data);

$.ajax(targetUrl, {

data: data + "&nEditor="+GetContent(),

type: "post",

dataType: "json",

success: function(jsonObj) {

ProcessData(jsonObj, function() {

msgBox.showMsgOk(jsonObj.msg);

window.location = "news.aspx";

},1);

}

});

});

<asp:Content ID="Content2" ContentPlaceHolderID="placeRight" runat="server">

<form id="fContent" >

<% if (modNews!=null)

{%>

<input type="hidden" name="NID" value="<%=modNews.NID %>" />

<%} %>

<strong>标题:<input type="text" name="nTitle" <% if (modNews == null){%>value=""<%}

else

{%>value="<%=modNews.NTitle %>" /><%} %>

</strong>

<strong>所属分类:<select id="NcId" name="NcId"><%=MakeSelect() %></select></strong>

</form>

<textarea id="nEditor" name="nEditor" >

<%if(modNews!=null) {Response.Write(modNews.NContent);}%>

</textarea>

<div style="float: left; margin-left: 40%; margin-right: 20px;">

<input type="button" id="btnAdd" value="保存并提交 " style="font-size: large" />

</div>

<div>

<input type="button" id="btnCancel" value="放弃编辑 " style="font-size: large" />

</div>

</asp:Content>

?

2.以上结果是在几个小时的折磨之后才得出来的,程序猿不容易啊!可这个期间会经过很多弯路,请看下面:

? ? 2.1一开始是这样:textarea标签在form表单内,直接用Jquery中的serialize()序列化;

$("#btnAdd").click(function () {

//alert(GetContent());//测试使用

var data = $("#fContent").serialize();//注意这一行

// alert(data);

$.ajax(targetUrl, {

data: data + "&nEditor="+GetContent(),//注意这一行

type: "post",

dataType: "json",

success: function(jsonObj) {

ProcessData(jsonObj, function() {

msgBox.showMsgOk(jsonObj.msg);

window.location = "news.aspx";

},1);

}

});

});

<form id="fContent" >

<% if (modNews!=null)

{%>

<input type="hidden" name="NID" value="<%=modNews.NID %>" />

<%} %>

<strong>标题:<input type="text" name="nTitle" <% if (modNews == null){%>value=""<%}

else

{%>value="<%=modNews.NTitle %>" /><%} %>

</strong>

<strong>所属分类:<select id="NcId" name="NcId"><%=MakeSelect() %></select></strong>

<textarea id="nEditor" name="nEditor" >/*textarea是在form表单里面的哦*/

<%if(modNews!=null) {Response.Write(modNews.NContent);}%>

</textarea>

</form>

?

? ? ? ? 2.2可是结果很悲催啊,当我新添加一条新闻时,我明明填写了新闻标题和内容,为什么提示为空呢?难道被Web黑洞吸收了?我不相信,抱着坚定的信心寻找原因;

?

*************************************************

期间是艰难的思考期,撒尿的时候突然想到,textarea中的文本可能不能被serialize()序列化吧?

************************************************

? ? ? ? 2.3我继续尝试了一下编辑新闻,"哈哈哈"是从数据库中读取到的内容,我新添加了一句之后,点击提交,在VS中看调试结果;

?按照假想,这句新增的语句不会传递到服务端

?

? ? ? ? 2.4OMG!果然没有传递过来,开心啊!找到原因了啊!找到原因就好说了,就怕找不到问题所在;

? ? 3.0那我们就把已经完善的代码拿来测试一下!

function GetContent() {

return CKEDITOR.instances.nEditor.getData();//这里nEditor是textarea的name值

}

$("#btnAdd").click(function () {

//alert(GetContent());//测试使用

var data = $("#fContent").serialize();

// alert(data);

$.ajax(targetUrl, {

data: data + "&nEditor="+GetContent(),

type: "post",

dataType: "json",

success: function(jsonObj) {

ProcessData(jsonObj, function() {

msgBox.showMsgOk(jsonObj.msg);

window.location = "news.aspx";

},1);

}

});

});

<form id="fContent" >

<% if (modNews!=null)

{%>

<input type="hidden" name="NID" value="<%=modNews.NID %>" />

<%} %>

<strong>标题:<input type="text" name="nTitle" <% if (modNews == null){%>value=""<%}

else

{%>value="<%=modNews.NTitle %>" /><%} %>

</strong>

<strong>所属分类:<select id="NcId" name="NcId"><%=MakeSelect() %></select></strong>

?

</form>

<textarea id="nEditor" name="nEditor" >

<%if(modNews!=null) {Response.Write(modNews.NContent);}%>

</textarea>

3.1这里测试一下编辑一篇新闻试

? ? 3.2 经测试,新增一篇新闻也是没有问题的!

4.0总结:

? ? 4.1其实textarea标签在form表单内还是外都没错的,只是放在方面性能稍微好点!你想想,放在里面好像多费手续;

? ? 4.2其实主要还在于通过JS代码来获取文本域的内容,然后务必在序列化的数据data后面加上 "&nEditor="+GetContent(),让服务器接收。

?? ?function GetContent() ?{ ? ? return CKEDITOR.instances.nEditor.getData();//这里nEditor是textarea的name值}

花了一早上的时间(4个多小时)总结出来的教训:textarea标签中的文本内容不能够通过serialize()方法得到