轻易修改和调控,另外景况则赶回1条数据记录

这其中分页时查询条件保持的问题又是最让我头疼的事情,这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能

接触mvc不久,陡然未有了viewstate和服务端控件四处都以为不顺手,很多在webform时不必要思量的难点都冒出在后面,这些中分页时查询条件保证的标题又是最让自家脑瓜疼的作业,权衡每每,决定用ajax局地刷新列表的方法来化解这么些主题素材。英特网基于jquery的grid组件非常多,jquerygrid,jqgrid等等,分别试用了须臾间,功能确实十一分有力,但认为上有一点点重,配置项太多,用起来依旧以为束手束脚,所以想来想去,照旧用最笨的诀窍协和做了二个零部件,很简陋,独一的利润正是灵活,轻巧修改和决定。

上节课主要讲授了PHP代码和HTML代码举行合作完毕动态数据网页的办法。

没图没精神,先来个截图看看:

那节课起始上课前端网页如何和后端数据进行交互来促成更头晕目眩的功用。

图片 1

Form标签的概念和效劳

功能:

上节课编写了贰个上学的小孩子分数查询一览页面,必要基于客商输入的口径消息,点击查询按键后,重回展现差别的数额。

  1. 钦点url,协助post或get方式加载数据
  2. 自定义数据查询条件
  3. 列定义时能够对数码项实行简要的转移管理。如:数据源[{ “name”:
    “张三”,  “age”: 12, “sex”: 1 }],渲染时希望把sex的值 1 彰显为 男子
  4. 帮衬多选
  5. 支撑分页
  6. 点击行时自动选中,多选时,点击checkbox进行选仲阳打消选中
  7. 可见回到选中项目标值,多选时再次来到选中值的数组

先来假若实现二个最简便的作用:假使在姓名检索条件文本输入框里面输入三个”a”字符串,则赶回5条数据记录,要是在输入三个”b”字符串,则赶回3条数据记录,其它意况则赶回1条数据记录。

依赖个体的习贯和对职能的分解,定义了如此三个setting:

为了实现那些最简便的功效,供给用到Form标签。

var list = $('#list').GridView({
            'apiUrl': '/Student/List',  // 指定数据请求的URL路径
            'apiType': 'post',  // 请求的方式
            'columns': [    // 要显示的列,title对应表头,column对应数据项的属性名称,width指定列的宽度,func指定绑定时调用的函数名称
                { title: '姓名', column: 'Name', width: 160 },
                { title: '年龄', column: 'Age' },
                { title: '性别', column: 'Sex', width: 100, 'func': 'convertToSex' }
            ],
            'valueColumn': 'StudentId', // data-value 取值的属性名
            'pageSize': 20, // 每页显示的数量
            'isMultiy': false,  // 是否支持多选
            'isTreeView': false,   // 是否支持树形
            'pager': 'pager',   // 指定包含分页的divid,主要是为了能单独控制pager中的一些数据,把pager给拆出来了,后来发现似乎用处不大
            'onRowClick': function(id) { }, // 当数据行被点击时执行的回调,参数是tr中的data-value
            'convertSource': function (data) { return data.body; }, // 使用数据源之前对数据进行转换。因为我的api返回的都是{ code: 200, body: [] }这种类型,需要在这里直接返回body
            'onDataBindComplete': function() {}, // 当数据加载完成,也就是列表渲染完成后的回调。比如说提醒用户加载完成之类的
            'getSearchData': function() { return $('#form1').serialize(); },    // 获取查询参数,这个很重要,想了很多办法,最终采用了这种方案,在查询前运行这个函数,将返回值作为ajax的查询参数
            'listCssClass': 'table',    // 列表table的样式名
            'pagerCssClass': 'pager',   // 分页最外面div的样式名
            'beforeSend': function() { }    // ajax请求之前调用的函数,原本是为了提醒一下加载已开始,请稍后之类的,现在没怎么用到
        });

Form标签成分称之为HTML表单,能够用于采摘顾客输入音信。

