首页 新闻 搜索 专区 学院

Ajax的案例

0
悬赏园豆:10 [待解决问题]

需要Ajax的动态添加与修改案例

请问哪位大神有资源代码

Adminstratorhe的主页 Adminstratorhe | 初学一级 | 园豆:192
提问于:2016-10-28 11:32
< >
分享
所有回答(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!");
              }
       });
    });

々学长 | 园豆:223 (菜鸟二级) | 2016-10-28 14:17

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) 反对(0) 々学长 | 园豆:223 (菜鸟二级) | 2016-10-28 14:20
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-->
这是我们现在在做的项目中一个ajax无刷新添加角色的代码
stagebo | 园豆:132 (初学一级) | 2016-10-29 22:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册