【隐患排查系统】第一个项目总结

1、web前端与action的交互

（1）要求开发人员对JQuery的相关知识比较熟悉，包括JQuery常见的选择器、ajax调用的语法。

（2）当JSP页面（或模态框）需要数据时，如何初始化？

  　　在当前JSP页面（js文件）中定义一个函数；

 　　在函数中利用JQuery的ajax请求调用action；

　　 在success回调函数中获得json数据，然后对界面中元素（table、select等等）进行初始化。

 　　功能:(1)获取值；（2）利用值初始化界面元素

　　在$(function(){})中调用该函数

　　示例代码

 

（3）在显示一个jsp页面之前，如何先执行一个查询，然后用结果初始化table

 

（4）掌握对常见表单元素初始化

下拉列表（select）

 

  表格（table）

/* 在表格中添加数据，清除表头（第一行）之外的所有行 */

       $("#projectTable  tr:not(:first)").html("");

单选按钮（radio）

（1）单选按钮内容来自数据库

（2）从数据库查询一条记录，根据结果设置单选按钮；

 多选按钮（CheckBox）

（1）多选按钮内容来自数据库

（2）从数据库查询一条记录，根据结果设置单选按钮；

 文本框（text）

  树形控件

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <center>
            <!--文本框-->
            用户名:<input type="text" name="username" id="username" value="初始值" />
            <br />
            <br />

            <!--下拉列表-->
            部门:
            <select name="unit" id="unit" style="width: 200px;">
                <option value="0" selected>--请选择--</option>
                <option value="1">部门1</option>
                <option value="2">部门2</option>
            </select><br />

            <!--多选框-->
            爱好:
            <input type="checkbox" name="aihao" id="" value="0" checked="checked" />篮球
            <input type="checkbox" name="aihao" id="" value="1" checked="checked" />足球
            <input type="checkbox" name="aihao" id="" value="2" />羽毛球
            <input type="checkbox" name="aihao" id="" value="3" />乒乓球
            <br />

            <!--单选框-->
            性别:
            <input type="radio" name="gender" id="" value="0" checked="checked" />男
            <input type="radio" name="gender" id="" value="1" />女
            <br />
            <br />
            <input type="button" id="" value="改变文本值" onclick="initText()" />
            <input type="button" id="" value="改变下拉列表值" onclick="changeSelect()" />
            <input type="button" id="" value="改变多选框值" onclick="changeCheckbox()" />
            <input type="button" id="" value="改变单选框值" onclick="changeRadio()" />
            <input type="button" id="" value="动态添加一个给下拉列表" onclick="addSelect()" />
            <script type="text/javascript">
                /*读取与改变文本框值*/
                function initText() {
                    alert($("#username").val());
                    $("#username").val("这是改变后的值");
                }

                /*读取与改变下拉列表值*/
                function changeSelect() {
                    alert("选的值是" + $("#unit option:selected").val() + ",文本是:" + $("#unit option:selected").text());
                    $("#unit").val("2");
                }

                function changeCheckbox() {
                    /*获取多选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[name='aihao'][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    /*设置为不选中状态*/
                    $($aihaos).attr("checked", false);
                    //设置其中一个为选中状态
                    $("[name='aihao'] :eq(2)").attr("checked", 'checked');
                }

                function changeRadio() {
                    /*获取单选框的值*/
                    //                    $aihaos是一个数组
                    var $aihaos = $("[type='radio'][checked]");
                    alert("多选框选中个数:" + $aihaos.length);
                    for(var i = 0; i < $aihaos.length; i++) {
                        var value = $($aihaos[i]).val();
                        alert(value);
                    }
                    //设改变单选框的值
                    $("[type='radio'] :eq(1)").attr("checked", 'checked');
                }

                //动态给下拉列表增加选项
                function addSelect() {
                    var $unit = $("[name='unit']");
                    alert("多选框选中个数:" + $unit.length);
                    $unit.append("<option value='3'>部门3</option>");
                    $("<option value='4'>部门4</option>").appendTo($unit);
                }
            </script>

        </center>
    </body>

</html>

 

（5）善于使用隐藏域

 

(6)JQuery操作table

  删除表格中一行

Table中的编号没有更新，应该调用reload()方法重新加载页面；

 

（7）jQuery常见选择器

 

posted @ 2017-09-12 19:31  QiaoZhi  阅读(602)  评论(0)  编辑  收藏  举报