OK,接下去便是其一扩充的有血有肉落到实处了,代码比很多,但思路很轻便,重要就是代码的拼凑。大家温馨看呢!

在3-4节内部已经介绍过:

(function ($) {

    $.fn.GridView = function (settings) {
        // 系统变量
        var self = this;
        self.selected = [];
        var pageindex = 1, pageSize = 20;

        if (settings.pageSize && $.isNumeric(settings.pageSize) && settings.pageSize > 0) {
            pageSize = settings.pageSize;
        }

        var rand = Math.floor(Math.random() * 1000);
        var table = $("<table" + (settings.listCssClass ? " class='" + settings.listCssClass + "'" : "") + " id='myList" + rand + "'></table>");

        var colgroup = colgroup2 = "<colgroup>"
        $.each(settings.columns, function (idx, item) {
            colgroup += "<col" + item.width ? " style='width:" + item.width + "px;'" : "" + ">";
            colgroup2 += "<col" + item.width ? " style='width:" + item.width + "px;'" : "" + ">";
        });
        colgroup += "<col style='width:18px;'></col>";
        colgroup += "</colgroup>";
        colgroup2 += "</colgroup>";
        var table = $("<table" + (settings.listCssClass ? " class='" + settings.listCssClass + "'" : "") + " id='myList" + rand + "'></table>");

        var pagerHtml = '<div' + (!settings.pagerCssClass ? '' : ' class="' + settings.pagerCssClass + '"') + '>';
        //var pagerHtml = '';
        pagerHtml += '<a class="disabled" id="first' + rand + '"><i class="fa fa-fast-backward"></i></a>';
        pagerHtml += '<a class="disabled" id="prev' + rand + '"><i class="fa fa-backward"></i></a>';
        pagerHtml += '<div class="pager-index"><b>第</b><input value="1" type="text" maxlength="4" id="index' + rand + '"><b>页</b></div>';
        pagerHtml += '<a class="disabled" id="next' + rand + '"><i class="fa fa-forward"></i></a>';
        pagerHtml += '<a class="disabled" id="last' + rand + '"><i class="fa fa-fast-forward"></i></a>';
        pagerHtml += '<div class="pager-info2"> 共计 0 条记录,';
        pagerHtml += '每页显示 ' + pageSize + ' 条,';
        pagerHtml += '共 1 页,';
        pagerHtml += '用时 0毫秒';
        pagerHtml += "</div></div>";
        var pagerDom = $(pagerHtml);
        var firstButton, prevButton, nextButton, lastButton, currentSpan, pageSizeSpan, totalCountSpan, totalPagesSpan, loadTimeSpan;

        // 临时变量
        var tbody, pager, cbAll, checkboxes, isPager = false, totalPage = 1;

        // 创建table
        self.append(table);

        // 创建thead
        addChildrenToTable();

        // 为tbody赋值
        tbody = $("#tbody" + rand);

        var colCount = settings.columns.length + 2;
        tbody.html("<tr class='empty'><td colspan='" + colCount + "'>等待加载数据...</td></tr>");

        // 创建分页
        if (settings.pager && $("#" + settings.pager)[0]) {
            pager = $("#" + settings.pager);
            isPager = true;
            pager.append(pagerDom);
            setPagerButtonEvent();
        }

        // 创建渲染函数
        self.fun = new Function("data", renderFunString());

        // 渲染第一列
        self.setFirstCol = function (val) {
            if (settings.isMulti) {
                return "<td class='chk'><input type='checkbox' id='cb" + val + "' value='" + val + "'></td>"
            } else {
                return "<td class='no'>" + val + "</td>";
            }
        }

        // 渲染最后一列
        self.setLastCol = function () {
            return "<td></td>";
        }

        // 渲染中间列
        self.setCol = function (content, width, cssClass, level) {
            var html = "<td";
            html += width ? " style='width:" + width + "px'" : "";
            html += cssClass && cssClass != 'undefined' ? " class='" + cssClass + "'" : "";
            html += ">";
            if (settings.isTreeView) {
                html += level ? "" + (level > 0 ? "|—" : "") + "" : "";
            }
            html += content && content != "undefined" ? content : "";
            html += "</td>";
            return html;
        }

        // 显示指定页码的数据
        self.show = function (index, type) {
            self.selected = [];
            if (!settings.apiUrl) {
                return;
            }

            if (!type || type.toLowerCase() != "post") {
                $.get(settings.apiUrl, getAjaxData(), function (data) {
                    var source = [];
                    if (settings.convertSource && $.isFunction(settings.convertSource)) {
                        source = settings.convertSource(data);
                    } else {
                        source = data;
                    }
                    addRowsToTbody(source);
                });
            } else {
                $.post(settings.apiUrl, getAjaxData(), function (data) {
                    var source = [];
                    if (settings.convertSource && $.isFunction(settings.convertSource)) {
                        source = settings.convertSource(data);
                    } else {
                        source = data;
                    }
                    addRowsToTbody(source);
                });
            }
        };

        // 获取选中的ID
        self.getSelectedId = function () {
            if (self.selected.length == 0) {
                return null;
            } else {
                return self.selected[0];
            }
        };

        self.getSelectedIds = function () {
            return self.selected;
        };

        self.clear = function () {
            self.selected = [];
            $("tr", "#myList" + rand).removeClass("selected");
            $(":checkbox", "#myList" + rand).prop("checked", false);
        };

        // 为table内的元素绑定事件
        tbody.on("click", "tr", function () {
            if ($(this).hasClass("empty")) return;
            $("tr", tbody).removeClass("selected").find(":checkbox").prop("checked", false);
            $(this).addClass("selected").find(":checkbox").prop("checked", true);
            $("#cbAll" + rand).prop("checked", false);
            self.selected = [$(this).data("value")];
        });

        // 绑定复选框点击事件
        if (settings.isMulti) {
            cbAll = $("#cbAll" + rand);

            cbAll.on("click", function () {
                if (!checkboxes) checkboxes = $(":checkbox", tbody);

                if ($(this).prop("checked")) {
                    self.selected = [];

                    $.each(checkboxes, function (idx, item) {
                        $(this).prop("checked", true);
                        self.selected.push($(this).val());

                        var tr = $("#tr" + $(item).val());
                        if (!tr.hasClass("selected")) tr.addClass("selected");
                    });
                } else {
                    checkboxes.prop("checked", false);
                    $("tr", tbody).removeClass("selected");
                    self.selected = [];
                }
            });

            tbody.on("click", ":checkbox", function (event) {
                event.stopPropagation();

                if ($(this).prop("checked")) {
                    $("#tr" + $(this).val()).addClass("selected");
                } else {
                    $("#tr" + $(this).val()).removeClass("selected");
                }
                if (!checkboxes) {
                    checkboxes = $(":checkbox", tbody);
                }

                self.selected = [];

                var unCheckedCount = 0;

                $.each(checkboxes, function () {
                    if ($(this).prop("checked")) {
                        self.selected.push($(this).val());
                    } else {
                        unCheckedCount++;
                    }
                });

                if (unCheckedCount > 0) {
                    cbAll.prop("checked", false);
                } else {
                    cbAll.prop("checked", true);
                }
            });
        }

        // 返回渲染函数的程序体
        function renderFunString() {
            var funString = "var self = this; var html = ''; $.each(data, function(idx, item) { var val = ";
            funString += (settings.valueColumn ? "item." + settings.valueColumn : "idx");
            funString += "; html += '<tr id=\"tr' + val + '\" data-value=\"' + val + '\">'; html += self.setFirstCol(val);";
            var level = null;
            if (settings.levelColumn) {
                level = settings.levelColumn;
            }
            $.each(settings.columns, function (idx, item) {
                if (item.func) {
                    funString += " html += self.setCol( " + item.func + "(item), " + item.width + ", '" + item.cssClass + "'" + (level ? " , item." + level : "") + " );";
                } else {
                    funString += " html += self.setCol( item." + item.column + ", " + item.width + ", '" + item.cssClass + "'" + (level ? " , item." + level : "") + " );";
                }
            });
            funString += " html += self.setLastCol(); html += '</tr>'; idx++; }); return html;";
            return funString;
        }

        // 将数据生成html,并插入到tbody中
        function addRowsToTbody(data) {
            if (data && data.body && data.body.length > 0) {
                var html = self.fun(data.body);
                tbody.html(html);

                if (isPager) {
                    setPagerButton(pageSize, pageindex, data.totalCount, new Date().getTime());
                }
            } else {
                var colCount = settings.columns.length + 2;
                tbody.html("<tr class='empty'><td colspan='" + colCount + "'>请求的数据为空</td></tr>");
            }
        }

        // 创建table
        function addChildrenToTable() {
            var body = "<thead>"
            if (settings.columns) {
                if (settings.isMulti) {
                    body += "<th class='chk'><input type='checkbox' id='cbAll" + rand + "' /></th>";
                } else {
                    body += "<th class='no'></th>";
                }

                $.each(settings.columns, function (idx, col) {
                    body += "<th>" + col.title + "</th>";
                });
                body += "<th></th>";
                body += "</thead><tbody id='tbody" + rand + "'></tbody>";

                table.append($(body));
            }
        }

        // 绑定分页按钮的点击事件
        function setPagerButtonEvent() {
            firstButton = $("#first" + rand);
            prevButton = $("#prev" + rand);
            nextButton = $("#next" + rand);
            lastButton = $("#last" + rand);
            currentSpan = $("#index" + rand);

            pageSizeSpan = $("#size" + rand);;
            totalCountSpan = $("#total" + rand);;
            totalPagesSpan = $("#page" + rand);;
            loadTimeSpan = $("#time" + rand);;

            firstButton.on("click", function () {
                if (!$(this).hasClass("disabled")) {
                    pageindex = 1;
                    self.show();
                }
            });

            prevButton.on("click", function () {
                if (!$(this).hasClass("disabled")) {
                    pageindex -= 1;
                    pageindex = pageindex <= 0 ? 1 : pageindex;
                    self.show();
                }
            });

            nextButton.on("click", function () {
                if (!$(this).hasClass("disabled")) {
                    pageindex += 1;
                    self.show();
                }
            });

            lastButton.on("click", function () {
                if (!$(this).hasClass("disabled")) {
                    pageindex = totalPage;
                    self.show();
                }
            });

            currentSpan.on("change", function () {
                var nc = Number($(this).val());
                if (nc && nc <= totalPage && nc > 0) {
                    pageindex = nc;
                    self.show();
                } else {
                    $(this).val(pageindex);
                }
            });
        }

        // 配置 Pager 按钮
        function setPagerButton(size, index, total, start) {
            if (total == 0) {
                pager.hide();
            } else {
                pager.show();
            }

            // 总页数
            var pages = Math.ceil(total / size);
            pages = (pages == 0 ? 1 : pages);
            totalPage = pages;

            if (pages == 1) {
                if (!firstButton.hasClass("disabled")) {
                    firstButton.addClass("disabled");
                }
                if (!prevButton.hasClass("disabled")) {
                    prevButton.addClass("disabled");
                }
                if (!nextButton.hasClass("disabled")) {
                    nextButton.addClass("disabled");
                }
                if (!lastButton.hasClass("disabled")) {
                    lastButton.addClass("disabled");
                }
            } else {
                if (index == 1) {
                    if (!firstButton.hasClass("disabled")) {
                        firstButton.addClass("disabled");
                    }
                    if (!prevButton.hasClass("disabled")) {
                        prevButton.addClass("disabled");
                    }
                } else {
                    if (firstButton.hasClass("disabled")) {
                        firstButton.removeClass("disabled");
                    }
                    if (prevButton.hasClass("disabled")) {
                        prevButton.removeClass("disabled");
                    }
                }
                currentSpan.val(index);
                if (index == pages) {
                    if (!nextButton.hasClass("disabled")) {
                        nextButton.addClass("disabled");
                    }
                    if (!lastButton.hasClass("disabled")) {
                        lastButton.addClass("disabled");
                    }
                } else {
                    if (nextButton.hasClass("disabled")) {
                        nextButton.removeClass("disabled");
                    }
                    if (lastButton.hasClass("disabled")) {
                        lastButton.removeClass("disabled");
                    }
                }
            }
            totalCountSpan.text(total);
            pageSizeSpan.text(this.pageSize);
            totalPagesSpan.text(pages);
            loadTimeSpan.text((new Date().getTime() - start));
        }

        // 获取ajax的查询参数
        function getAjaxData() {
            var param;
            if ($.isFunction(settings.getSearchData)) {
                param = settings.getSearchData();
            }
            if (isPager) {
                if ($.isArray(param)) {                                             // $("form").serializationArray()
                    param.push({ "name": "pageSize", "value": pageSize });
                    param.push({ "name": "pageIndex", "value": pageindex });
                } else if ($.isPlainObject(param)) {                                 // 自定义查询对象
                    $.extend(true, param, { "pageSize": pageSize, "pageIndex": pageindex });
                } else {                                                             // $("form").serialization()
                    param = (param ? param + "&" : "") + "pageSize=" + pageSize + "&pageIndex=" + pageindex;
                }
            }
            return !!param ? param : {};
        }

        return self;
    }

})(jQuery);

