前台带换行符的文本提交到后台,后台在前台显示换行

2019独角兽企业重金招聘Python工程师标准>>>

数据在保存的时候,替换换行符为<br/>

function submitFun(url){
	//获取form表单序列化的字符串,对form表单序列化后的样式为:aa=1&bb=1&cc=1的格式,所以这里利用&来分组,并且获得参数名和参数值再替换换行符
	var submitDataStr = $(".__saveForm").serialize();
	var descriptionEntity = submitDataStr.split("&")[0];
	var key = descriptionEntity.split("=")[0];
	var value = descriptionEntity.split("=")[1];
	if(!value && value==""){
		$.easyui.messager.show({ icon: "info", msg: "请在输入框中写入内容!", position: "topCenter" ,timeout:5000}); 
		return;
	}
	//替换所有的换行符为<br/>保存到数据库(在UTF8中的换行符为%0D%0A,正则后面的g表示所有的匹配的字符串都要替换.使用replace 方法的时候需要用正则表达式，否则只能替换第一个换行  
	value = value.replace(/%0D%0A/g,"<br>"); 
	submitDataStr+="&object.description="+value;
	//替换原来的"object.description"的参数字符串
	var index = submitDataStr.indexOf("&");
	submitDataStr = submitDataStr.substring(index+1);
	if($(".__saveForm").form('validate')){
		$.ajax({
			url:url,
			data:submitDataStr,
				type:"POST",
				dataType:'json',
				success:function(data){
					//服务器成功返回信息,执行success()方法
					$.easyui.loaded({ topMost: true }); 
					var obj= data;
					if (obj && obj.returnCode==1)
					{
						$.easyui.messager.show({ icon: "info", msg: "回复提交成功", position: "topCenter" ,timeout:5000}); 
						//每次提交完问题之后不会刷新页面
						var flag = false;//默认客户提交
						var name = obj.data.userName;
						if(obj.managerName){
							//客服提交
							flag = true;
							name = obj.data.managerName;
						};
						var descriptionStr = obj.data.description;
						var imageArr = obj.data.imagelist;
						var startTime = obj.data.startTime;
						startTime = startTime.replace("T"," ");//格式化日期
					    //直接插入图片和描述会更好一些,这里选择利用JQUEY追加元素
						addDataTbodyToTable(name,descriptionStr,imageArr,startTime,flag);
						return;
					}
					$.easyui.messager.show({ icon: "info", msg: "回复提交失败", position: "topCenter" ,timeout:5000}); 
				},
		});
	}else{
		$.easyui.loaded({ topMost: true }); 
		$(".__saveForm input:eq(0)").focus();
	}
}

代码1.(输入回复内容之后,动态的在前台显示刚才输入的内容)

​
/**
 * 增加描述description,传递对象为一个字符串
 * @param str 描述字符串
 * @param 图片地址构成的数组
 * @param 提交日期
 */
function addDataTbodyToTable(name,descriptionStr,imageArr,startTime,flag){
	//在显示的时候把<br/>改成换行符显示出来(注意：使用replace 方法的时候需要用正则表达式，否则只能替换第一个换行  )
    var reg=new RegExp("<br/>","g"); //创建正则RegExp对象    
	var newDescriptionStr=descriptionStr.replace(reg,"\n");   
	var $dom = $('#tbody');
	var str = "<TBODY><tr><td>";
	if(flag){
		//是客服
		str+="客服--->";
	}else{
		str+="用户--->";
	}
	str+= name+":<br/>"+startTime+"<br />"+newDescriptionStr+"<br/><br/>";
	if(imageArr && imageArr.length > 0){
		for(var i = 0;i<imageArr.length;i++){
			//注意,这里必须加上单引号,否则不能显示图片
			str+="<img src='"+imageArr[i]+"'/><br/><br/>";
		}
	}
	str+="</td></tr></TBODY>";
	$dom.before(str);
	clearData();
}

​

代码2.(后台数据在前台显示,使用的是struts2标签的回显)

<tr > 
	<!-- 利用struts2的标签来根据条件设置不同的背景色 -->
     <td style="background: <s:if test="#obj.managerId!=null">paleturquoise</s:if><s:if test="#obj.managerId==null">lemonchiffon</s:if>">
     	<s:if test="#obj.managerId!=null">
     		客服---><s:property value="#obj.managerName"/>:<br/>
     	</s:if>
     	<s:if test="#obj.managerId==null">
     		用户---><s:property value="#obj.userName"/>:<br/>
     	</s:if>
     	<s:property value="#obj.startTime"/>
     	<br />
     	<span class="description"><s:property value="#obj.description" /></span>
     	<br />
     	<br />
     	<s:if test='#obj.picData=="" || #obj.picData == null'>
     	</s:if>
     	<s:else>
      	<s:iterator value="#obj.imagelist" var="o">
      		<%-- 图片:<s:property value="#o.index"/> --%>
       	<img src="<s:property value="#o"/>"/>
       	<br />
       	<br />
      	</s:iterator>
     	</s:else>
     </td>
  </tr>

3.在步骤2的<span class="description"><s:property value="#obj.description" /></span>中,因为可能存在空格,所以在JS中去处理,代码如下:

$(function(){
	//页面加载完成之后,替换<br/>为换行
	var reg=new RegExp("<br/>","g"); //创建正则RegExp对象    
	var $replaceDom = $('.description');
	/**
	 * 替换数据库的<br/> 为换行在JSP页面显示
	 */
	for(var i = 0;i<$replaceDom.length;i++){
		var replaceStr = $($('.description')[i]).text().replace(reg,"\r\n");   
		$($('.description')[i]).html(replaceStr);	
	}
    /**
	 * 注意:如果要删除多个元素要倒着删除,否则会出现错误
	 */
//	for(var i = $replaceDom.length;i>=0;i--){
//		$($('.description')[i]).remove();
//	}
});

 

转载于:https://my.oschina.net/u/2331760/blog/740577