老杨JS应用篇

p8-JavaScript应用篇-DOM对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

一个完整的标签对应一个DOM对象

p9-JavaScript应用篇-document对象

在这里插入图片描述

一个html页面对应一个document对象。同时打开3个页面,那就有3个document对象。比如下面的切割窗口中有三个页面,就会有3个document对象。
在这里插入图片描述

p10-JavaScript应用篇-document对象定位方式【通过document对象定位DOM对象的方式】

在这里插入图片描述

p11-JavaScript应用篇-浏览器缓存

在这里插入图片描述

p12-JavaScript应用篇-JS调试器【JS对象在浏览器调试】

p13-JavaScript应用篇-DOM对象控制标签属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p14-JavaScript应用篇-监听事件

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            //1、检测用户密码框中是否有内容
            var content = document.getElementById("one").value;
            if (content != ""){
                document.getElementById("font_1").innerHTML = "*";
            }else{
                document.getElementById("one").focus();
                document.getElementById("font_1").innerHTML = "密码不能为空";
            }
        }
        function fun2(){
            var pwd1 = document.getElementById("one").value;
            var pwd2 = document.getElementById("two").value;
            if (pwd1 != pwd2){
                document.getElementById("font_2").innerHTML = "密码不一致,请重新输入";
            }else{
                document.getElementById("font_2").innerHTML = "*";
            }

        }
    </script>
</head>
<body>
<center>
    <form action="/myWeb/user/add" method="get">
        <table border="3px">
            <tr>
                <td>
                    用户姓名
                </td>

                <td>
                    <input type="text" name="userName" />
                </td>
            </tr>

            <tr>
                <td>
                    用户密码
                </td>
                <td>
                    <input type="password" name="password" id="one"/>
                    <font id="font_1" style="font-size:12px;color: red">*</font>
                </td>font_1
            </tr>

            <tr>
                <td>
                    确认密码
                </td>
                <td>
                    <input type="password" name="password" id="two" onfocus="fun()" onblur="fun2()"/>
                    <font id="font_2" style="font-size:12px;color: red">*</font>
                </td>
            </tr>

            <tr>
                <td>
                    用户性别
                </td>

                <td><input type="radio" name="sex" value="男"/><input type="radio" name="sex" value="女"/>
                </td>
            </tr>

            <tr>
                <td>
                    用户邮箱
                </td>

                <td>
                    <input type="text" name="email" />
                </td>
            </tr>

            <tr>
                <td>
                    <input type="submit" value="用户注册"/>

                </td>

                <td>
                    <input type="reset" value="重置"/>
                </td>
            </tr>


        </table>
    </form>
</center>

</body>
</html>

p15-JavaScript应用篇-模拟面试

在这里插入图片描述

增加一条特色:在线阅卷功能,使用session,出题和阅卷使用同一个session,就可以共享题目和答案信息。避免了阅卷的时候再去数据库中做查询。节省了处理时间。

  • 为什么不使用cookie,而选择session呢,因为cookie存在浏览器缓存中,不太安全,学生可以在浏览器中cookie查看到答案。

在这里插入图片描述

  • 多线程中interrupt的作用
  • 重载与重写的区别?
  • 哪些方法不能被重写?

私有的方法【私有方法不能被继承,所以不能重写。】
父类的构造方法不能被重写,构造方法蹦年被继承
final修饰的方法不能被重写

  • 控制浏览器的请求行为主要控制哪些信息?

1、请求方式
2、请求地址
3、请求参数

  • 请求参数的来源?

1、地址栏
2、超链接
3、form表单

  • get请求的方式

浏览器地址栏
超链接
form表单中默认action=“get”

  • 表单域标签在哪些情况下才可以提供请求参数?

标签内要有name属性。

  • Http请求协议包有几层结构?

四层。1、请求行
2、请求头
3、空白行
4、请求体

  • 请求参数在请求协议包的哪里?

根据请求方式的不同,携带的请求参数也存放在不同的位置。
1、get方式请求的时候,参数在请求头中。
2、post方式请求的时候,参数在请求体中

  • 浏览器发送的cookie在请求协议包中的什么地方?

请求头中。

  • 你们之前的项目中的请求方式一般以什么为主?

如果是登录模块需要输入密码这种,就是post方式,其他情况基本是get方式。考虑到数据的隐私性和上传文件的大小。

  • 请求协议包到达HTTP服务器后,会做什么处理?

首先给当前请求协议包生成一个请求对象和响应对象,然后调用请求对象读取请求参数,从请求行中读取到他的请求地址和请求方式。调用service方法判断请求方式为 get还是post。如果是静态资源文件,那就直接将文件以二进制写入相应包中。如果是动态资源文件,就创建出动态资源文件实例对象Servlet,根据请求方式调用doGet或doPost方法得到处理结果,再将结果写入响应体中。

  • Servlet对象的生命周期怎么控制?

servlet的生命周期就是从servlet出现到销毁的全过程。主要分为以下几个阶段:
加载类—>实例化(为对象分配空间)—>初始化(为对象的属性赋值)—>请求处理(服务阶段)—>销毁
服务器启动时(web.xml中配置load-on-startup=1,默认为0)或者第一次请求该servlet时,就会初始化一个Servlet对象,也就是会执行初始化方法init(ServletConfig conf),该servlet对象去处理所有客户端请求,service(ServletRequest req,ServletResponse res)方法中执行,最后服务器关闭时,才会销毁这个servlet对象,执行destroy()方法。其中加载阶段无法观察,但是初始化、服务、销毁阶段是可以观察到的。

  • JDBC的流程

注册驱动
获取链接
获得数据库操作对象
执行sql语句
查询结果集
释放资源

  • 如果通过一条sql语句,向一个表中插入多行数据?

insert into 表名 values (),(),()
其中每一个小括号就是一个数据。

  • 表文件操作过程中,最常用的就是查询命令,请描述查询命令的执行顺序

from、where、group by、having、select、order by 、limit
注记:fwghsol

  • 聚合函数,count(字段),count(*)的区别?

前者是统计当前字段中内容布不为null的数量,后者是统计当前表中的总行数
前者中有null的记录不会被统计。

  • 数据库多表查询方案?

1、内连接、外连接
外连接分为左外连接和右外连接。

  • JSP的执行原理是什么?

Web服务器将jsp文件编辑为一个servlet接口实现类,编译为.class文件,再调用_jspservice方法将jsp内容发送到响应体中。

  • 为什么离职?

想多赚点钱,学习新技术。

  • 多线程中Thread和Runnable的区别

Thread是一个类,实现多线程的一个途径就是继承这个Thread
Runnable是一个接口,实现多线程就可以通过实现这个接口去做。

1)在Servlet规范中,指定【动态资源文件】开发步骤
2)在Servlet规范中,指定Http服务器调用动态资源文件规则
3)在Servlet规范中,指定Http服务器管理动态资源文件实例对象规则

  • Servlet数据共享的方案?

1、ServletContext全局作用域对象
2、cookie
3、HttpServletSession会话作用域对象
4、HttpServletRequest请求作用域对象

  • cooike和session的区别

cookie只能存放字符串,session什么能放
cookie只能存放一个键值对【会员卡】,session不限制【保险柜】。
cookie存在于浏览器缓存中,session存在于服务端。
在这里插入图片描述

  • JSP中有哪几种作用于对象?

application
request
response
PageContent

  • js怎么调试?

在浏览器中调试

  • 为什么选择使用tomcat服务器?

因为是给学生做的,每次考试也就几千人,而tomcat每次可以接受1400次左右的访问量,所以没必要使用太高级的服务器,节省资源。

  • 使用的什么服务器?

开发的时候是tomcat,但是具体上线的时候部署的什么服务器我就不知道了,因为是实施管的。

  • 为什么不去直接实现Servlet,而要层层继承呢,最终继承HttpServlet?

降低了开发难度,只需要对HttpServlet中的需要使用的方法重写就可以。父类帮忙实现了一部分。

  • 重定向接受的请求方式是什么?

是get,因为重定向类似于地址栏发送请求,需要将location属性写到响应包中的响应头中。

  • 如何判断浏览器处理页面跳转时,选择的是重定向还是请求转发?

1、查看地址栏的地址变化
2、F12,查看状态码是否为302。

  • 请求转发中,请求方式是get还是post?

在请求转发过程中,浏览器只发送了一次请求,在服务端只接受了一个请求协议包,在请求转发的过程中,所有的servlet共享同一个请求协议包,而我们的tomcat是根据请求协议包中的method属性来决定请求方式调用doGet或doPost方法。所以参与到一次请求转发过程中的所有servlet的请求方式是与浏览器发送的请求协议包中的请求方式保持一致的。

  • 从map中取出数据并做转换的时候可能会出现空指针异常,怎么避免?

不使用基本数据类型来接收,而是使用基本数据类型的包装类来接收,包装类是属于引用数据类型的,引用该数据类型可以接受null值的,后续可以判断是否为null。

  • SELECT INTO 和 INSERT INTO SELECT 两种表复制语句的区别

前者是表文件的备份。复制后创建新表;
后者是数据行的备份。将查询到的信息添加到一张存在的表中,要求两张表的结构是一致的。

  • 连接查询形成的新表有什么特征?

笛卡尔积现象,数据冗余。

  • 多线程中run方法和sart线程的区别?

start方法是开启线程,run方法是线程真正的执行内容。

  • 线程在执行的时候,调用interrupt方法,那么正在执行的这个线程会不会立刻停止执行?

interrupt() 方法只是改变中断状态而已,它不会中断一个正在运行的线程。这一方法实际完成的是,给受阻塞的线程发出一个中断信号,这样受阻线程就得以退出阻塞的状态。更确切的说,如果线程被Object.wait, Thread.join和Thread.sleep三种方法之一阻塞,此时调用该线程的interrupt()方法,那么该线程将抛出一个 InterruptedException中断异常(该线程必须事先预备好处理此异常),从而提早地终结被阻塞状态。如果线程没有被阻塞,这时调用 interrupt()将不起作用,直到执行到wait(),sleep(),join()时,才马上会抛出InterruptedException。

  • 数据库中char和varchar类型的区别?

1、char是定长、varchar是可变长。
2、存储容量。char最大可存储255字节。varchar可存储65532。

  • 如果要存放的字符串是以空格结尾,那么用char还是varchar存储?

应该用varchar字符。

  • 期望薪资是多少?

不要有区间,直接说价格。

p16-JavaScript应用篇-键盘监听事件【模拟百度搜索条】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var myArray = [
            "allen","smith", "tom","mike","jones",
            "tomcat","for","while","back","java",
            "index","radio"
        ];
        function fun1(){
            //1、拿到用户在文本框中的内容
            var content = document.getElementById("one").value;
            if (content == ""){
                document.getElementById("two").style.display="none";
                return ;
            }

            //2、到数组中定位包含指定内容的字符串
            var value = "";
            for (var i = 0;i<myArray.length;i++){
                var str = myArray[i];
                if(str.indexOf(content) != -1){
                    value += str+"<br>";
                }
            }
            //3、将定位到的字符串作为文字显示内容填充到DIV标签。
            //拿到div框
            var domObj = document.getElementById("two");
            if (value == ""){
                document.getElementById("two").style.display = "none";
                return ;
            }
            domObj.innerHTML = value;
            //将默认隐藏的div显示出来
            domObj.style.display = "block";//display=none是隐藏,display=block是显示。
        }
    </script>
</head>
<body>
    <center>
        <img src="baidulogo.png" width="270px" height="129px"><br>
        <input type="text" id="one" size="50" onkeyup="fun1()"/>
        <input type="button" style="background-color:blue;color: white" value="百度一下" />
        <div id="two" style="background-color:antiquewhite;color: red;width: 430px;display: none">

        </div>
    </center>
</body>
</html>

在这里插入图片描述

p17-JavaScript应用篇-onload监听事件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p18-JavaScript应用篇-基于dom对象监听事件绑定

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(){
            //1、拿到标题行的checked属性
            var flag = document.getElementById("one").checked;
            //2、定位数据行上的所有的checkbox
            var domArry = document.getElementsByName("ck");
            //3、将标题行checkbox的属性赋值给数据行中的checkbox
            for(var i=0;i<domArry.length;i++){
                domArry[i].checked = flag;
            }
        }
        function fun1(domObj){
            this.style.backgroundColor="blue";
        }

        function fun2(domObj){
            this.style.backgroundColor="white";
        }
        //定义一个主函数,等到页面加载完毕后执行
        function main(){
            //1、定位所有的tr标签。
            var domArray = document.getElementsByTagName("tr");
            //2、循环遍历,依次通过dom对象onmouseover和onmouseout函数绑定在标签上
            for(var i = 1;i<domArray.length;i++){
                var trDom = domArray[i];
                trDom.onmouseover = fun1;
                trDom.onmouseout = fun2;
            }
        }
    </script>

