c#后台管理系统底层搭建–LayUi页面调用Ajax

  • Post author:
  • Post category:其他


————造船的过程中遇到的问题———

1.由于本人对前端页面了解不是很深入。加上还没养成深入思考的习惯,故前端在我造大船的过程中有很大的阻力。

2.没能站在更高的角度上去看待问题。

3.做一个日志,方便后期查看使用。

—————————————————————————————————————————————————————–

1.需求描述:

想实现在页面加载的过程中自动调用ajax,然后通过ajax调用后台一般处理程序,返回结果并展现在页面上。

想要通过LayUi内置的一些语法去调用Ajax,而不是在使用Jequry,虽然LayUi底层也是基于Jequry的。

2.问题解决:

直接贴代码吧:

 <script src="../../layuiadmin/layui/layui.js"></script>

    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'user'], function () {
            var $ = layui.$
            , setter = layui.setter
            , admin = layui.admin
            , form = layui.form
            , router = layui.router()
            , search = router.search;

            form.render();

            
            //页面初始加载给页面部分元素进行赋值
            $(function () {
                $().ready(function () {
                    var Type = 'View'
                    var Form = "LoginIndex"
                    var Method = "GetAppName"
                    $.ajax({
                        type: "get",
                        datatype: "text",
                        url: "../../ashx/webSite.ashx",
                        data: { Type: Type, Form: Form, Method: Method },
                        success: function (result) {
                            $("#AppName").html(result)  
                          //#AppName为页面元素的id值
                        }
                    });

                });
            });

        });

    </script>



//实际项目中,此两个script可以合并到一个里面
<script>
        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'set', 'laydate'], function () {
            var $ = layui.$,
            setter = layui.setter
          , admin = layui.admin
          , form = layui.form
          , router = layui.router()
          , search = router.search;
            //监听
            form.on('submit(submit)', function (data) {
                var formadate = data.field
                alert(formadate)
                admin.req({
                    url: "/PlanTask/PlanTaskBtnSave" //实际使用请改成服务端真实接口
                  , data: formadate
                  , done: function (res) {
                      //保存成功后跳转到列表
                      layer.msg('保存成功', {
                          offset: '15px'
                        , icon: 1
                        , time: 1000
                      }, function () {
                          location.href = '../'; 
                      });
                  }
                });
            });
        });
    </script>



版权声明:本文为AntherFantacy原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。