码迷,mamicode.com
首页 > Web开发 > 详细

extJs常用的四种Ajax异步提交 - haiq - 博客园

时间:2015-06-01 13:05:40      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:

    1. /**
    2. * 第一种Ajax提交方式
    3. * 这种方式需要直接使用ext Ajax方法进行提交
    4. * 使用这种方式,需要将待传递的参数进行封装
    5. * @return
    6. */
    7. function saveUser_ajaxSubmit1() {
    8. Ext.Ajax.request( {
    9. url : user_save.action,
    10. method : post,
    11. params : {
    12. userName : document.getElementById(userName).value,
    13. password : document.getElementById(password).value
    14. },
    15. success : function(response, options) {
    16. var o = Ext.util.JSON.decode(response.responseText);
    17. alert(o.msg);
    18. },
    19. failure : function() {
    20. }
    21. });
    22. }
    23. /**
    24. * 第二种Ajax提交方式
    25. * 这种方式将为ext的ajax指定一个html表单
    26. * 使用这种方式,不需要将待传递的参数进行封装
    27. *
    28. * @return
    29. */
    30. function saveUser_ajaxSubmit2() {
    31. Ext.Ajax.request( {
    32. url : user_save.action,
    33. method : post,
    34. form : userForm, // 指定表单
    35. success : function(response, options) {
    36. var o = Ext.util.JSON.decode(response.responseText);
    37. alert(o.msg);
    38. },
    39. failure : function() {
    40. }
    41. });
    42. }
    43. /**
    44. * 第三种Ajax提交方式
    45. * 这种方式将为ext的自己的表单进行提交
    46. * 使用这种方式,需要使用ext自己的textField组件
    47. *
    48. * @return
    49. */
    50. function saveUser_ajaxSubmit3() {
    51. // 定义表单
    52. var formPanel = new Ext.FormPanel( {
    53. labelWidth : 75,
    54. frame : true,
    55. bodyStyle : padding:5px 5px 0,
    56. width : 350,
    57. defaults : {
    58. width : 230
    59. },
    60. defaultType : textfield,
    61. items : [ {
    62. fieldLabel : ‘用户名‘,
    63. name : userName,
    64. allowBlank : false
    65. }, {
    66. fieldLabel : ‘密 码‘,
    67. name : password
    68. } ]
    69. });
    70. // 定义窗口
    71. var win = new Ext.Window( {
    72. title : ‘添加用户‘,
    73. layout : fit,
    74. width : 500,
    75. height : 300,
    76. closeAction : close,
    77. closable : false,
    78. plain : true,
    79. items : formPanel,
    80. buttons : [ {
    81. text : ‘确定‘,
    82. handler : function() {
    83. var form = formPanel.getForm();
    84. var userName = form.findField(userName).getValue().trim();
    85. var password = form.findField(password).getValue().trim();
    86. if (!userName) {
    87. alert(‘用户名不能为空‘);
    88. return;
    89. }
    90. if (!password) {
    91. alert(‘密码不能为空‘);
    92. return;
    93. }
    94. form.submit( {
    95. waitTitle : ‘请稍后...‘,
    96. waitMsg : ‘正在保存用户信息,请稍后...‘,
    97. url : user_save.action,
    98. method : post,
    99. success : function(form, action) {
    100. alert(action.result.msg);
    101. },
    102. failure : function(form, action) {
    103. alert(action.result.msg);
    104. }
    105. });
    106. }
    107. }, {
    108. text : ‘取消‘,
    109. handler : function() {
    110. win.close();
    111. }
    112. } ]
    113. });
    114. win.show();
    115. }
    116. /**
    117. * 第四种Ajax提交方式
    118. * 这种方式将html的表单转化为ext的表单进行异步提交
    119. * 使用这种方式,需要定义好html的表单
    120. *
    121. * @return
    122. */
    123. function saveUser_ajaxSubmit4() {
    124. new Ext.form.BasicForm(userForm).submit( {
    125. waitTitle : ‘请稍后...‘,
    126. waitMsg : ‘正在保存用户信息,请稍后...‘,
    127. url : user_save.action,
    128. method : post,
    129. success : function(form, action) {
    130. alert(action.result.msg);
    131. },
    132. failure : function(form, action) {
    133. alert(action.result.msg);
    134. }
    135. });
    136. }









extJs常用的四种Ajax异步提交 - haiq - 博客园

标签:

原文地址:http://www.cnblogs.com/wang3680/p/6ad0089a20397154ef597ef5ea335c3b.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!