技术一前台
Posted 石头-Stone
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了技术一前台相关的知识，希望对你有一定的参考价值。
一、js获取jsp中的值
jsp：<input type="hidden" id="areaName11" name="areaName11" value="${areaName }" />
js ：var areaName = $("#areaName11").val();
注意：对整个页面刷新后，会刷新JS中变量的值
二、表单的两种提交方式
<form id="ffAdd" method="post" action="" data-options="novalidate:true">
</form>
<form id="ffAdd" method="post" data-options="novalidate:true">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" id="btnAddOK" onclick="javascript:submitForm()">保存</a>
</form>
<script>
function submitForm() {
$(‘#ffAdd‘).form(‘submit‘, {
url: ‘dianXiaoErAction_addDianXiaoEr‘+actionExtension,//指定提交的url
onSubmit : function() {
return $(this).form(‘enableValidation‘).form(‘validate‘);
},
success:function(data){
if(data == ‘success‘){ //表明合作伙伴申请说明的信息已经成功保存，需要将页面显示到合作伙伴信息添加页面
$.messager.alert("申请信息","申请成功",‘info‘,function(){
//重新加载“店小二工号”窗口，并关闭“店小二工号申请”窗口
window.parent.reloadTab("电小二工号","电小二工号申请");
});
}
}
});
} <jscript>
三、表单控件
<input 定义/>
<textarea 定义/>
<select 定义/>
<button 定义/>
<input>
//可加下拉框，下拉列表。name的值为提交时传递到action中的变量名称
<input class="easyui-validatebox" type="text" id="channelType" name="channelType" value="defaultValue" />
$(‘#channelType‘).combobox({ //电小二渠道
url:encodeURI(encodeURI(‘systemDDL_getComboValue‘ + actionExtension+ ‘?keyWordName=电小二渠道‘)),
valueField:‘id‘,
textField:‘text‘,
method: ‘get‘,
required:true,
editable:false,
panelHeight: ‘auto‘
});
$(‘#channelType‘).combotree({
url:‘area_getAreaName‘+actionExtension+‘?type=name‘,
valueField: ‘id‘,
textField: ‘text‘,
required: true,
editable:false,
panelHeight: ‘auto‘,
onLoadSuccess:function(data){
$(‘#areaName‘).combotree(‘setValue‘, ‘defaultValue‘);
}
}); //单选
<input class="easyui-validatebox" type="radio" name="idDirectBusiness" id="idDirectBusiness" value="是">是
<input class="easyui-validatebox" type="radio" name="idDirectBusiness" checked="checked" value="否">否
四、后台接收到乱码
encodeURI(encodeURI(‘channelCloseAction_channelCloseList‘+actionExtension+‘?saleName=‘+$(‘#saleName‘).val())
saleName = java.net.URLDecoder.decode(saleName, "utf-8");
后台设置发送到前台数据的编码方式：
response.setContentType("text/javascript;charset=UTF-8");
五、确认信息
$.messager.confirm("确认信息", "是否已在集团系统完成填单？", function (r) {
if (r) {
$(‘#mainForm‘).form(‘submit‘, {
//url : ‘workflow_submitTask‘ + actionExtension+‘?taskId=‘+$("#taskId").val(),//指定提交的url
url : ‘workflow_submitCrmTask‘ + actionExtension,//指定提交的url
onSubmit : function() {
return $(this).form(‘enableValidation‘).form(‘validate‘);
},
success : function(data) {
if(data=="success"){
window.parent.remindNumber--;
$.messager.alert(‘审核信息‘,‘审核成功！‘);
window.parent.reloadTab("待办事项","处理流程");
}else{
alert(‘系统异常，请稍后重试或联系管理员！‘);
}
}
});
}
});
六、ajax使用实例
var postData= {‘crmNumber‘: crmNumber,‘userNumber‘: userNumber,‘companyCode‘: companyCode,‘crmId‘: crmId};
$.messager.confirm("确认信息", "是否已在集团系统完成填单?请仔细核对填写的员工工号", function (r) {
if (r) {
$.ajax({
url : ‘crmnumberAction_validateData‘ + actionExtension,
type: ‘POST‘,
data: postData,
dataType: ‘json‘,
async: true,
success: function(data) {
if(data.success=="success"){
$.messager.alert(‘校验信息‘,‘校验成功！‘);
}
else{
$.messager.alert(‘校验信息‘,‘校验失败，请再次核对员工工号或联系管理员‘);
}
}
});
}
});
//后台接收数据，结果送前台
String crmNumber = request.getParameter("crmNumber");//员工工号
String userNumber = request.getParameter("userNumber");
String companyCode = request.getParameter("companyCode");
try {
String json = "{\"success\":\"" + resultValue + "\"}";
out = response.getWriter();
out.print(json);
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
//////
也可以通过url来传递数据
七、动态页面展示
注意：table里不能放注释信息，否则js会报错？
<table id="checkInfo" class="view">
<thead>
<tr><td colspan="3" class="tit"><span></span>校验信息</td></tr>
<tr>
<th>字段名</th>
<th>本地值</th>
<th>集团值</th>
</tr>
</thead>
<tbody></tbody>
</table>
$("#checkInfo").hide();
//CRM在送接口前，校验信息，动态添加表单信息
function validateResult(data){
if(data.error == "error"){
$.messager.alert(‘信息‘,‘请确认集团信息是否已下发到省内！‘);
}else{
$("#checkInfo").show();
var table = document.getElementById("checkInfo");
//清楚table数据
var t1=document.getElementById("lan_clients_table");
var rowNum=table.rows.length;
if(rowNum>0)
{
for(i=2;i<rowNum;)//第一行为标题，第二行为列标题
{
table.deleteRow(i);
rowNum=rowNum-1;
}
}
var thead = table.firstChild;
var tbody= thead.nextSibling;
for(var i=0; i<data.length; i++){ //遍历json
var row=data[i];
//创建一行
var tr=document.createElement("tr");
if(row.result==0){
var td=document.createElement("td");
td.innerhtml="<font color=\"red\">"+row.chinese+"</font>";
tr.appendChild(td);
var td=document.createElement("td");
td.innerHTML="<font color=\"red\">"+row.local+"</font>";
tr.appendChild(td);
var td=document.createElement("td");
td.innerHTML="<font color=\"red\">"+row.imp+"</font>";
tr.appendChild(td);
}
else{
var td=document.createElement("td");
td.innerHTML=row.chinese;
tr.appendChild(td);
var td=document.createElement("td");
td.innerHTML=row.local;
tr.appendChild(td);
var td=document.createElement("td");
td.innerHTML=row.imp;
tr.appendChild(td);
}
//将行追加到表格上
tbody.appendChild(tr);
}
}
}
ajax使用json进行数据传递和接受
{"java":"value"}
以上是关于技术一前台的主要内容，如果未能解决你的问题，请参考以下文章