汇联通执法队后台管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

tjAjax.jsp 5.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <!DOCTYPE html>
  2. <%@ page contentType="text/html;charset=utf-8"%>
  3. <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
  4. <!--[if !IE]><!-->
  5. <html lang="en">
  6. <!--<![endif]-->
  7. <head>
  8. <%@ include file="/WEB-INF/jsp/assets.jsp" %>
  9. <script type="text/javascript">
  10. $(function(){
  11. $.fn.showPopover.defaults.placement="right";
  12. //后台返回错误,可以添加监听事件处理
  13. $("#myManage").taiji().on("taijiCVE",function(event,responseText){
  14. $.Taiji.alert({content:"提交"+event.relatedTarget.attr("id")+"出错了!<br>"+responseText});
  15. }).on("taijiOperateSuccess",function(event,responseText){
  16. $("#result").find("p").css("transition","all 1s").css("padding-left","40%");
  17. }).on("taijiAjaxFormSuccess",function(event,responseText){
  18. $.Taiji.alert({content:"taijiAjaxFormSuccess!!!"});
  19. });
  20. //AjaxHref示例
  21. $("#tjAjaxHrefBtn").click(function(){
  22. $("#myManage").taiji("ajaxHref",this,
  23. {async:false,
  24. bsSuccess:function(responseText,note){
  25. $.Taiji.showNote(note);
  26. alert("bsSuccess");
  27. },
  28. complete:function(){
  29. alert("complete");
  30. },
  31. type:'POST',
  32. dataType:'text'
  33. });
  34. alert("ok");
  35. return false;
  36. });
  37. //AjaxForm示例
  38. $("#tjAjaxFormBtn").click(function(){
  39. $("#myManage").taiji("ajaxForm",$("#myForm"),{bsSuccess:function(responseText,note){
  40. $.Taiji.showNote(note);
  41. },
  42. async:false,
  43. complete:function(){
  44. }
  45. });
  46. return false;
  47. });
  48. });
  49. </script>
  50. <style>
  51. .required-star{
  52. color: #f30;
  53. font-family: simsun;
  54. margin-left: 1em;
  55. position: absolute;
  56. }
  57. </style>
  58. </head>
  59. <body >
  60. <!-- begin #page-container -->
  61. <div id="page-container" class="fade in">
  62. <!-- begin #header -->
  63. <%@ include file="/WEB-INF/jsp/header.jsp" %>
  64. <!-- end #header -->
  65. <!-- begin #content -->
  66. <div class="content" style="margin: 0px 180px;">
  67. <div class="row">
  68. <div class="col-md-12">
  69. <div id="myManage" class="well">
  70. <div class="modal-header">
  71. <h4 class="modal-title">tjAjax示例</h4>
  72. </div>
  73. <div class="modal-body">
  74. <form id="myForm" name="myForm" class="form-horizontal" action="${rootUrl }app/sample/tjAjax/add" method="post">
  75. <div class="form-group">
  76. <label class="col-sm-2 control-label">登录名<span class="required-star">*</span></label>
  77. <div class="col-sm-10">
  78. <input type="text" name="loginName" class="form-control" placeholder="登录名必填" size="50" style="width: 550px"/>
  79. </div>
  80. </div>
  81. <div class="form-group">
  82. <label class="col-sm-2 control-label">姓名<span class="required-star">*</span></label>
  83. <div class="col-sm-10">
  84. <input type="text" name="name" class="form-control" placeholder="姓名必填" style="width: 550px"/>
  85. </div>
  86. </div>
  87. <div class="form-group">
  88. <label class="col-sm-2 control-label">性别</label>
  89. <div class="col-sm-10">
  90. <select name="male" title="请选择性别" style="width: 150px">
  91. <option value="true">男</option>
  92. <option value="false">女</option>
  93. </select>
  94. </div>
  95. </div>
  96. <div class="form-group">
  97. <label class="col-sm-2 control-label">爱好</label>
  98. <div class="col-sm-10">
  99. <div class="checkbox-inline ">
  100. <input type="checkbox" name="checkbox" class="magic-checkbox" value="check1" id="check1"><label for="check1">篮球</label>
  101. </div>
  102. <div class="checkbox-inline">
  103. <input type="checkbox" name="checkbox" class="magic-checkbox" value="check2" checked="checked" id="check2"><label for="check2">下棋</label>
  104. </div>
  105. <div class="checkbox-inline">
  106. <input type="checkbox" name="checkbox" class="magic-checkbox" value="check2" checked="checked" id="check3"><label for="check3">书画</label>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="form-group">
  111. <label class="col-sm-2 control-label">电子邮箱</label>
  112. <div class="col-sm-10">
  113. <input type="text" name="email" class="form-control" placeholder="XXX@XXX.XXX" style="width: 550px"/>
  114. </div>
  115. </div>
  116. <div class="form-group">
  117. <label class="col-sm-2 control-label">手机<span class="required-star">*</span></label>
  118. <div class="col-sm-10">
  119. <input type="text" name="mobile" class="form-control" placeholder="13XXXXXXXXXXX" style="width: 550px"/>
  120. </div>
  121. </div>
  122. <div class="form-group">
  123. <label class="col-sm-2 control-label">电话</label>
  124. <div class="col-sm-10">
  125. <input type="text" name="tel" class="form-control" style="width: 550px"/>
  126. </div>
  127. </div>
  128. <div class="form-group">
  129. <label class="col-sm-2 control-label">传真</label>
  130. <div class="col-sm-10">
  131. <input type="text" name="fax" class="form-control" style="width: 550px" />
  132. </div>
  133. </div>
  134. <div id="result" style="margin:10px;color:green;font-weight: bold;">
  135. </div>
  136. </form>
  137. </div>
  138. <div class="modal-footer" style="text-align: center;">
  139. <a href="#" class="btn btn-sm btn-white" id="closeBtn">关闭</a>
  140. <a href="${rootUrl }app/sample/tjAjax/add" data-selector=":text,:checkbox:checked,select" class="btn btn-sm btn-success" id="tjAjaxHrefBtn">ajaxHref</a>
  141. <a href="#" class="btn btn-sm btn-success" id="tjAjaxFormBtn">ajaxForm</a>
  142. <a href="${rootUrl }app/sample/tjAjax/add" data-selector=":text,:checkbox:checked,select" class="taiji_operate {confirm_message:'你确定操作吗???',target:'#result'} btn btn-sm btn-success" id="taijiOperateBtn">taiji_operate</a>
  143. <a href="#" data-form="#myForm" class="taiji_ajaxForm {confirm_message:'你确定提交操作吗?',target:'#result'} btn btn-sm btn-success" id="taijiAjaxformBtn">taiji_ajaxForm</a>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <!-- end #content -->
  150. </div>
  151. <!-- end page container -->
  152. </body>
  153. </html>