Blogger Information
Blog 53
fans 3
comment 0
visits 55236
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20200229-layui-form ajax提交数据及回调
邯郸易住宋至刚
Original
1486 people have browsed it

layui-form ajax提交数据及回调

一、layui-form

  1. <form class="layui-form" action="">
  2. @csrf
  3. <div class="layui-form-item">
  4. <label class="layui-form-label">输入框</label>
  5. <div class="layui-input-block">
  6. <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  7. </div>
  8. </div>
  9. <div class="layui-form-item">
  10. <label class="layui-form-label">密码框</label>
  11. <div class="layui-input-inline">
  12. <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
  13. </div>
  14. <div class="layui-form-mid layui-word-aux">辅助文字</div>
  15. </div>
  16. <div class="layui-form-item">
  17. <label class="layui-form-label">选择框</label>
  18. <div class="layui-input-block">
  19. <select name="city" lay-verify="required">
  20. <option value=""></option>
  21. <option value="0">北京</option>
  22. <option value="1">上海</option>
  23. <option value="2">广州</option>
  24. <option value="3">深圳</option>
  25. <option value="4">杭州</option>
  26. </select>
  27. </div>
  28. </div>
  29. <div class="layui-form-item">
  30. <label class="layui-form-label">复选框</label>
  31. <div class="layui-input-block">
  32. <input type="checkbox" name="like[write]" title="写作">
  33. <input type="checkbox" name="like[read]" title="阅读" checked>
  34. <input type="checkbox" name="like[dai]" title="发呆">
  35. </div>
  36. </div>
  37. <div class="layui-form-item">
  38. <label class="layui-form-label">开关</label>
  39. <div class="layui-input-block">
  40. <input type="checkbox" name="switch" lay-skin="switch">
  41. </div>
  42. </div>
  43. <div class="layui-form-item">
  44. <label class="layui-form-label">单选框</label>
  45. <div class="layui-input-block">
  46. <input type="radio" name="sex" value="男" title="男">
  47. <input type="radio" name="sex" value="女" title="女" checked>
  48. </div>
  49. </div>
  50. <div class="layui-form-item layui-form-text">
  51. <label class="layui-form-label">文本域</label>
  52. <div class="layui-input-block">
  53. <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
  54. </div>
  55. </div>
  56. <div class="layui-form-item">
  57. <div class="layui-input-block">
  58. <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
  59. <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  60. </div>
  61. </div>
  62. </form>

二、JS

  1. <script>
  2. //Demo
  3. layui.use('form', function(){
  4. var form = layui.form;
  5. //监听提交
  6. form.on('submit(formDemo)', function(data){
  7. $.ajax({
  8. url:"/test/form_save",
  9. async: false,
  10. type:"POST",
  11. dataType: "text",
  12. data:data.field,
  13. success: function(res) {
  14. if (res == **'success'**) {**//后台返回不再需要json字符串,直接返回字符串即可**
  15. return layer.alert(res, {icon: 1});
  16. }else {
  17. return layer.alert(res, {icon: 2});
  18. }
  19. }
  20. });
  21. **return false;**//必不可少
  22. });
  23. });
  24. </script>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments