Ajax的案例
0
所有回答(2)
0
给每条记录的图标一个唯一的id值：
<td align="center">
<s:if test="messageState == 0">
<img src="${ctx}/images/04.png" id="r${message.messageID}"/>
</s:if>
<s:else>
<img src="${ctx}/images/03.png" id="r${message.messageID}"/>
</s:else>
</td>
Ajax验证：给A标签添加的id= aUnread，再添加事件
jQuery("#aUnread").click(function(){
var strIds="";//定义一个传递数据的变量
$("input[name='checkbox']").each(function (){
if(this.checked){
strIds +=this.value+",";//得到的是多个id值，拼成字符串传到action
}
});
$.ajax({
type: "post",
dataType:'json', //接受数据格式
cache:false,
data:"strIds="+strIds,
url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
beforeSend: function(XMLHttpRequest){
},
success: function(data){
var str=data.str;//接收返回的数据
for(var p in str){ //遍历接受的数组对象
var x="#r"+str[p];//获取要改变的记录的图标id
$(x).attr("src","${ctx}/images/04.png");
//把对应的id值的图标src属性值变成相应图标的路径
}
},
error: function(){
//请求出错处理
alert("Error!");
}
});
});
private String strIds;//省略set get 方法，自动获取到页面传的响应的数据
private String[] str;//省略set get 方法
@Action("/updateMessageStateUnread")
public String updateMessageState() throws Exception{
String[] jStr = strIds.split(",");//把字符串拆分成字符串数组
str=jStr;//把拆分的字符串数组赋给有get set方法的数组变量str返回到页面上
for(int i=0;i<jStr.length;i++){
int id=Integer.parseInt(jStr[i]);
messageUserinfo=messageUserinfoManager.queryById(id);
messageUserinfo.setMessageState(0);
messageUserinfoManager.update(messageUserinfo);
}
return "ajax";
}
0
1 <!--添加角色dialog start--> 2 <div id="add_role_dialog" style="display:none;"> 3 <div class="add-role-item-div"> 4 <div class="add-role-title-div"> 5 角色名称<span><font color="#ff0000;">*</font></span> 6 </div> 7 <div class="add-role-text-div"> 8 <input id="add_role_name_input" type="text" class="mini-textbox" maxlength="10" errorMode="border" validateOnChanged="false" validateOnLeave="false" style="width:100%; height:100%;" /> 9 10 </div> 11 <div id="add_role_name_repeat_text" class="add-role-repeat-div" style="color:#acacac;"> 12 包括数字、字母和下划线，最多10个字符 13 </div> 14 </div> 15 16 <div class="add-role-item-div"> 17 <div class="add-role-title-div"> 18 角色描述 19 </div> 20 <div class="add-role-text-area-div"> 21 <input id="add_role_description_input" class="mini-textarea" maxlength="100" style="width:100%; height:120px;" /> 22 </div> 23 <div class="add-role-repeat-div" style="color:#acacac; margin-top:0px;"> 24 添加角色的详细描述，最多100个字 25 </div> 26 </div> 27 28 </div> 29 <!--添加角色dialog end--> 30 31 <!--添加角色dialog样式表 start--> 32 <style type="text/css"> 33 .add-role-item-div{ 34 margin:0px 0px 0px 0px; 35 padding-bottom:0px; 36 padding-top:0px; 37 } 38 .add-role-title-div{ 39 margin:10px 0px 0px 0px; 40 width:100px; 41 font-weight:bold; 42 } 43 .add-role-repeat-div{ 44 margin:-8px 0px 0px 0px; 45 } 46 .add-role-text-div{ 47 margin:5px 0px 0px 0px; 48 padding:0px; 49 width:420px; 50 height:30px; 51 } 52 .add-role-text-area-div{ 53 margin:5px 0px 0px 0px; 54 width:420px; 55 height:120px; 56 } 57 58 </style> 59 <!--添加角色dialog样式表 end--> 60 61 <!--添加角色dialog start--> 62 <script type="text/javascript"> 63 $(function () { 64 (function ($) { 65 if (!$.isPlainObject($.AddRoleDialog)) { 66 /* Dialog命名空间声明 */ 67 $.AddRoleDialog = {}; 68 69 /* id声明 */ 70 var addRoleDialogID = "add_role_dialog"; 71 var addRoleNameInputID = "add_role_name_input"; 72 var addRoleNameRepeatTextID = "add_role_name_repeat_text"; 73 var addRoleDescriptionInputID = "add_role_description_input"; 74 75 /* 常量声明：是否保存标记位 */ 76 var isSaveFlg = true; 77 78 /* 常量声明：是否通过验证 */ 79 var passValidate = false; 80 81 /* ajax 访问返回结果 */ 82 var ajaxResultState = { 83 "ok": "@Common.Enumeration.CommonEnum.AjaxResultState.OK", 84 "error": "@Common.Enumeration.CommonEnum.AjaxResultState.ERROR" 85 }; 86 87 /* 注册事件 角色名称输入框 */ 88 var addRoleNameInput = mini.get(addRoleNameInputID); 89 addRoleNameInput.on("blur", function () { 90 /* 验证角色名称 */ 91 _validateRoleName(); 92 }); 93 94 addRoleNameInput.on("valuechanged", function () { 95 /* 验证内容是否修改过 */ 96 _validateContentChanged(); 97 }); 98 99 /* 注册时间 角色描述输入框 */ 100 var addRoleDescriptionInput = mini.get(addRoleDescriptionInputID); 101 addRoleDescriptionInput.on("valuechanged", function () { 102 /* 验证内容是否修改过 */ 103 _validateContentChanged(); 104 }); 105 106 /** 107 * function 验证内容是否修改过 108 */ 109 var _validateContentChanged = function () { 110 var roleName = mini.get(addRoleNameInputID).getValue(); 111 var roleDescription = mini.get(addRoleDescriptionInputID).getValue(); 112 if (roleName != "" || roleDescription != "") { 113 isSaveFlg = false; 114 } else { 115 isSaveFlg = true; 116 } 117 }; 118 119 /** 120 * function 验证角色名称 121 */ 122 var _validateRoleName = function () { 123 /* 验证非法字符 */ 124 var roleName = mini.get(addRoleNameInputID).getValue(); 125 var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/; 126 if (roleName.length == 0) { 127 document.getElementById(addRoleNameRepeatTextID).innerHTML = "角色名不可为空"; 128 $("#" + addRoleNameRepeatTextID).attr("Style", "color:red"); 129 mini.get(addRoleNameInputID).setIsValid(false); 130 passValidate = false; 131 return; 132 } else if (!reg.test(roleName)) { 133 document.getElementById(addRoleNameRepeatTextID).innerHTML = "包括数字、字母和下划线，最多10个字符"; 134 $("#" + addRoleNameRepeatTextID).attr("Style", "color:red"); 135 mini.get(addRoleNameInputID).setIsValid(false); 136 passValidate = false; 137 return; 138 } else { 139 document.getElementById(addRoleNameRepeatTextID).innerHTML = "包括数字、字母和下划线，最多10个字符"; 140 $("#" + addRoleNameRepeatTextID).attr("Style", "color:#acacac"); 141 mini.get(addRoleNameInputID).setIsValid(true); 142 } 143 /* 验证角色重名 */ 144 var errorFunction = function () { 145 document.getElementById(addRoleNameRepeatTextID).innerHTML = "验证角色名称重名发生异常"; 146 $("#" + addRoleNameRepeatTextID).attr("Style", "color:red"); 147 mini.get(addRoleNameInputID).setIsValid(false); 148 }; 149 150 $.ajax({ 151 type: "post", 152 url: "/Core/Role/ValidateRoleName", 153 data: { 154 "roleName": roleName 155 }, 156 dataType: "json", 157 success: function (jsonData) { 158 var result = jsonData[0]["result"]; 159 if (result == ajaxResultState.ok) { 160 if (jsonData[0]["ValidateResult"] == "1") { 161 document.getElementById(addRoleNameRepeatTextID).innerHTML = "包括数字、字母和下划线，最多10个字符"; 162 $("#" + addRoleNameRepeatTextID).attr("Style", "color:#acacac"); 163 mini.get(addRoleNameInputID).setIsValid(true); 164 passValidate = true; 165 } else { 166 document.getElementById(addRoleNameRepeatTextID).innerHTML = "角色名称已存在"; 167 $("#" + addRoleNameRepeatTextID).attr("Style", "color:red"); 168 mini.get(addRoleNameInputID).setIsValid(false); 169 passValidate = false; 170 } 171 } else { 172 errorFunction(); 173 passValidate = false; 174 } 175 }, 176 error: function () { 177 errorFunction(); 178 passValidate = false; 179 } 180 }); 181 } 182 183 184 /* 窗口初始化 */ 185 var addRoleDialog = $("div#" + addRoleDialogID); 186 addRoleDialog.dialog({ 187 autoOpen: false, 188 closeText: "关闭", 189 width: 450, 190 height: 380, 191 resizable: false, 192 modal: true, 193 title: "添加角色", 194 open: function () { 195 196 }, 197 buttons: [{ 198 text: "保存", 199 icons: { 200 primary:"dialog-button-icon-save" 201 }, 202 click: function () { 203 /* 保存 */ 204 _saveRole(); 205 } 206 }, { 207 text: "取消", 208 icons: { 209 primary:"dialog-button-icon-cancel" 210 }, 211 click: function () { 212 addRoleDialog.dialog("close"); 213 } 214 }], 215 beforeClose: function (event, ui) { 216 if (!isSaveFlg) { 217 $.MessageDialog.showConfirmDialog({ 218 Message: "角色数据已修改，是否需要保存？", 219 ImageType: $.MessageDialog.ImageType.Question, 220 ConfirmButton: function () { 221 /* 保存 */ 222 _saveRole(); 223 }, 224 CancelButton: function () { 225 isSaveFlg = true; 226 addRoleDialog.dialog("close"); 227 } 228 }); 229 return false; 230 } 231 return true; 232 }, 233 close: function (event, ui) { 234 isSaveFlg = false; 235 } 236 }); 237 238 /* 对话框参数集合 */ 239 var addRoleDialogSettings = {}; 240 241 $.AddRoleDialog.showAddRoleDialog = function (option) { 242 $.extend(addRoleDialogSettings, option); 243 _initAddRoleDialog(); 244 addRoleDialog 245 .dialog("option", "position", { my: "center", at: "center", of: window }) 246 .dialog("open"); 247 mini.parse(); 248 249 }; 250 251 /** 252 * function 初始化对话框数据 253 */ 254 var _initAddRoleDialog = function () { 255 isSaveFlg = true; 256 passValidate = false; 257 mini.get(addRoleNameInputID).setValue(""); 258 document.getElementById(addRoleNameRepeatTextID).innerHTML = "包括数字、字母和下划线，最多10个字符"; 259 $("#" + addRoleNameRepeatTextID).attr("Style", "color:#acacac"); 260 mini.get(addRoleDescriptionInputID).setValue(""); 261 } 262 263 /** 264 * function 保存角色数据 265 */ 266 var _saveRole = function () { 267 var errorFunction_save = function () { 268 $.MessageDialog.showMessageDialog({ 269 Message: "保存角色数据失败", 270 ImageType: $.MessageDialog.ImageType.Error 271 }); 272 mini.hideMessageBox(loadPagePanel); 273 }; 274 if (passValidate) { 275 /* 保存数据 */ 276 loadPagePanel = mini.loading("正在保存角色数据……", messageDialogTitle); 277 $.ajax({ 278 type: "post", 279 url: "/Core/Role/SaveAddRole", 280 data: { 281 "roleName": mini.get(addRoleNameInputID).getValue(), 282 "roleDescription": mini.get(addRoleDescriptionInputID).getValue() 283 }, 284 dataType: "json", 285 success: function (jsonData) { 286 var result = jsonData[0]["result"]; 287 if (result == ajaxResultState.ok) { 288 $.MessageDialog.showMessageDialog({ 289 Message: "保存数据成功", 290 ImageType:$.MessageDialog.ImageType.Info 291 }); 292 mini.hideMessageBox(loadPagePanel); 293 isSaveFlg = true; 294 if (typeof (addRoleDialogSettings["successCallback"]) == "function") { 295 addRoleDialogSettings["successCallback"](); 296 } 297 /* 关闭对话框 */ 298 addRoleDialog.dialog("close"); 299 } else { 300 errorFunction_save(); 301 } 302 }, 303 error: function () { 304 errorFunction_save(); 305 } 306 }); 307 } 308 } 309 310 } 311 })(jQuery); 312 }); 313 </script> 314 <!--添加角色dialog end-->
