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

  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. }









posted @ 2015-06-01 12:42  Tim&Blog  阅读(253)  评论(0编辑  收藏  举报