</head>
<body onload = "main()">
<center>
    <table border="2" align="center">
        <tr>
            <td>
                <input type="checkbox" id="one" onclick="fun()">全选/全不选
            </td>
            <td>
                姓名
            </td>
            <td>
                职位
            </td>
            <td>
                工资
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                mike
            </td>
            <td>
                初级程序员
            </td>
            <td>
                10000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                smith
            </td>
            <td>
                高级程序员
            </td>
            <td>
                40000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                king
            </td>
            <td>
                架构师
            </td>
            <td>
                45000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                johns
            </td>
            <td>
                产品经理
            </td>
            <td>
                15000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                老刘
            </td>
            <td>
                人事经理
            </td>
            <td>
                20000
            </td>
        </tr>

    </table>
</center>

</body>
</html>

p19-JavaScript应用篇-综合例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      //功能0:在浏览器加载完毕后,自动将监听事件和标签进行绑定
      function main(){
          //为标题行上的checked绑定单击事件并关联方法1
          document.getElementById("one").onclick = fun1;
          //2、为数据行中的所有checkbox绑定onclick事件并关联fun2
          var domArray = document.getElementsByName("ck");
          for (var i = 0;i<domArray.length;i++){
              var domObj = domArray[i];
              domObj.onclick = fun2;
          }
          //3、为数据行中的数据绑定悬停事件onmouseover,并关联fun3,func4
          domArray = document.getElementsByTagName("tr");
          for (var i = 1;i<domArray.length;i++){
              var domObj = domArray[i];
              domObj.onmouseover = fun3;
              domObj.onmouseout = fun4;
          }
      }
      //功能1:根据标题行的checked属性控制所有的数据行的checked属性
      function fun1(){
          //1、获得标题行的checkbox的选中状态属性
          var flag = document.getElementById("one").checked;
          //2、定位数据行所有的checkbox对应的DOM属性
          var domArray = document.getElementsByName("ck");
          //3、循环遍历,将标题行的checked状态值设置到数据行
          for (var i = 0;i<domArray.length;i++){
              var domObj = domArray[i];
              domObj.checked = flag;
          }
      }
      //功能2:根据数据行的所有的checked属性设置标题行的checked属性
      function fun2(){
          //1、获取数据行所有checked的个数
          var domArray = document.getElementsByName("ck");
          checkedNum = 0;
          //2、得到所有数据行的checked属性为true的个数
          for(var i = 0;i<domArray.length;i++){
              var domObj = domArray[i];
              if (domObj.checked == true){
                  checkedNum++;
              }
          }
          //3、判断,如果上面的统计数量不等于所有数据行数,那就将标题行的checked属性设为false
          if (domArray.length != checkedNum){
              document.getElementById("one").checked = false;
          }else{
              document.getElementById("one").checked = true;
          }
      }
      //3、在数据行中实现鼠标的悬停变色功能
      function fun3(){
          this.style.backgroundColor="green";
          this.style.color="red";
      }

      function fun4(){
          this.style.backgroundColor="white";
          this.style.color="black";

      }
    </script>

</head>
<body onload = "main()">
<center>
    <table border="2" align="center">
        <tr>
            <td>
                <input type="checkbox" id="one" >全选/全不选
            </td>
            <td>
                姓名
            </td>
            <td>
                职位
            </td>
            <td>
                工资
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                mike
            </td>
            <td>
                初级程序员
            </td>
            <td>
                10000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                smith
            </td>
            <td>
                高级程序员
            </td>
            <td>
                40000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                king
            </td>
            <td>
                架构师
            </td>
            <td>
                45000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                johns
            </td>
            <td>
                产品经理
            </td>
            <td>
                15000
            </td>
        </tr>

        <tr>
            <td>
                <input type="checkbox" name="ck">
            </td>
            <td>
                老刘
            </td>
            <td>
                人事经理
            </td>
            <td>
                20000
            </td>
        </tr>

    </table>
</center>

</body>
</html>

p20-JavaScript应用篇-arguments属性

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
加粗样式

java中早期也有这功能。方法重载
在这里插入图片描述

p21-JavaScript高级篇-function类型对象

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 标准方式申明函数对象时,函数对象的创建时机。
    在这里插入图片描述
    在这里插入图片描述
  • 匿名方式申明函数对象时,函数对象的创建时机。
    在这里插入图片描述

p22-JavaScript高级篇-function类型对象相关面试题【京东面试题】

在这里插入图片描述
在这里插入图片描述

  • 第二次加载script,执行命令行时,创建匿名函数对象,重载刚才的函数
    在这里插入图片描述

p23-JavaScript高级篇-全局变量与局部变量

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p24-JavaScript高级篇-Object类型对象特征

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

p25-JavaScript高级篇-自定义构造函数

  • 构造函数在声名的时候和普通函数是一致的,没有区别。
  • 调用的时候普通函数和构造函数有区别。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

p26-JavaScript高级篇-this指向问题

  • java中this的指向问题
    在这里插入图片描述
  • javaScript中this的指向与java一致
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

p27-JavaScript高级篇-京东javaScript面试题

在这里插入图片描述

p27-JavaScript高级篇-京东javaScript面试题【在javascript中模拟HashMap】

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HashMap</title>
    <script type="text/javascript">
        <!--使用object模拟HashMap-->
        // function HashMap(){
        //     var obj = new Object();
        //     this.put = function (key,value){
        //         obj[key] = value;
        //
        //     };
        //     this.get  = function (key){
        //         return obj[key];
        //     };
        // }
        // var map = new HashMap();
        // map.put("key1","100");
        // map.put("key2","200");
        // var num = map.get("key1");
        // window.alert("num的值是:"+num);
        <!--使用object模拟HashMap-->
        <!--使用数组模拟HashMap-->
        function HashMap(){
            var myArray = new Array();
            this.put = function (key,value){
                myArray[key] = value;
            };
            this.get = function (key){
                return myArray[key];
            };
        }
        var map = new HashMap();
        map.put("key1","马仲杰");
        map.put("key2","哈金玮");
        var str = map.get("key2");
        window.alert("key2的值是:"+str);
    </script>
</head>
<body>
</body>
</html>

p28-JavaScript高级篇-JSON

在这里插入图片描述

  • JSON对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //模拟一个学生对象:学号,姓名,study函数
        var stuObj = {"sid":1,
                     "sname":"mike",
                     "study":function () {window.alert(this.sname+"在学习");
            }};
        window.alert("stuObj的数据类型是:"+typeof stuObj);
        window.alert("stuObj.sid="+stuObj.sid+",stuObj.sname="+stuObj.sname);
        stuObj.study();
    </script>
</head>
<body>

</body>
</html>
  • JSON数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var jsonArrry = [
            {"cityId":1,"cityName":"北京市"},
            {"cityId":2,"cityName":"上海市"},
            {"cityId":3,"cityName":"广州市"},
        ];
        for (var i = 0;i<jsonArrry.length;i++){
            var cityObj = jsonArrry[i];
            window.alert("城市编号:"+cityObj.cityId+"   城市名字:"+cityObj.cityName);
        }
    </script>
</head>
<body>
</body>
</html>

p28-JavaScript高级篇-通过JSON对象和服务端javascript通信

在这里插入图片描述
在这里插入图片描述

p29-JavaScript高级篇-任意类型转换为JSON类型

在这里插入图片描述

package com.bjpowernode.controller;
import com.bjpowernode.entity.Student;
import com.bjpowernode.util.ReflectUtil;

import java.io.IOException;
import java.rmi.StubNotFoundException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @Author:马仲杰
 * @Date 2021/5/26
 **/
public class OneServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response)
            throws ServletException, IOException {
        //Student stu = new Student(12,"马仲杰");
        //String str = "{\"sid\":10,\"sname\":\"mike\"}";
        Student stu = new Student(20,"mazhongjie");
        String str = ReflectUtil.jsonUtil(stu);
        request.setAttribute("key",str);
        request.getRequestDispatcher("index_1.jsp").forward(request,response);
    }
}

package com.bjpowernode.util;

/**
 * @Author:马仲杰
 * @Date 2021/5/27
 *
 **/

import java.lang.reflect.Field;

/**
 * 将任意类型对象内容转换为JSON对象,通过反射机制
 */
public class ReflectUtil {
    public static String jsonUtil(Object obj){
        Class classFile = null;
        Field fieldArray[] = null;
        StringBuffer str = new StringBuffer("{");
        //1、获得当前对象的【class文件】
        classFile = obj.getClass();
        //2、获得【class文件】所有属性
        fieldArray = classFile.getDeclaredFields();
        //3、获得当前对象所有属性的值
        try {
            for (int i = 0;i<fieldArray.length;i++){
                Field field = fieldArray[i];
                field.setAccessible(true);
                String fieldName = field.getName();//获得属性名称
                Object fieldValue = field.get(obj);

                //4、将获得的属性以及值拼接为JSON格式字符串
                str.append("\"");
                str.append(fieldName);
//                str.append("\"");
                str.append("\":");
                str.append("\"");
                str.append(fieldValue);
                str.append("\"");
                if ( i < fieldArray.length-1){
                    str.append(",");
                }
            }
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }finally {
            str.append("}");
        }
        return str.toString();
    }
}

<%--
  Created by IntelliJ IDEA.
  User: ZhongjieMa
  Date: 2021/5/26
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script type="text/javascript">
      var stuObj = ${requestScope.key};
      window.alert("学员编号:"+stuObj.sid+"学员姓名:"+stuObj.sname);

    </script>
  </head>
  <body>
  $END$
  </body>
</html>

p30-JavaScript高级篇-工具包使用介绍JSON工具包

  • 将JSON相关的工具包添加到项目文件下的web—>lib中
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
package com.bjpowernode.controller;

import com.bjpowernode.entity.Dept;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**ine
 * @Author:马仲杰
 * @Date 2021/5/27
 **/
public class OneServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request,
                         HttpServletResponse response)
            throws ServletException, IOException {

        //1、得到一个部门类型对象
        Dept dept = new Dept(10,"财务处","曹县");

        //2、通过json.jar工具类将Dept对象中的内容转换为JSON格式字符串
        JSONObject jsonObj = JSONObject.fromObject(dept);

        //3、将json格式的字符串添加到请求作用域对象中。
        request.setAttribute("key",jsonObj.toString());

        //4、通过请求转发,申请调用index_1.jsp
        request.getRequestDispatcher("/index_1.jsp").forward(request,response);

    }
}

<%--
  Created by IntelliJ IDEA.
  User: ZhongjieMa
  Date: 2021/5/27
  Time: 13:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function init(){
            var deptObj = ${requestScope.key};
            document.getElementById("deptNo").value = deptObj.deptNo;
            document.getElementById("dName").value = deptObj.dName;
            document.getElementById("loc").value = deptObj.loc;
        }
    </script>
</head>
<body onload = "init()">
    <table border="2" align="center">
        <tr>
            <td>部门编号</td>
            <td><input type="text" id="deptNo"></td>
        </tr>

        <tr>
            <td>部门名称</td>
            <td><input type="text" id="dName"></td>
        </tr>

        <tr>
            <td>部门位置</td>
            <td><input type="text" id="loc"></td>
        </tr>

    </table>

</body>
</html>

package com.bjpowernode.entity;

/**
 * @Author:马仲杰
 * @Date 2021/5/27
 **/
public class Dept {
    private Integer deptNo;
    private String dName;
    private String loc;

    public Integer getDeptNo() {
        return deptNo;
    }

    public void setDeptNo(Integer deptNo) {
        this.deptNo = deptNo;
    }

    public String getdName() {
        return dName;
    }

    public void setdName(String dName) {
        this.dName = dName;
    }

    public String getLoc() {
        return loc;
    }

    public void setLoc(String loc) {
        this.loc = loc;
    }

    public Dept(Integer deptNo, String dName, String loc) {
        this.deptNo = deptNo;
        this.dName = dName;
        this.loc = loc;
    }

    public Dept() {
    }
}
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值