/*
 *使用范例:
 *==========================数据格式============================
 {
  "code": 200,
  "describe": "",
  "totalCount": 3,
  "body": [
    {
      "no": 1,
      "name": "王五",
      "family": {
        "father": "王老五",
        "mother": "陈静蓉"
      }
    },
    {
      "no": 2,
      "name": "张三",
      "family": {
        "father": "张作霖",
        "mother": "李培芳"
      }
    },
    {
      "no": 3,
      "name": "李四",
      "family": {
        "father": "李宗仁",
        "mother": "江少芬"
      }
    }
  ]
 }

 *==========================页面调用============================
    <script src="jquery-1.10.2.js"></script>
    <script src="myGrid.js"></script>
    <script>
        var list = $("#list").myGrid({
            apiUrl: "data.json",
            isMulti: false,
            isTree: true,
            cols: [
                { col: "no", width: 120, title: "编号", cssClass: "chk", level: 0 },
                { col: "name", width: 120, title: "姓名", level: 0 },
                { col: "family.father", width: 120, title: "父亲", level: 1, func: "addFix" }
            ],
            valueCol: "no",
            pager: "pager",
            pageSize: 2,
            cssClass: "default-list-table",
            convertSource: function(data) {
                return data;
            }
        });

        // 这个是用来转换数据的方法
        function addFix(obj) {
            return "000" + obj;
        }
        list.show();
    </script>

相似采取form标签来含有各类输入标签成分,并用以提交给后台程序。

二个修改的操作:

form标签内部能够动用差别类其余表单成分来输入分歧体系的数量。

图片 2

比方说输入成分、复选成分、单选元素、下拉框接纳成分、提交开关等等。

比方这样:

<form>

<input type=”text” name=”studentname”>

</form>

诸有此类就是相符标准定义的,input等标签必得放在form伊始和得了标签之内技艺被交给给后端程序。

后端程序经常是通过定义form的action属性值来开展定义的。

例如:

<form action=”studentlist.php”>

<input type=”text” name=”studentname”>

</form>

这些form在提交的时候,会提交给后端程序studentlist.php进行管理。

那么一旦这段代码本人就坐落studentlist.php内,就是团结交给给和煦举行拍卖,那也是契合规范的。当然了,提交给其它二个文书也是切合标准的。

那么,按下四个开关之后,通过何种代码格局来触发提交的动作吗?

有2种方法,一种是行使默许的<input type=”submit”
value=”查询”/>,当点击这些按键的时候,就能够自动提交到form对应的action属性的php文件来扩充管理。

另一种格局是采用JavaScript来扩充提交。由于事先的网页代码编写中,查询按键是经过a标签来兑现了,由此这里大家就来试试看看使用JavaScript方法怎么着提交给后台程序。

JavaScript格局提交Form

首先修改studentlist.php文件,增添form标签,同有的时候候修改查询按钮的a标签的onclick方法:

studentlist.php修改如下:

图片 3image

然后创立别的贰个文本studentlist_do.php文件:

图片 4image

接下来刷新网页:

图片 54-7-3.jpg

在姓名输入框里面输入字符串a,然后点击查询开关:

图片 6image

能够见见浏览器的地方产生了studentlist_do.php了,况且呈现了刚刚输入的字符串a音讯,表明后端程序studentlist_do.php已经收到到了客户输入的音信了。

基于以上示例,能够看出,通过在JavaScript代码中接纳document.forms[0].submit();的不二诀要能够付出到form对应的action程序。

而在action程序中,使用PHP系统全局变量图片 7_POST[“studentname”]就足以拿走输入值。

text文本输入

再一次在浏览器里面访谈studentlist.php网页,然后在姓名文本输入框里面输入字符串b,点击查询按键,能够看出如下结果:

图片 8image

也便是input的种类是text的时候,通过$_POST[“控件name”]能够博获得客户输入的值。

接下去,试试看其余控件类型都以哪些选取客户输入数据的。

小心重新打开浏览器网页的法子,最佳是双重开三个Tab网页窗口,输入网页地址。这样能够制止有个别浏览器缓存未有更新的难点。制止出现代码更新了而是浏览器网页彰显却尚无变动的图景发生。

radio单选开关

性别是2个单选按键,倘若那2个input的type为radio类型的时候,假如name是一模一样的话,则客商只好点选个中的一个。

能够修改网页来试试看看,在前方扩张贰个抉择:全体。

studentlist.php修改如下:

图片 9image

studentlist_do.php修改如下:

图片 104-7-7.jpg

刷新网页,点击单选按键“男”:

图片 11image

然后点击单选开关“女”:

图片 124-7-9.jpg

能够旁观只可以选中一个。然后点击单选开关“全体”:

图片 13image

能够看来只可以选中三个。选中其中任意多个,就不能够入选其余选项了。

来造访提交到后端程序是怎么数值,点击查询开关:

图片 14image

能够看看,接收数据是叁个on。要是选择任何选项
,同样接收数据也是on,这样就不能区分出选择了十一分项目。

那是因为未有给每三个input设置value属性。

studentlist.php修改如下:

图片 154-7-12.jpg

刷新网页,选取性别“男”,点击查询按键:

图片 16image

能够看来接收到了输入的选项数据是”male”,表示单选项选用了“男”那个选项。

即使选取了选项“全体”后点击查查询开关,那么接收到的数额就应该是”all”了。

checkbox多选开关

来探访多选开关接收到的数目是怎么的。

studentlist_do.php修改如下:

图片 174-7-14.jpg

刷新网页,选取课程:语文和数学:

图片 18image

接下来点击查询开关:

图片 19image

能够见到,接收到的数额内容是:数学。

那不相符预期,由于checkbox是多选,所以能够有2种格局来获得各样checkbox的值。

三个方法是给每二个checkbox设置分裂的name,然后分别贰个一个去取得每四个例外name的值。

除此以外三个情势,是给那组checkbox设置同一的name,可是在名称后边加上[],那样PHP代码中拿走的便是叁个数组值。

studentlist.php修改如下:

图片 204-7-17.jpg

studentlist_do.php修改如下:

图片 21image

刷新网页,选用课程:语文、数学和描绘,然后点击查询开关:

图片 224-7-19.jpg

能够看出种种被选中的checkbox的值都得到到了。

select下拉框选用

再来看看下拉框选取类别是如何接收数据的。

studentlist_do.php修改如下:

图片 23image

刷新网页,接纳分数段“75-90”:

图片 24image

下一场点击查询按键:

图片 254-7-22.jpg

能够看出接收的数码就是对应的option的value的值。

抽出差异品种参数的值,并赶回不一样的值

依据一览查询页面包车型大巴成效须求,第壹次跻身页面时,默认不出示任何查询数据,当点击了询问按键之后,依据不一样的查询条件,显示区别的数目,也正是说,点击查询开关后,彰显的网页和点击在此之前基本是同二个页面,借使做成2个php文件,则十分不便于也不能够重用页面代码,由此,能够将form的action属性修改为studentlist.php本身本人,那样就足以高达目标了。

将studentlist_do.php里面包车型客车代码剪切到studentlist.php里面包车型客车初步的岗位,并修改action的值。

studentlist.php修改如下:

图片 264-7-23.jpg

然后刷新网页,输入查询条件:

图片 27image

点击查询按键:

图片 284-7-25.jpg

能够看到网页突显了用户输入的数据值。

左右了如何选择输入数据之后,能够起来编写制定真正的论断逻辑了。

考虑到页面上还只怕会扩大别的的作用,举例点击明细行步向其余页面,那么同样的多少个action就要求看清是要执行哪一种操作,就需求一个界其余注明,由此就必要在网页中加进三个掩蔽的输入项目,通过安装这几个遮掩项指标值为差别的值来报告后端管理程序,要实行的是哪个种类操作。

在form中加进三个躲藏的输入项目应用如下方式:

<input type=”hidden” name=”fromtype” value=””/>

以此输入项目在浏览器中是看不到的类型,可是在$_POST变量里面是能够收起到它的value的。

在document.forms[0].submit();那句代码之前经过JavaScript来修改这几个类型的value就可以高达设置不相同的操作区分的指标了。

並且,将$alldatas变量的概念从背后挪动到眼下来,并修改为依附输入的全名的值分化而回到分化的值。

studentlist.php修改如下:

图片 29image图片 30image图片 314-7-28.jpg

刷新网页:

图片 32image

能够看看,网页突显未有查询数据,那是因为那一年并不曾交给,所以$_POST里面前遇到应的fromtype的值为空,因而依赖判别逻辑再次回到的多少为0条记下。

在姓名检索条件输入字符a,点击查询按键:

图片 33image

能够看看,网页展现了5条数据。这是因为点击查询按键时,调用了JavaScript函数onquery,函数里面安装了fromtype的输入项指标value为search,然后提交到温馨本身php文件从此,通过决断逻辑得知fromtype的值时search,则以为是点击了查询按键,由此举办查询逻辑,依照输入的值为a,再次来到5条数据记录。

在人名检索条件输入字符b,点击查询按键:

图片 34image

能够看来,网页彰显了3条数据。逻辑和方面类似。

在人名检索条件输入字符c,点击查询按键:

图片 354-7-32.jpg

能够看见,网页展现了1条数据。逻辑和方面类似。

PHP代码和HTML代码举办分离

以前在读书HTML和CSS的时候,很关键的三个习感到常是将HTML代码和CSS代码实行分离;

包含后来求学了JavaScript之后,也要跻身将HTML代码和JavaScript代码实行分离;

一直以来的,最棒也将PHP代码和HTML代码实行分离。

本来,在切实供给经过PHP代码输出网页显示内容的那部分没有须求开展分离,可是依据fromtype的值实施不一逻辑的代码部分是足以张开分离的,那样能够让网页显示和作业逻辑代码实行分离,好处也很了解。

将从第一行最初的<?php
和?>以前的代码全体运动到studentlist_do.php文件之中:

studentlist_do.ph修改如下:

图片 36image图片 374-7-34.jpg

下一场修改studentlist.php文件,导入studentlist_do.php文件,类似于Python代码的import一样。

studentlist.php修改如下:

图片 38image

刷新网页,重复后面包车型地铁询问条件进行查询,能够见到结果是同样的。

require的功力就一定于是将相应的文件studentlist_do.php里面包车型地铁内容总体搬到studentlist.php里面i
同样。

经过如此的方法就能够落到实处逻辑和呈现的代码分离了。

发现2个问题:

1.页面最初化时未尝多少,表头的宽窄不对。

2.输入的询问条件在点击查询按钮之后不能记住,比如,采用了学科,点击查询之后,不能够收看刚刚选用的是什么样科目,那样条件和结果就非常不上。

下节课以往缓和那2个难题。