精华内容
下载资源
问答
  • IDEA+SSM+AJAX搭建测试环境小例子,包含源码,IDEA导入即可运行,供学习测试使用。。。。。。。。。。。。。。。。。
  • 如果idea中搭建ssm不会的可以去看一下《idea-ssm-crud项目实战(二)》好了现在开始了。最终效果:页面布局使用bootstrap布局很简单,使用bootstrap的栅格系统、按钮、表格以及分页插件就好了。这个布局很简单了就是...

    前面已经搭建好了ssm框架了,这一章节就写一下员工的crud了,都是一步步来操作,前台页面使用的Bootstrap来操作。如果idea中搭建ssm不会的可以去看一下《idea-ssm-crud项目实战(二)》好了现在开始了。

    最终效果:

    15e99125809186c896ace2254eaa44fb.png页面布局

    使用bootstrap布局很简单,使用bootstrap的栅格系统、按钮、表格以及分页插件就好了。

    这个布局很简单了就是分为上中下3行就可以了,这个直接使用bootstrap的栅格系统,由于这个很简单直接在代码中写上注释.

    首先使用bootstrap的栅格系统https://v3.bootcss.com/css/#grid,如图

    d96658df35ce900dab6710748110668e.png

    看代码class="container">                    

                            
                div>        div>                    
                
                div>        div>                    
                            
                div>                            
                                div>        div>    div>

    以上代码很简单了,就是分为了上中下3行,现在开始填代码了。

    1.在按钮注释的div中添加一个按钮,这个按钮也在bootstrap官方文档中找如图:

    a981601f1b5bb360cd2d62aeaefd2d5a.png

    找到自己觉得合适的按钮然后复制代码到按钮的div部分

         添加button>div>

    声明一下栅格系统是宽度总共是12个格子,现在来解释一下col-md-4 clo-md-offset-8。

    这2个样式是该div占4个格子,偏移8个格子,也就是说从第五个格子开始占位。

    2.在内容的div中添加一个表格,这个按钮也在bootstrap官方文档中找如图:

    219db6cb6ad67daf8c61df1f16f7d9f4.png

    在内容区域直接输入以下代码,由于表格的tbody区域都是使用ajax来加载的所以只需要一个table的架子即可。class="table table-hover">                         员工IDth>            员工名称th>            员工性别th>            员工邮箱th>            所属部门th>            操作th>        tr>     thead>        tbody>

    3.分页显示位置填上分页插件的代码,这个分页插件也在bootstrap官方文档中找如图:

    1c5babd56b2bc1816f224a9bddceee30.png

    直接复制以上代码到分页显示的div就可以了,这里都需要使用ajax来获取真实数据来加载所以就先不粘贴了。好了差不多这里已经布局玩了,添加后续在加。

    查询所有员工数据

    这个查询员工所有数据上一章节已经测试通过了,这里就不再赘述了,现在稍微改造几个地方。

    1.为了spring结构更加清晰,将applicationContext.xml分为2个文件,一个是applicationContext-dao.xml和applicationContext-service.xml,代码几乎都没有改变,具体查看github源码。

    2.所有ajax返回数据都应该为json格式返回,这样有利于其它平台调用,为了使用返回json方便,统一创建一个message类来返回。

    message类代码:

    public class Message {    /**     * code=200成功代码,其它代码可以自定义     */    private int code;    /**     * 表示成功还是错误     */    private boolean isSuccess;    /**     * 返回信息     */    private String msg;    /**     * 返回前台数据源     */    private Mapmaps = new HashMap<>();    getter和setter省略.......        /**     * 成功返回     * @return     */    public static Message getSuccess() {        Message message = new Message();        message.setCode(200);        message.isSuccess = true;        message.setMsg("操作成功");        return message;    }    /**     * 错误返回     * @return     */    public static Message getError() {        Message message = new Message();        message.setCode(100);        message.isSuccess = false;        message.setMsg("操作失败");        return message;    }    /**     * 数据源添加数据     * @param key     * @param value     * @return     */    public Message addAttribute(String key,Object value) {        maps.put(key,value);        return this;    }}

    好了现在可以写前后台交互的代码了,前台使用ajax交互后台的/employyee/list对应的控制器方法。

    1.封装一个pageload方法加载员工信息,由于要分页所以封装的方法需要一个页码参数

    2.首先需要在页面加载之后加载数据需要使用到$(function(){});

    查看前端js代码

    控制器代码@RequestMapping("/list")    @ResponseBody    public Message list(@RequestParam(value = "pageIndex",defaultValue = "1")                                   Integer pageIndex) throws Exception {        PageHelper.startPage(pageIndex, pageSize);        Listemployees = employeeService.findALL(null);        //用PageInfo对结果进行包装,每次连续显示为5页        PageInfopageInfo = new PageInfo<>(employees,5);        return Message.getSuccess().addAttribute("pageInfo",pageInfo);    }

    web.xml的配置就不用多说了,如果需要的可以直接github地址上查看代码,现在运行结果。

    20180823135008153500340818767.jpg

    从上图可以看出数据获取到前端了,并且非常详细,分页信息,数据源,多少页,多少记录数等等都显示出来了。现在就直接可以拼接前端的标签代码了。

    前台显示

    前台页面显示需要以下几个方法:

    1.显示table内容的方法

    function loadTable(employeeList) {        //给table加上一个id,这里好获取对象        var employeeTable = $("#employeeTable");        $.each(employeeList,function (index, item) {            var tr = $("");            //将下面的td全部都添加到tr中            $("").append(item.empId).appendTo(tr);            $("").append(item.empName).appendTo(tr);            $("").append(item.gender).appendTo(tr);            $("").append(item.email).appendTo(tr);            $("").append(item.department.deptName).appendTo(tr);            //创建修改和删除按钮            var btn_eidt_employee = $('修改');            var btn_del_employee = $('删除');            $("").append(btn_eidt_employee).append(btn_del_employee).appendTo(tr);            //在将tr添加到tbody中            employeeTable.append(tr);        });    }

    2.显示分页的方法,我将分页绑定插件的方法分拆了多个方法,上一页,下一页,首页,尾页,和中间页码的一共5个方法/** * 显示分页详细信息 */function page_info_show(pageInfo) {    var page_info_area = $("#page_info_area");    page_info_area.empty();    page_info_area.append("当前"+pageInfo.pageNum+"页,总"+        pageInfo.pages+"页,总"+        pageInfo.total+"条记录");    pages = pageInfo.pages;    pageIndex = pageInfo.pageNum;}/** * 分页方法 */function paginationFun(pageInfo) {    //添加时都需要先清空一下    pagination.empty();    //首页    firstPageFun();    //将上一页控件添加到分页ul中    previousPageFun();    //分页插件中间部分    page_lis(pageInfo);    //下一页    nextPageFun();    //尾页    lastPageFun();}

    最后的显示结果

    20180823135009153500340916903.jpg分页的事件

    每个页码绑定事件就很简单了。在写pageload方法当时就只是传入一个pageIndex页码就可以了,现在也就是只需要为页号绑定个事件。

    现在就需要给页码的li上加上class="page_li" pageIndex="'+item+'",为了后期绑定事件使用,在用jquery事件绑定一下就可以了,看代码。pagination = $("#pagination");/** * 页码绑定事件 */pagination.on("click",".page_li",function () {    pageIndex = $(this).attr("pageIndex");    pageload(pageIndex);});

    首页,尾页,上一页,下一页也类似,看看代码吧。/** * 首页事件绑定 */pagination.on("click",".firstPage",function () {    pageload(1);});/** * 上一页 */pagination.on("click",".previous",function () {    if(pageIndex > 1) {        pageload(pageIndex - 1);    }});/** * 下一页 */pagination.on("click",".next",function () {    if(pageIndex < pages) {        pageload(pageIndex + 1);    }});/** * 尾页事件绑定 */pagination.on("click",".lastPage",function () {    pageload(pages);});

    本文标题:idea-ssm-crud项目实战(三)

    本文链接:https://www.toobug.cn/post/592.html

    作者授权:除特别说明外,本文由 toobug 原创编译并授权 TOOBUG信息安全网 刊载发布。

    版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

    wxacode_f5b2f089e53f649e.jpg

    用TOOBUG官方小程序阅览更加简洁

    展开全文
  • Ajax ## 全天目标 ``` 1.了解JQuery的基本概念 2.通过入门案例掌握JQuery的使用步骤 3.理解JQuery对象和JS对象区别与转换 4.掌握JQuery的基本选择器 5.掌握JQuery的属性选择器 6.掌握JQuery的常用DOM操作 7.理解...

    今日收获:

     

    # Day10_JQuery&Ajax

    ## 全天目标

    ```
    1.了解JQuery的基本概念
    2.通过入门案例掌握JQuery的使用步骤
    3.理解JQuery对象和JS对象区别与转换
    4.掌握JQuery的基本选择器
    5.掌握JQuery的属性选择器
    6.掌握JQuery的常用DOM操作
    7.理解JQuery遍历
    8.理解JQuery绑定事件
    9.理解JQuery事件切换
    10.了解Ajax的概念
    11.掌握Jquery实现Ajax的方式
    ```

    ## 今日内容

    ```
    1.JQuery
        1.1.JQuery概述
        1.2.JQuery入门
        1.3.JQuery对象和JS对象区别与转换
            1.3.1.JQuery对象和JS对象概念
            1.3.2.JQuery对象和JS对象区别
            1.3.3.JQuery对象和JS对象转换
        1.4.JQuery的选择器
            1.4.1.基本选择器
            1.4.2.属性选择器
        1.5.常用DOM操作
        1.6.Jquery遍历
        1.7.事件绑定
        1.8.事件切换
    2.Ajax
        2.1.Ajax概述
        2.2.异步和同步
        2.3.jquery方式
            2.3.1.$.ajax()方式
            2.3.2.$.get()方式
            2.3.3.$.post()方式
    ```

    ## 1.JQuery

    ### 1.1 JQuery概述

    **目标**

    ```
    1.了解Jquery是什么。
    2.了解Jquery能做什么。
    ```

    **Jquery是什么**

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

    **Jquery能做什么**

    Jquery封装了JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    **小结**

    ```
    1.JQuery就是一个JS的框架,用于简化JS的开发
    ```

    ### 1.2.JQuery入门

    **目标**

    ```
    1.通过入门案例掌握Jquery的使用步骤。
    ```

    #### 1.2.1.JQuery入门案例

    **步骤**

    ```
    1. 下载JQuery
    2. 导入JQuery的js文件
    3. 使用JQuery
    ```

    **下载JQuery**

    下载网址:https://code.jquery.com/jquery/

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery下载_1.png)

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery下载_2.png)

    如果不能下载,可以使用资料中事先下载好的Jquery文件。

    **Jquery的版本**

    - 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)。
    - 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)。
    - 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本:3.2.1(2017年3月20日)。

    **jquery-xxx.js 与 jquery-xxx.min.js区别**

    - jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释,体积大一些。
    - jquery-xxx.min.js:生产版本。程序中使用,没有缩进。体积小一些,程序加载更快。

    **案例**

    **1.将资料中的Jquery文件拷贝到项目的js目录(注意这里拷贝的是xxx.min.js)**

    **2.创建一个页面,名称为“02-JQuery快速入门.html”,在页面中引入Jquery文件,并编写代码。**

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery快速入门</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>

        <div id="div1">div1....</div>
        <div id="div2">div2....</div>

    <script>
        //使用JQuery获取元素对象
        var div1 = $("#div1");
        alert(div1.html());
        var div2 = $("#div2");
        alert(div2.html());
    </script>

    </body>
    </html>

     

    **3.浏览器打开页面。**

    **小结**

    ```
    1.使用Jquery的步骤
        第1步:下载JQuery的js文件
        第2步:把JQuery的js文件导入到当前项目中。
        第3步:在页面引入JQuery的js文件
        第4步:使用Jquery
    ```

    ### 1.3.JQuery对象和JS对象

    **目标**

    ```
    1.理解JQuery对象和JS对象的概念
    2.理解JQuery对象和JS对象的特点和区别
    3.掌握JQuery对象和JS对象的转换
    ```

    #### 1.3.1.概念

    **目标**

    ```
    1.理解JQuery对象和JS对象的概念
    ```

    **概念**

    ​    JQuery对象:使用JQuery的语法$()获取到的页面元素,称之为JQuery对象。

    ​    JS对象:使用JS的语法获取到的页面元素,称之为JS对象。

    **案例**

    **1.创建一个页面,名称为03-JQuery对象和js对象的转换.html,在js区域编写代码**。

    **2.JS对象获取**

    ```javascript
    //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs);
    ```

    **3.浏览器打开,查看效果**。

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_1.png)

    **4.JQuery对象**

    ```javascript
    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs);
    ```

    **5.浏览器打开,查看效果。**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_2.png)

    **6.虽然获取的对象不一样,但是都可以当做数组来使用,都可以通过其length方法获取长度。**

    ```javascript
    //1. 通过js方式来获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length);//也可以当做数组使用
    ```

    **7.浏览器打开,查看效果。**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_3.png)

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_4.png)

    **小结**

    ```
    1.使用JQuery中的语法$()获取的页面元素称之为JQuery对象,使用JS原生语法获取的页面元素称之为JS对象
    ```

    #### 1.3.2.JQuery对象和JS对象的区别

    **目标**

    ```
    1.理解JQuery对象和JS对象的特点和区别
    ```

    **案例**

    **1.在03-JQuery对象和js对象的转换.html的js区域编写代码。**

    **2.操作JS对象**

    ```javascript
    //对divs中所有的div 让其标签体内容变为"aaa"
    for (var i = 0; i < divs.length; i++) {
         divs[i].innerHTML = "aaa";
    }
    ```

    **3.浏览打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_5.png)

    **4.操作JQuery对象**

    ```javascript
    //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    $divs.html("bbb");
    ```

    **5.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_6.png)

    **6.我们会发现用jquery操作比用原生的js操作要方便很多,所以我们得出一个结论**

    - JQuery对象在操作时,更加方便。

    - JQuery对象和js对象方法不通用的。

      **在03-JQuery对象和js对象的转换.html的js区域编写代码。**

      ```javascript
      $divs.innerHTML = "bbb";
      ```

      **浏览器打开,查看效果,发现不起作用。**

      ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_7.png)

    **小结**

    ```
    1.JS对象只能通过JS语法获取,操作时相对来说比较复杂
    2.JQuery对象只能通过JQuery语法获取,在操作上比JS对象要简单很多
    ```

    #### 1.3.3.JQuery对象和JS对象的相互转换

    **目标**

    ```
    1.掌握JQuery对象和JS对象的转换
    ```

    **语法**

    - JQuery对象转化为JS对象: jq对象[索引] 或者 jq对象.get(索引)
    - JS对象转化为JQuery对象:$(js对象)

    **案例**

    **1.在03-JQuery对象和js对象的转换.html的js本区域编写代码。**

    **2.JS对象转化为JQuery对象**

    ```javascript
    for (var i = 0; i < divs.length; i++) {
        //divs[i].innerHTML = "aaa";
        $(divs[i]).html("ccc");
    }
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_8.png)

    **4.JQuery对象转化为JS对象**

    ```javascript
    //将第一个div的内容改为ddd,将第二个div的内容改为eee
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";
    ```

    **5.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery对象和js对象的区别_9.png)

    **小结**

    ```
    1.JQuery对象转化为JS对象: jq对象[索引] 或者 jq对象.get(索引)
    2.JS对象转化为JQuery对象:$(js对象)
    ```

    ### 1.4.基本操作

    **目标**

    ```
    1.掌握Jquery的事件绑定的方式
    2.了解Jquery的入口函数
    4.掌握Jquery控制css样式
    ```

    #### 1.4.1 事件绑定

    **案例**

    **1.创建一个页面,名称为04-事件绑定.html,在js区域编写代码。**

    ```javascript
    $("#b1").click(function(){
      alert("abc");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery绑定事件_1.png)

    当然,除了可以绑定click()点击事件之外,也可以绑定其他点击事件,比如submit()、blur()事件。

    #### 1.4.2 入口函数

    **JS的写法**

    **1.在页面的js区域,编写代码**

    ```javascript
    window.onload = function(){
        //1.获取b1按钮
        $("#b1").click(function(){
             alert("abc");
        });
    }
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery入口函数.png)

    **JQuery的写法**

    **1.在js中注释掉其他代码,编写以下代码**

    ```javascript
    //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
    $(function () {
        //1.获取b1按钮
        $("#b1").click(function(){
              alert("abc");
        });
    });
    ```

    **2.浏览打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery入口函数.png)

    **两种入口函数的区别**

    window.onload和$(function(){})都能实现dom文档加载完成之后再执行函数代码的操作,那window.onload和$(function(){})有什么区别?主要有以下两点区别:

    - window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
    - $(function)可以定义多次的

    下面针对这两个区别来一一进行讲解。

    - **window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉**

      **案例**

      **1.在js中注释掉其他代码,编写以下代码**

      ```javascript
      window.onload  = function fun1(){
          alert("abc");
      }
      
      window.onload  = function fun1(){
          alert("bcd");
      }
      ```

      **2.浏览器打开,查看效果**

      ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery入口函数_1.png)

      我们定义了两个window.onload,但是用浏览器打开的时候,发现只弹出了bcd,并没有弹出abc,说明后面的将前面的覆盖掉了。

    - **$(function(){})可以定义多次的。**

      **案例**

      **1.在js中注释掉其他代码,编写以下代码**

      ```javascript
      $(function(){
          alert(123);
      });
      
      $(function(){
          alert(234);
      });
      ```

      **2.浏览器打开,查看效果**

      ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery入口函数_2.png)

      ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery入口函数_3.png)

       用浏览器打开,查看效果,发现123和234都弹出来了,所以呢$(function)是可以定义多次的。

    #### 1.4.3 样式控制

    JQuery要实现样式控制,需要使用到其中的css()函数来进行实现,接下来通过一个案例来具体介绍一下。

    **案例**

    案例需求:给id为div1的div设置背景色

    **方式一**

    **1.在js中注释掉其他代码,编写以下代码**

    ```javascript
    $(function(){
       $("#div1").css("background-color","red");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery样式控制.png)

    **方式二**

    **1.在js中注释掉其他代码,编写以下代码**

    ```javascript
    $(function(){
       $("#div1").css("backgroundColor","pink");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery样式控制_1.png)

    **小结**

    ```
    1.JQuery绑定事件采用的是$("#b1").click(function(){}),当然除了click事件也可以绑定其他事件
    2.JQuery的入口函数采用的$(function () {})来实现
    3.JQuery的样式控制$("#div1").css("","")来实现
    ```

    ### 1.5.JQuery选择器

    **目标**

    ```
    1.了解什么是选择器及基本使用语法和作用
    2.掌握基本选择器
    2.掌握属性选择器
    ```

    #### 1.5.1 选择器概述

    **目标**

    ```
    1.了解什么是选择器及基本使用语法和作用
    ```

    **选择器是什么**

    Jquery中的选择器,指的是用来获取页面元素的一种特殊语法,与CSS中的选择器类似 。

    **使用语法**

    ```javascript
    var el = $("选择器");
    ```

    **作用**

    用来筛选获取页面标签元素。

    **小结**

    ```
    1.JQuery的选择器类似于CSS的选择器,CSS的选择器在筛选出标签之后,可以来控制它们的样式,而JQuery的选择器是在筛选出标签之后,可以来操作它们的方法、属性等。
    2.JQuery选择器的使用语法为$("选择器")
    3.JQuery选择器的作用就是用来筛选获取页面标签元素
    ```

    #### 1.5.3 基本选择器

    **目标**

    ```
    1.理解JQuery中基本选择器的使用
    ```

    **分类**

    - id选择器 
    - 标签选择器(元素选择器)
    - 类选择器
    - 并集选择器

    **准备工作**

    将资料中的选择器目录拷贝到项目中。用浏览器打开01-基本选择器.html,查看页面,每个按钮上都有字,字就是点击按钮实现的效果。

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\JQuery选择器.png)

    **id选择器**

    语法:$("#id的属性值") 获得与指定id属性值匹配的元素

    **案例**

    **1.在01-基本选择器.html的js区域,给id为b1的按钮绑定点击事件**

    ```javascript
    $("#b1").click(function () {}
    ```

    **2.在其中通过id选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b1").click(function () {
        $("#one").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\基本选择器_1.png)

    **标签选择器(元素选择器)**

    语法:语法: $("html标签名") 获得所有匹配标签名称的元素

    **案例**

    **1.在01-基本选择器.html的js区域,给id为b2的按钮绑定点击事件**

    ```javascript
    $("#b2").click(function () {});
    ```

    **2.在其中通过标签选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b2").click(function () {
          $("div").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\基本选择器_2.png)

    **类选择器**

    语法: $(".class的属性值") 获得与指定的class属性值匹配的元素

    **案例**

    **1.在01-基本选择器.html的js区域,给id为b3的按钮绑定点击事件**

    ```javascript
    $("#b3").click(function () {}
    ```

    **2.在其中通过类选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b3").click(function () {
        $(".mini").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\基本选择器_3.png)

    **并集选择器**

    语法:$("选择器1,选择器2....") 获取多个选择器选中的所有元素

    **案例**

    **1.在01-基本选择器.html的js区域,给id为b4的按钮绑定点击事件**

    ```javascript
    $("#b4").click(function () {}
    ```

    **2.在其中通过并集选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b4").click(function () {
         $("span,#two").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\基本选择器_4.png)

    **小结**

    ```javascript
    1. 标签选择器(元素选择器)
        * 语法: $("html标签名") 获得所有匹配标签名称的元素
    2. id选择器 
        * 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
    3. 类选择器
        * 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
    4. 并集选择器:
        * 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
    ```

    #### 1.5.4 属性选择器

    **目标**

    ```
    1.理解JQuery中属性选择器的使用
    ```

    **分类**

    - 属性名称选择器 
    - 属性选择器
    - 复合属性选择器

    **准备工作**

    浏览器打开02-属性选择器.html,查看页面,每个按钮上都有字,字就是点击按钮实现的效果。

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_1.png)

    **属性名称选择器** 

    语法:$("A[属性名]") 包含指定属性的选择器

    **案例**

    **1.在02-属性选择器.html的js区域,给id为b1的按钮绑定点击事件**

    ```javascript
    $("#b1").click(function () {}
    ```

    **2.在其中通过属性名称选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b1").click(function () {
        $("div[title]").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_2.png)

    **属性选择器**

    **语法**

    - $("A[属性名='值']") 指定属性等于指定值的选择器
    - $("A[属性名!='值']") 指定属性不等于指定值的选择器
    - $("A[属性名^='值']") 指定属性以指定值开头的选择器
    - $("A[属性名$='值']") 指定属性以指定值结尾的选择器
    - $("A[属性名*='值']") 指定属性包含指定值的选择器

    **案例1**

    **1.在02-属性选择器.html的js区域,给id为b2的按钮绑定点击事件**

    ```javascript
    $("#b2").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b2").click(function () {
        $("div[title='test']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_3.png)

    **案例2**

    **1.在02-属性选择器.html的js区域,给id为b3的按钮绑定点击事件**

    ```javascript
    $("#b3").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b3").click(function () {
            $("div[title!='test']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_4.png)

    **案例3**

    **1.在02-属性选择器.html的js区域,给id为b4的按钮绑定点击事件**

    ```javascript
    $("#b4").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b4").click(function () {
            $("div[title^='test']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_5.png)

    **案例4**

    **1.在02-属性选择器.html的js区域,给id为b5的按钮绑定点击事件**

    ```javascript
    $("#b5").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b5").click(function () {
            $("div[title$='est']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_6.png)

    **案例5**

    **1.在02-属性选择器.html的js区域,给id为b6的按钮绑定点击事件**

    ```javascript
    $("#b6").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b6").click(function () {
        $("div[title*='es']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_7.png)

    **复合属性选择器**

    语法:$("A\[属性名='值'][]...") 包含多个属性条件的选择器

    **案例**
    **1.在02-属性选择器.html的js区域,给id为b7的按钮绑定点击事件**

    ```javascript
    $("#b7").click(function () {}
    ```

    **2.在其中通过属性选择器筛选对应的标签,并设置样式**

    ```javascript
    $("#b7").click(function () {
            $("div[id][title*='es']").css("backgroundColor","pink");
    });
    ```

    **3.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\属性选择器_8.png)

    **小结**

    ```javascript
    1. 属性名称选择器 
        * 语法: $("A[属性名]") 包含指定属性的选择器
    2. 属性选择器
        * 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
    3. 复合属性选择器
        * 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
    ```

    ### 1.6.常见DOM操作

    **目标**

    ```
    1.掌握Jquery操作元素内容的方式
    2.掌握Jquery操作元素属性的方式
    ```

    #### 1.6.1 操作元素内容

    **目标**

    ```
    1.掌握Jquery操作元素内容的三种方式
    ```

    **相关API**

    ```javascript
    1. html(): 获取/设置元素的标签体内容  
    2. text(): 获取/设置元素的标签体纯文本内容
    3. val(): 获取/设置元素的value属性值
    ```

    **案例**

    **准备工作**

    将资料中的dom操作目录拷贝到项目中,浏览器打开01-html&text&val.html。

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容.png)

    **val()操作**

    **获取输入框的value属性的值**

    **1.在01-html&text&val.html页面中编写js代码**

    ```javascript
    // 获取myinput 的value值
    var value = $("#myinput").val();
    alert(value);
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_1.png)

    **设置输入框的value属性的值**

    **1.在01-html&text&val.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#myinput").val("李四");
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_2.png)

    **html()操作**

    **获取div的标签体内容**

    **1.在01-html&text&val.html页面中注释其他代码,编写js代码**

    ```javascript
    //获取mydiv的标签体内容
    var html = $("#mydiv").html();
    alert(html);
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_3.png)

    **设置div的标签体内容**

    **1.在01-html&text&val.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#mydiv").html("<p>aaaa</p>");
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_4.png)

    **text()操作**

    **获取div标签的纯文本内容**

    **1.在01-html&text&val.html页面中注释其他代码,编写js代码**

    ```javascript
    // 获取mydiv文本内容
    var text = $("#mydiv").text();
    alert(text);
    ```

    **2.浏览器打开,查看效果** 

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_5.png)

    **设置div标签的纯文本内容**

    **1.在01-html&text&val.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#mydiv").text("bbb");
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素内容_6.png)

    **小结**

    ```
    1.html()获取/设置元素的标签体内容  
    2.text()获取/设置元素的标签体纯文本内容
    3.val()获取/设置元素的value属性值
    ```

    #### 1.6.2 操作元素属性

    **目标**

    ```
    1.掌握Jquery操作元素属性的方式
    ```

    Jquery操作元素属性的方式分为两种

    - 通用属性操作
    - 对class属性操作

    ##### 1.6.2.1.通用属性操作

    **目标**

    ```
    1.掌握Jquery操作通用属性的操作
    ```

    **相关API**

    ```javascript
    1. attr(): 获取/设置元素的属性
    2. removeAttr():删除属性
    3. prop():获取/设置元素的属性
    4. removeProp():删除属性
    ```

    **案例**

    **准备工作**

     

    浏览器打开02-prop.html页面,查看页面内容

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性.png)

    **获取节点的name属性**

    **1.在02-prop.html页面中注释其他代码,编写js代码**

    ```javascript
    //获取北京节点的name属性值
    var name = $("#bj").attr("name");
    alert(name);
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_1.png)

    **设置节点的name属性的值**

    **1.在02-prop.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#bj").attr("name","dabeijing");
    ```

    **2.浏览器打开,按F12,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_2.png)

    **新增节点属性**

    **1.在02-prop.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#bj").attr("discription","didu");
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_3.png)

    **删除节点属性**

    **1.在02-prop.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#bj").removeAttr("name");
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_4.png)

    **获取选中状态**

    **获取选中状态其实就是获取input标签的checked的值。**

    **1.在02-prop.html页面中注释其他代码,编写js代码**

    ```javascript
    var checked = $("#hobby").prop("checked");
    alert(checked);
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_5.png)

    **3.使用attr()方式来获取**

    ```javascript
    var checked = $("#hobby").attr("checked"); //获取不到,弹出undefined
    alert(checked);
    ```

    **4.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作元素属性_6.png)

    那为什么之前的使用attr可以获取到,但是这个使用attr会获取不到,而使用prop就会获取到,

    **attr和prop的区别**

    - 如果操作的是元素的固有属性,则建议使用prop。
    - 如果操作的是元素自定义的属性,则建议使用attr。

    **小结**

    ```
    1.Jquery操作元素属性可以使用attr()或者prop()操作,prop()是操作元素的固有属性,attr()是操作元素的自定义属性
    ```

    ##### 1.6.2.2 对class属性操作

    **目标**

    ```
    1.掌握Jquery操作class属性的操作
    ```

    **相关API**

    ```
    1. addClass():添加class属性值
    2. removeClass():删除class属性值
    3. toggleClass():切换class属性,如果存在(不存在)就删除(添加)一个类。例如:toggleClass("one"): 判断如果元素对象上存在class="one",则将属性值one删除掉。如果元素对象上不存在class="one",则添加。
    ```

    **案例**

    **准备工作**

    **浏览器打开03-class&css.html页面,查看页面效果,按钮中的文本就是案例需求**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_1.png)

    **使用通用方式增加class属性**

    **1.在03-class&css.html页面中,编写js代码**

    ```javascript
    $("#b1").click(function () {
        $("#one").prop("class","second");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_2.png)

    **使用addClass()增加class属性**

    **1.在03-class&css.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#b2").click(function () {
         $("#one").addClass("second");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_3.png)

    **使用removeClass()删除class属性**

    **1.在03-class&css.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#b3").click(function () {
         $("#one").removeClass("second");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_4.png)

    **使用toggleClass()切换class属性**

    **1.在03-class&css.html页面中注释其他代码,编写js代码**

    ```javascript
    $("#b4").click(function () {
          $("#one").toggleClass("second");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_5.png)

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Dom操作class属性_6.png)

    **小结**

    ```
    1.addClass():添加class属性值
    2.removeClass():删除class属性值
    3.toggleClass():切换class属性
    ```

    ### 1.7.JQuery遍历

    **目标**

    ```
    1.掌握Jquery中的遍历方式
    ```

    **遍历实现方式两种**

    - js的遍历方式
    - Jquery的遍历方式
      - jq对象.each(callback)
      - $.each(object, [callback])
      - for(元素对象 of 容器对象) ( jquery 3.0 版本之后提供的方式)

    **案例**

    **准备工作**

    将资料中的jquery遍历目录拷贝到项目中,浏览器打开01-遍历.html页面,查看页面内容

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_1.png)

    **案例需求**

    将li标签中的文本内容全部获取到

    ####  **1.7.1JS的遍历方式**

    **1.在01-遍历.html页面中,编写js代码**

    ```javascript
    $(function(){
         //1.获取ul下的所有li
         var citys = $("li");

         //2.遍历li
         for (var i=0;i<citys.length;i++){
              //获取内容
              alert(i+":"+citys[i].innerHTML);
         }
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_2.png)

    #### **1.7.2.Jquery的遍历方式**

    **jq对象.each(callback)方式遍历**

    jq对象.each(callback)中的callback是回调函数,本质就是一个function(){}

    **1.在01-遍历.html页面的js区域注释其他代码,编写js代码**

    ```javascript
    citys.each(function(index,element){
          //获取li对象
          //第一种方式,无法获取索引
          //alert(this.innerHTML);
                    
          //第二种方式,在回调函数中定义参数,index(索引) element(元素对象)
          alert(index+":"+element.innerHTML);
    })
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_5.png)

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_3.png)

    **$.each(object, [callback])方式遍历**

    **1.在01-遍历.html页面的js区域注释其他代码,编写js代码**

    ```javascript
    //citys : 要遍历的对象,可以是js对象或者jquery对象
    //function中的操作和jq对象.each(callback)中是一样的
    $.each(citys,function(){
           alert($(this).html());
    })
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_10.png)

    **for(元素对象 of 容器对象)方式遍历**

    **1.在01-遍历.html页面的js区域注释其他代码,编写js代码**

    ```javascript
    for(li of citys){
         alert($(li).html());
    }
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\Jquery遍历_11.png)

    **小结**

    ```
    1. jquery对象.each(function(index,element){});        
    2. $.each(object, function(index,element){})        
    3. for(元素对象 of 容器对象)
    ```

    ### 1.8.JQuery绑定事件

    **目标**

    ```
    1.掌握JQuery的标准绑定事件方式
    2.了解JQuery的绑定事件函数on
    3.了解JQuery的解绑函数off
    4.了解JQuery的toggle事件切换
    ```

    #### 1.8.1 JQuery标准的绑定方式

    目标

    ```
    1.掌握JQuery的标准绑定事件方式
    ```

    **语法**

    ```javascript
    jq对象.事件方法(回调函数);
    ```

    **注意**

    如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。

    例如:表单对象.submit();  //让表单提交

    案例

    **准备工作**

    将资料中的jquery事件绑定与解绑目录拷贝到项目中,打开01-绑定事件.html页面,查看内容

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery事件绑定_1.png)

    **给input输入框绑定一个点击事件**

    **1.在01-绑定事件.html页面中编写js代码**

    ```javascript
    $(function () {
        //1.获取name对象,绑定click事件
        $("#name").click(function(){
            alert("我被点击了....")
        });
    })
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery事件绑定_2.png)

    **给name绑定鼠标移动到元素之上事件,绑定鼠标移出事件**

    **1.在01-绑定事件.html页面注释其他代码,编写js代码**

    ```javascript
    $("#name").mouseover(function(){
          alert("鼠标来了...");
    });

    $("#name").mouseout(function(){
           alert("鼠标走了...");
    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery事件绑定_3.png)

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery事件绑定_4.png)

    **3.其实这个操作是可以简化的,可以编写成链式编程**

    ```javascript
    $("#name").mouseover(function(){
          alert("鼠标来了...");
    }).mouseout(function(){
          alert("鼠标走了...");
    });
    ```

    但是这种方式不建议你写好多个,因为写好多个阅读起来不太方便。那除了上面的事件可以绑定之外,我们也可以绑定其他事件。

    **注意事项**

    那这里我们演示一个问题,比如focus事件,获取焦点的事件。

    **1.在01-绑定事件.html页面注释其他代码,编写js代码**

    ```javascript
    alert("我要获得焦点了...")
    $("#name").focus();//让文本输入框获得焦点
    ```

    这里面呢,我们没有写回调函数,如果不写回调函数,会自动触发浏览器默认的回调事件。

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\jquery事件绑定_5.png)

    所以当绑定一个事件,不设置回调函数的话,会自动触发浏览器默认的回到函数,类似事件还有submit事件(表单对象.submit()),你可以设置回调函数进行操作,你可以不设置,不设置会直接触发浏览器默认的提交表单操作。

    **小结**

    ```
    1.可以采用jq对象.事件方法(回调函数);来实现标准的绑定事件,需要注意的是如果不设置回调函数,将会触发浏览器默认的事件。
    ```

    #### 1.8.2 on绑定事件&off解除绑定

    **目标**

    ```
    1.了解on绑定事件操作
    2.了解off解除绑定操作
    ```

    **语法**

    on绑定事件语法

    ```javascript
    jq对象.on("事件名称",回调函数)
    ```

    off解除绑定语法

    ```
    jq对象.off("事件名称");
    ```

    **案例**

    打开02-on绑定事件.html页面,查看内容

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\on绑定事件_1.png)

    **需求**

    给“使用on绑定点击事件”按钮绑定事件,点击“使用off解绑点击事件”按钮对“使用on绑定点击事件”按钮解绑事件。

    **1.在02-on绑定事件.html页面编写js代码**

    ```javascript
    $(function(){
       //1.使用on给按钮绑定单击事件,click
       $("#btn").on("click",function(){
             alert("我被点击了...")
       });

       //2.使用off解除btn按钮的单击事件
       $("#btn2").click(function(){
             //解除btn按钮的单击事件
             $("#btn").off("click");
       })

    });
    ```

    **2.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\on绑定事件_2.png)

    当页面加载出来就会给按钮设置点击事件,当点击第二个按钮就会解除绑定单击事件。

    **3.如果off不传递任何参数,将会将组件上的所有的事件解绑**

    ```javascript
    $("#btn").off();//将组件上的所有事件全部解绑
    ```

    **4.浏览器打开,查看效果**

    **小结**

    ```
    1.使用jq对象.on("事件名称",回调函数)来绑定事件
    2.使用jq对象.off("事件名称");来进行解绑事件,如果写成jq对象.off();会将该jq对象上的所有事件解绑
    ```

    #### 1.8.3 事件切换

    目标

    ```
    了解JQuery的事件切换
    ```

    **语法**

    ```javascript
    jq对象.toggle(fn1,fn2...);
    ```

    当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....

    **案例**

    打开03-事件切换.html页面,查看内容

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\事件切换_1.png)

    **需求**
    点击按钮变成绿色,再次点击粉红色

    **1.在03-事件切换.html页面编写js代码**

    ```javascript
    $("#btn").toggle(function(){
         //改变div背景色backgroundColor 颜色为 green
         $("#myDiv").css("backgroundColor","green");
    },function(){
         //改变div背景色backgroundColor 颜色为 pink
         $("#myDiv").css("backgroundColor","pink");
    })
    ```

    **2.浏览器打开,查看效果,发现不行**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\事件切换_2.png)

    原因,JQuery 1.9之后将toggle移除了,需要借助migrate插件来恢复此功能。

    **3.将资料中的jquery-migrate-1.0.0.js拷贝到项目中,引入到03-事件切换.html页面中**

    **4.浏览器打开,查看效果**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\事件切换_4.png)

    **小结**

    ```
    1.使用toggle可以实现事件切换,语法是:jq对象.toggle(fn1,fn2...);,但是要注意的是在jquery 1.9的时候移除了此功能,需要借助jQuery Migrate插件来恢复此功能
    ```

    ## 2.Ajax

    ### 2.1 Ajax概述

    **目标**

    ```
    1.了解Ajax是什么
    ```

    **Ajax是什么**

    ASynchronous JavaScript And XML    异步的JavaScript 和 XML

    **Ajax能做什么**

    Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。提升用户的体验。

    **小结**

    ```
    Ajax是一个用来提高用户体验度的一个技术,可以实现页面的局部刷新
    ```

    ### 2.2.异步和同步

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\同步和异步.png)

    ### 2.3 JQuery原生方式实现Ajax

    **目标**

    ```
    1.理解通过Ajax请求访问服务器的方式
    ```

    Ajax请求访问服务器的方式有三种

    - $.ajax()
    - $.get()
    - $.post()

    #### 2.3.1 $.ajax()方式实现

    **目标**

    ```
    1.理解通过$.ajax()实现请求访问服务器方式
    ```

    **语法**

    ```javascript
    $.ajax({ 键值对 });
    ```

    **案例**

    **1.创建JavaEE Web项目,名称为AjaxDemo**

    **2.创建html页面,名称为Ajax请求.html**

    **3.在页面中编写js代码**

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

        <script>
            //定义方法
            function fun() {
                //使用$.ajax()发送异步请求
                $.ajax({
                    url:"/AjaxDemo/ajaxServlet",//请求路径
                    type:"POST",//请求方式
                    //data:"username=zhangsan&age=23",//请求参数
                    data:{"username":"zhangsan","age":23},
                    success:function (data) {
                        alert(data)
                    },//响应成功回调的函数
                    error:function () {
                        alert("出错了...")
                    },//表示如果请求响应出现错误,会执行的回调函数
                    datatype:"text"//设置接受到的响应数据的格式
                })
            }

        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" οnclick="fun();"><input>

    </body>
    </html>

    ```

    注意:键值对之间要以“,”分隔,不然会报错,但是最后一个键值对可以不写“,”。

    **4.创建servlet,编写代码**

    ```java
    @WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset-utf-8");

            String username = request.getParameter("username");
            response.getWriter().write("hello,"+username);

        }

        protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
            this.doPost(request, response);
        }
    }
    ```

    **5.启动tomcat,运行测试**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\ajax请求.png)

    **小结**

    ```
    使用$.ajax({ 键值对 });可以实现请求访问服务器操作,其中的键值对要以“,”分隔,最后一个键值对可以不写“,”常用的键值对有四个“url,type,data,success”
    ```

    #### 2.3.2 $.get()方式实现

    **目标**

    ```
    1.理解通过$.get()请求访问服务器操作
    ```

    **作用**

    发送Get请求

    **语法:**

    ```javascript
    $.get(url, [data], [callback], [type])
    ```

    **参数:**    

    ```javascript
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型
    ```

    **案例**

    **1.拷贝Ajax请求.html页面,改名为Ajax请求_Get.html**

    **2.在页面中编写js代码**

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

        <script>
            //定义方法
            function fun() {
               $.get("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
                    alert(data);
               },"text");
            }

        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" οnclick="fun();"><input>

    </body>
    </html>

    ```

    注意:键值对之间要以“,”分隔,不然会报错,但是最后一个键值对可以不写“,”。

    **4.创建servlet,编写代码**

    ```java
    @WebServlet("/ajaxServlet")
    public class AjaxServlet extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset-utf-8");

            String username = request.getParameter("username");
            response.getWriter().write("hello,"+username);

        }

        protected void doGet(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException {
            this.doPost(request, response);
        }
    }
    ```

    **5.启动tomcat,运行测试**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\ajax请求.png)

    **小结**

    ```
    使用$.ajax({ 键值对 });可以实现请求访问服务器操作,其中的键值对要以“,”分隔,最后一个键值对可以不写“,”常用的键值对有四个“url,type,data,success”
    ```

    #### 2.3.2 $.get()方式实现

    **目标**

    ```
    1.理解通过$.get()请求访问服务器操作
    ```

    **作用**

    发送Get请求

    **语法:**

    ```javascript
    $.get(url, [data], [callback], [type])
    ```

    **参数:**    

    ```javascript
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型
    ```

    **案例**

    **1.拷贝Ajax请求.html页面,改名为Ajax请求_Get.html**

    **2.在页面中编写js代码**

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

        <script>
            //定义方法
            function fun() {
               $.get("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
                    alert(data);
               },"text");
            }

        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" οnclick="fun();"><input>

    </body>
    </html>

    ```

    **3.启动tomcat,运行测试**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\get请求.png)

    **小结**

    ```
    1.通过$.get()请求服务器的语法:$.get(请求路径, 请求参数, 回调函数, 响应结果的类型)
    ```

    #### 2.3.3 $.post()方式实现

    **目标**

    ```
    1.理解通过$.post()请求访问服务器操作
    ```

    **作用**

    发送Post请求

    **语法:**

    ```javascript
    $.post(url, [data], [callback], [type])
    ```

    **参数:**    

    ```javascript
    * url:请求路径
    * data:请求参数
    * callback:回调函数
    * type:响应结果的类型
    ```

    **案例**

    **1.拷贝Ajax请求_Get.html页面,改名为Ajax请求_Post.html**

    **2.在页面中编写js代码**

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

        <script>
            //定义方法
            function fun() {
               $.post("/AjaxDemo/ajaxServlet",{username:"rose"},function(data){
                    alert(data);
               },"text");
            }

        </script>
    </head>
    <body>
    <input type="button" value="发送异步请求" οnclick="fun();"><input>

    </body>
    </html>

    ```

    我们会发现,$.post()请求和$.get()请求写法上是一样的,只是请求方式换了换。

    **3.启动tomcat,运行测试**

    ![](E:\资料\郑州\工作\正式研发\大数据\可视化项目\JavaWeb\day10_jquery&ajax\笔记\images\post请求.png)

    **小结**

    ```
    1.通过$.post()请求访问服务器的语法是:$.post(请求路径, 请求参数, 回调函数, 响应结果的类型)
    ```

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • IDEA+Tomcat+ajax乱码问题

    2018-08-08 16:25:05
    对自学编程的人而言,乱码问题往往很耽误时间并让人烦躁,下面给大家分享一次IDEA+Tomcat+ajax乱码问题解决的全过程 先列代码: 前台,非常简单的原生ajax POST请求: let btn1=document.getElementById('btn1'...

    IEDA+Tomcat+ajax中文乱码问题

    对自学编程的人而言,乱码问题往往很耽误时间并让人烦躁,下面给大家分享一次IDEA+Tomcat+ajax乱码问题解决的全过程
    先列代码:
    前台,非常简单的原生ajax POST请求:

    let btn1=document.getElementById('btn1');
    let div1=document.getElementById('div1');
    btn1.onclick=function(){
        let xhr=new XMLHttpRequest();
        let obj={
            "测试":2,
            "num2":3
        };
        let data=JSON.stringify(obj);
        let url="http://localhost:8080/ajax";
        xhr.open("post",url,true);
        xhr.setRequestHeader("Content-Type","application/json;charset=utf-8"); 
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    let result=JSON.parse(xhr.responseText);
                    console.log(result);
                }
            }
        }
        xhr.send(data);
    }

    后台:一个简单的servlet(如果用框架(像spring),编码格式的设置应该有特定的配置文件)

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            res.setContentType("text/json;charset=utf-8");
            res.setCharacterEncoding("utf-8");
            StringBuffer sb=new StringBuffer();
            InputStream is=req.getInputStream();
            InputStreamReader isr=new InputStreamReader(is);
            BufferedReader br=new BufferedReader(isr);
            String s="";
            while ((s=br.readLine())!=null){
                sb.append(s);
            }
            String result=sb.toString();
            System.out.println(result);
            res.getWriter().write(result);
     }

    然后、问题就来了,如果大家看代码,发现前后台已经都是utf-8了,但是,IDEA的控制台和浏览器里console里打印出来的result都是乱码。然后,作为一个新手吗,我就懵逼了,于是、就开启了搜索引擎之旅。
    第一步:修改IDEA里的文件编码方式:
    在File-Settings-Editor-File Encodings里,如下图:
    这里写图片描述
    ,把右边能设置的全部设置为utf-8,保存,重启Tomcat,重新运行项目,然而,并没有用,IDEA的控制台和浏览器的console里依然都是乱码。苦思冥想了几分钟之后,我梳理了一下思路,浏览器的请求发送之后是到Tomcat的,然后由Tomcat处理之后再返回响应,现在浏览器里的乱码应该是Tomcat处理之后返回的的,而IDEA的控制台里的乱码,应该是IDEA自己的设置问题。
    第二部:修改Tomcat启动时的编码
    在Edit Configurations里,如下图:
    这里写图片描述
    在VM options里填入:

    -Dfile.encoding=UTF-8

    保存设置,然后重启Tomcat服务,这时候浏览器里的乱码问题已经没有了。
    第三部:设置IDEA的内部编码问题
    编辑器的控制台输出的内容肯定是是编辑器内部的文件中的内容,在IDEA的安装目录里,在bin目录找到 idea64.exe.vmoptions 这个文件(如果是32位系统,应该是idea.exe.vmoptions),在这个文件里同样加入:

    -Dfile.encoding=UTF-8

    然后重启IDEA,运行项目,乱码全部消失!!!

    展开全文
  • IntelliJ IDEAajax开发实现分页查询

    千次阅读 2018-03-25 07:49:12
    IntelliJ IDEAajax开发实现分页查询 IntelliJ IDEAajax开发实现分页查询 第一步:代码实现之前期准备 ...写好了ajax的post请求之后,抓包测试浏览器是否接收到数据 显示表格中的数据 显示分页条的数据 ...

    此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下

    https://www.jianshu.com/p/1fd6b39e98ac

    IntelliJ IDEA中ajax开发实现分页查询


    开发环境:

    • 系统 window10
    • IDE:IntelliJ IDEA2017.3.2
    • 数据库:MySQL5.5
    • 数据库连接工具: Navicat
    • 浏览器:chrome 版本号 65.0.3325.181

    第一步:代码实现之前期准备

    在IDEA中开发前期配置的工作,网上的帖子很多,我 在这里就不再赘述.主要说三点

    1. 在服务器的配置中,红色框框的两项要选择update classes and resource ,选择了之后可以实现热部署.

    2. 要在此处填写项目的名称.作为项目的根路径

    1. 导入jar包的方式如图所示,在dependencie中点击加号,选中自己创建好的lib文件夹

    1. 导入相关的jar包: c3p0的jar包、DbUtils工具类jar包、fastJson的jar包、mysql驱动jar包

    1. 在数据库test03的product表中写入如下的数据

    1. 在IDEA中为工程分包,以及导入c3p0连接池的配置

    注意,c3p0配置文件,要修改成自己的数据库名称,以及数据库密码

    1. 在domain包中,创建Product实体类,根据数据库中product表的字段,在Product类中,书写对应的属性.生成get set方法.

    1. 创建获取连接池对象的工具类

    第二步:无分页查询所有的商品信息

    • 实现思路:

      jsp/html----->servlet(web层处理请求与响应的数据) -----------> service(service层处理逻辑)----------->dao(dao层处理数据库操作)

    • 创建产品页面,向服务器发送请求(获取所有产品信息)

      前端使用了bootstrap响应式开发,可以让页面更加美观,开发更加便捷

      页面信息的代码如下:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>商品展示列表</title>
          <!--引入bootstrap相关文件-->
          <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css">
          <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script>
          <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script>
      </head>
      <script type="text/javascript">
          //页面加载时,向服务器发送请求,接收全部的商品数据
          $(function () {
              //===================未分页,展示所有数据===============================
              var url ="/ajax_product/product";
              //=====向服务器发送post请求
              $.post(url,function (data) {
                  //解析服务器端传过来的全部数据
                  //============================向表格中展示商品信息
                  var products = eval(data);
                  //遍历数据
                  for (var i = 0; i < products.length; i++) {
                      //遍历每一行的数据
                      var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
                      // 并添加到表格中,添加数据到表格中
                      $("#tab").append(protd);
                  }
              },"json")
          })
      </script>
      
      <body>
      <h3 align="center">促销商品展示</h3>
      <div class="container">
          <!--商品的表格占一行-->
          <div class="row">
              <div class="col-md-12">
                  <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化
                      table-bordered表示给表格加边框
                  -->
                  <table class="table table-hover table-bordered" id="tab">
                      <tr>
                          <th>编号</th>
                          <th>商品名称</th>
                          <th>商品数量</th>
                          <th>商品单价</th>
                      </tr>
                  </table>
              </div>
          </div>
      </div>
      </body>
      </html>
      
    • 创建一个servlet来接收请求,获取所有的产品信息

      在IDEA中,创建servlet如下图所示

      在这里不勾选自动生成注解

    点击ok之后,IDEA会自动跳转到web.xml文件中,自动写好了Servlet的全路径名,只需写url-pattern即可

    注意url-pattern需要写得与ajax请求中的Servlet一致.

    web层Servlet的代码如下:

    package com.thc.web;
    
    import com.alibaba.fastjson.JSONObject;
    import com.thc.service.ProductService;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.sql.SQLException;
    import java.util.List;
    
    public class Product extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //处理响应与请求的乱码
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
    
            //由于是显示所有的产品信息,没有参数接收
            //需要调用服务层查找所有数据的方法,获取结果,响应给客户端
            ProductService service = new ProductService();
    
            try {
                //调用业务层的方法,获取所有的商品
                List<com.thc.domain.Product> allProuct = service.findAllProuct();
    
                //把得到的数据,转为json类型的数据
                String jsonString = JSONObject.toJSONString(allProuct);
                //回写给浏览器
                response.getWriter().write(jsonString);
            } catch (SQLException e) {
                e.printStackTrace();
            }
    
        }
    
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
        }
    }
    
    
    • 在service层,从dao层获取数据,返回给web层的Servlet

    web层调用service层的代码如下

    package com.thc.service;
    import com.thc.dao.ProductDao;
    import com.thc.domain.Product;
    import java.sql.SQLException;
    import java.util.List;
    
    public class ProductService {
        //在service层,从dao层获取数据,返回数据给web层
        public List<Product> findAllProuct() throws SQLException {
            ProductDao dao = new ProductDao();
            //调用dao层查询所有的商品
            List<Product> allProduct = dao.findAllProduct();
            return allProduct;
    
        }
    }
    
    
    • 在dao层从服务器中查询数据,给service层

      package com.thc.dao;
      import com.thc.domain.Product;
      import com.thc.utils.JdbcUtils;
      import org.apache.commons.dbutils.QueryRunner;
      import org.apache.commons.dbutils.handlers.BeanListHandler;
      import java.sql.SQLException;
      import java.util.List;
      //=================dao层专门负责数据库操作
      public class ProductDao {
          //===========查询所有商品信息
          public List<Product> findAllProduct() throws SQLException {
              //利用dbutils,创建QueryRunner核心对象
              QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
              //书写sql语句,查询所有的商品
              String sql = "select * from product";
              //把商品到的商品,转为list集合,泛型为product
              List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class));
              return products;
          }
      }
      
      
    • dao层拿到数据后,传递给service层,service层再传递给web层的servlet,servlet拿到数据后,是保存在list集合中的,再把list集合转为json数据类型,写给浏览器.前端页面中的如下代码,就是在解析servlet返回的json数据

       $.post(url,function (data) {
                  //解析服务器端传过来的全部数据
                  //============================向表格中展示商品信息
                  var products = eval(data);
                  //遍历数据
                  for (var i = 0; i < products.length; i++) {
                      //遍历每一行的数据
                      var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
                      // 并添加到表格中,添加数据到表格中
                      $("#tab").append(protd);
                  }
              },"json")
      
      
    • 通过谷歌浏览器自带的抓包工具,可以看到servlet响应的数据

    把响应的数据全部复制下来,就是如下的数据.一个数组中嵌套了产品的对象.

    对象中都是以键值对的形式存在的.

    例如第一个数据中,键为count,值为100. 键为id,值为1,键为name,值为电视机,键为price 值为2000

    [
        {"count":100,"id":1,"name":"电视机","price":2000},
        {"count":200,"id":2,"name":"洗衣机","price":1000},
        {"count":300,"id":3,"name":"空调","price":3000},
        {"count":50,"id":4,"name":"投影仪","price":2000},
        {"count":1000,"id":5,"name":"HP电脑","price":4000},
        {"count":100,"id":6,"name":"苹果手机","price":5000},
        {"count":60,"id":7,"name":"缝纫机","price":2000},
        {"count":100,"id":8,"name":"小米盒子","price":2200},
        {"count":300,"id":9,"name":"饮水机","price":2000},
        {"count":200,"id":10,"name":"净水器","price":2000},
        {"count":500,"id":11,"name":"电暖器","price":2000},
        {"count":100,"id":12,"name":"榨汁机","price":399},
        {"count":200,"id":13,"name":"电压力锅","price":498},
        {"count":300,"id":14,"name":"电饭煲","price":299},
        {"count":50,"id":15,"name":"微波炉","price":1299},
        {"count":200,"id":16,"name":"豆浆机","price":199},
        {"count":300,"id":17,"name":"电磁炉","price":398},
        {"count":500,"id":18,"name":"加湿器","price":99},
        {"count":250,"id":19,"name":"剃须刀","price":98},
        {"count":1000,"id":20,"name":"舒肤佳","price":16.5},
        {"count":1200,"id":21,"name":"雕牌","price":8.8},
        {"count":1500,"id":22,"name":"立白","price":9.9}
    ]
    
    • 不分页的情况下,展示的效果如下:

      一个页面中,把所有的数据都展示出来了,如果数据非常多,例如上百度搜索一个关键词,结果可能有上万上亿条,一次性从数据库中,拿这么多的结果给浏览器,是很长的时间的,用户体验极差,因此需要分页技术.采用物理分页,

      一次只从数据库中查询当前页面需要的信息.

    第三步:传递当前页面数和每页显示的数量给服务器

    • html页面中需要增加当前页面数和每页显示的数量这两个变量,传递给服务器

      更改代码的如下图所示:

    在servlet层需要接收参数,并且从service层查询对应的当前页的数据,代码如下:

    public class Product extends HttpServlet {
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            //处理响应与请求的乱码
            request.setCharacterEncoding("utf-8");
            response.setContentType("text/html;charset=utf-8");
            //当前页面
            int pageNo = Integer.parseInt(request.getParameter("pageNo"));
            //每页的显示条数
            int pageSize = Integer.parseInt(request.getParameter("pageSize"));
            //由于是显示所有的产品信息,没有参数接收
            //需要调用服务层查找所有数据的方法,获取结果,响应给客户端
            ProductService service = new ProductService();
            try {       
               //根据当前页和每页显示的数目,来从service层,获取数据
                List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize);
                String jsonString = JSONObject.toJSONString(product);
                //回写给浏览器
                response.getWriter().write(jsonString);
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
        }
    }
    

    service层新增的查找当前页面数据方法

     public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
            ProductDao dao = new ProductDao();
            List<Product> product = dao.findProduct(pageNo, pageSize);
            return product;
        }
    

    dao层新增的从数据库查找当前页面的方法

      public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
            QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
            String sql ="select * from product limit ?,?";
            //limit第一个参数:从数据库中的哪里开始查,索引是从0开始的
            //第二个参数:每次查多少个
            //第一个参数的规律是:当前页数减一,乘以每页查询的个数
            List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize);
            return productList;
        }
    

    浏览器端显示如下图所示:每次只会显示pageSize(当前的值为6)个数的商品信息.

    但是还不能动态的通过点击页面按钮来实现翻页.

    那么就要考虑页面如何显示分页条以及数据该如何封装?

    我们知道页面的分页条显示的页数是动态变化的**,总页数**=数据的总条数/每页显示的数据,要向上取整。也就是说,我们的页面除了需要List数据之外,还需要数据的总条数、总页数、当前页、每页显示数量。另外当前页pageNo也是动态变化的,在页面上点击多少页,pageNo就是几。所以,我们需要再创建一个javabean(PageBean.java)来封装这些数据,在服务端得到这些数据之后转成json数据发送给客户端显示。

    第四步:将页面的相关数据封装为一个JavaBean

    • 在domain包内创建一个类,名为PageBean,属性如下:
    private int pageNo;//当前页数
    private int pageSize;//每页显示的数量
    private int totalCount;//一共有多少个商品信息数据
    private int totalPage;//一共有多少页数据
    private List<Product> products;//商品信息数据的集合
    
    • 在web层传递service层当前页面数(pageNo),和每页显示的条数(pageSize),返回给web层一个PageBean

      web层的最终代码如下

      public class Product extends HttpServlet {
          protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              //处理响应与请求的乱码
              request.setCharacterEncoding("utf-8");
              response.setContentType("text/html;charset=utf-8");
              //当前页面
              int pageNo = Integer.parseInt(request.getParameter("pageNo"));
              //每页的显示条数
              int pageSize = Integer.parseInt(request.getParameter("pageSize"));
              //由于是显示所有的产品信息,没有参数接收
              //需要调用服务层查找所有数据的方法,获取结果,响应给客户端
              ProductService service = new ProductService();
              try {
                 /* 调用业务层的方法,获取所有的商品
                  List<com.thc.domain.Product> allProuct = service.findAllProuct();
      
                  把得到的数据,转为json类型的数据
                  String jsonString = JSONObject.toJSONString(allProuct);*/
      
                 //根据当前页和每页显示的数目,来从service层,获取数据
                  //List<com.thc.domain.Product> product = service.findProduct(pageNo, pageSize);
                  //===============从web层拿到pagebean的数据=================================
                  PageBean pageBean = service.findPageInfo(pageNo, pageSize);
                  //===============把数据转为json===============================
                  String jsonString = JSONObject.toJSONString(pageBean);
                  //================回写给浏览器====================
                  response.getWriter().write(jsonString);
              } catch (SQLException e) {
                  e.printStackTrace();
              }
          }
          protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              doPost(request,response);
          }
      }
      

    • 在service需要获取pageBean的全部信息,pageNo和pageSize是已知的.需要从dao层获取商品的信息数据,LIst集合,还需要获取总的商品信息数据totalCount.总共有多少页可以通过总数据除以每页显示的数据,并向上取整.

      service层的最终代码如下:

      public class ProductService {
          //在service层,从dao层获取数据,返回数据给web层
      
          //=========Service层处理所有商品信息的数据给web层====================
          public List<Product> findAllProuct() throws SQLException {
              ProductDao dao = new ProductDao();
              //调用dao层查询所有的商品
              List<Product> allProduct = dao.findAllProduct();
              return allProduct;
          }
      
          //============service层查询某个特定页面的数据给web层=================================
          public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
              ProductDao dao = new ProductDao();
              List<Product> product = dao.findProduct(pageNo, pageSize);
              return product;
          }
      
          //============service层封装pagebean数据===================================
          public PageBean findPageInfo(int pageNo, int pageSize) throws SQLException {
              ProductDao dao = new ProductDao();
              List<Product> product = dao.findProduct(pageNo, pageSize);
              int totalCount = dao.findTotalCount();
              PageBean pb = new PageBean();
              //封装数据
              pb.setTotalCount(totalCount);
              pb.setPageNo(pageNo);
              pb.setPageSize(pageSize);
              pb.setProducts(product);
              
      		//向上取整,计算总页数,不要忘了乘以1.0,否则会少一页数据
              int totalPage = (int) Math.ceil(totalCount*1.0/pageSize);
      
              pb.setTotalPage(totalPage);
              //把数据给servlet
              return pb;
          }
      }
      
    • 在dao层,新增了一个方法,用于查询数据库总信息的总个数

      dao层最终的代码如下

      //=================dao层专门负责数据库操作
      public class ProductDao {
      
          //===========查询所有商品信息
          public List<Product> findAllProduct() throws SQLException {
              //利用dbutils,创建QueryRunner核心对象
              QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
              //书写sql语句,查询所有的商品
              String sql = "select * from product";
              //把商品到的商品,转为list集合,泛型为product
              List<Product> products = qr.query(sql, new BeanListHandler<>(Product.class));
              return products;
          }
      //=======================查询当前页的产品信息=====================
          public List<Product> findProduct(int pageNo, int pageSize) throws SQLException {
              QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
              String sql ="select * from product limit ?,?";
              //limit第一个参数:从数据库中的哪里开始查,索引是从0开始的
              //第二个参数:每次查多少个
              //第一个参数的规律是:当前页数减一,乘以每页查询的个数
              List<Product> productList = qr.query(sql, new BeanListHandler<>(Product.class), (pageNo - 1) * pageSize, pageSize);
              return productList;
          }
      //===============查询总共有多少条数据=================
          public int findTotalCount() throws SQLException {
              QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());
              String sql = "select count(*) from product";
              Long countL =(Long) qr.query(sql, new ScalarHandler());
              return countL.intValue();
          }
      }
      

    第五步:处理前端页面

    • 在table标签的下面,增加一行,提供分页的组件.并把li代码注释掉,因为需要动态展示.

    先声明需要接收的参数变量

    var url ="/ajax_product/product";
    var pageNo=1;//当前页面设置为1
    var pageSize=6;//每页显示6条商品信息
    var totalPage;//一共有多少页数据
    var products;//商品的数据信息
    

    写好了ajax的post请求之后,抓包测试浏览器是否接收到数据

     $.post(
         url,//给服务器传送数据的地址
         {"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数
         function (data) {})
    

    在抓包拿到了如下 的数据

    {"pageNo":1,
     "pageSize":6,
     "products":[{"count":100,"id":1,"name":"电视机","price":2000},
                 {"count":200,"id":2,"name":"洗衣机","price":1000},
                 {"count":300,"id":3,"name":"空调","price":3000},
                 {"count":50,"id":4,"name":"投影仪","price":2000},
                 {"count":1000,"id":5,"name":"HP电脑","price":4000},
                 {"count":100,"id":6,"name":"苹果手机","price":5000}],
     "totalCount":22,
     "totalPage":3}
    

    说明服务器端能够正常给浏览器响应数据.再接着写前端代码

    显示表格中的数据

    • 先将后端得到的数据解析,再同步到js代码中,通过pagebean.products获得所有product对象的数据的数组,再遍历这个数组,把product属性的值拼接到表格中去.

    • 代码如下

      $.post(
          url,//给服务器传送数据的地址
          {"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数
          function (data) {
              //解析服务器端传过来的全部pagebean数据,格式为json类型
              var pagebean = eval(data);
              //同步数据
              pageNo=pagebean.pageNo;
              pageSize=pagebean.pageSize;
              totalPage=pagebean.totalPage;
              products=pagebean.products;
              //显示表格中的数据===============================================
              for (var i = 0; i < products.length; i++) {
                  //遍历每一行的数据
                  var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"</td>							<td>"+products[i].count+"</td><td>"+products[i].price+"</td>						</tr>");
                  // 并添加到表格中,添加数据到表格中
                  $("#tab").append(protd);
              }
          },"json")
      

      这段代码写完后,可开启服务器,测试能否获取数据到表格中.经测试成功显示数据.

    显示分页条的数据

    先显示上一页与下一页的数据

    //显示分页条的数据========================================================
    //先不考虑功能,先能显示出来
    //显示上一页
    var preLi=$('<li class="disabled"><a href="#">上一页</a></li>');
    //通过类选择器,添加进去
    $(".pager").append(preLi);
    
    //显示下一页
    var nextLi=$('<li class="disabled"><a href="#">下一页</a></li>');
    //通过类选择器,添加进去
    $(".pager").append(nextLi);
    

    进测试效果如下:

    显示页码数据:

    //显示分页条的数据========================================================
    //先不考虑功能,先能显示出来
    //显示上一页
    var preLi=$('<li class="disabled"><a href="#">上一页</a></li>');
    //通过类选择器,添加进去
    $(".pager").append(preLi);
    
    //遍历显示页码
    for (var i = 1; i <= totalPage; i++) {
        //创建li标签
        var li=$('<li><a href="#">'+i+'</a></li>');
        //通过类选择器,添加到ul中
        $(".pager").append(li);
    }
    
    //显示下一页
    var nextLi=$('<li class="disabled"><a href="#">下一页</a></li>');
    //通过类选择器,添加进去
    $(".pager").append(nextLi);
    

    效果如下图所示:

    当前页高亮显示

    由于bootstrap中,pager类不支持高亮显示,因此把分页的类换为pagination.

    高亮的逻辑是,在遍历的是否,判断是否为当前页(pageNo).

    给li标签添加class的active 属性

    //遍历显示页码
    for (var i = 1; i <= totalPage; i++) {
        var li;
        if(i===pageNo){
            //=========是当前页,就高亮显示
            li=$('<li class="active"><a href="#">'+i+'</a></li>');
            //通过类选择器,添加到ul中
            $(".pagination").append(li);
        }else{
            //========不是当前页,不高亮显示
            li=$('<li><a href="#">'+i+'</a></li>');
            //通过类选择器,添加到ul中
            $(".pagination").append(li);
        }
    }
    
    • 效果如下

    给页码添加点击事件,切换数据.

    当前页不需要添加点击事件

    给页数里面的a标签添加onclick事件,绑定一个skipPage()函数,skipPage()函数里面所做的操作实际上就是我们获取第1页数据的向服务器发送Ajax的post请求的操作,所以把$(function(){})的代码复制到skipPage()函数中,然后在页面加载完成时调用skipPage()函数,传入1就表示默认加载第1页数据。此时,$(function(){})只会执行一次.而skipPage()成了递归函数,自己调用自己.但一次点击事件,只会调用一次skipPage方法,与java中的递归不太一样.Fragment–>

    • 执行完此段代码后,点击不同的代码,发现表格的内容以及分页条会不断叠加

      如下图所示:

    每次加载数据时,清空数据.

    清空分页条

    添加了清空分页条的代码后,发现,分页条没有叠加了,但是表格还在叠加

    清空表格

    $("#tab").empty();给表格执行清空代码后发现如下现象:

    表格的第一行标题没有了,所以需要用选择器,把第一行排除在外.

    $("#tab tr:not(:first)")的含义是

    先根据id选择器,选择表格
    再由层级选择器,选择tr行
    再由基本选择器not中嵌套基本选择器first,代表不是第一行
    整体的意思是,选择了表格了不是第一行的元素,调用empty()方法,删除匹配的元素集合中所有的子节点。

    测试后,能够不删除第一行数据

    上一页判断是否可用,以及切换页码功能

    • 如果当前页是第一页,上一页功能就不可用.
    • 如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一.
      //显示上一页,判断是否可用
    var preLi;
    if(pageNo===1){
        //如果当前页是第一页,上一页功能就不可用
        preLi=$('<li class="disabled"><a href="javascript:void(0)">上一页</a></li>');
    }else{
        preLi=$('<li><a href="javascript:void(0)" οnclick="skipPage('+(pageNo-1)+')">上一页</a></li>');
    }
    //通过类选择器,添加进去
    $(".pagination").append(preLi);
    

    下一页判断是否可用,以及切换页码功能

    • 如果当前页是最后一页,上一页功能就不可用.
    • 如果当前页不是最后一页,就添加点击事件,切换到下一页,把页码加一.
    //显示下一页,判断是否可用
    var nextLi;
    if(pageNo===totalPage){
        //如果当前页是最后一页,上一页功能就不可用.
        nextLi=$('<li class="disabled"><a href="javascript:void(0)">下一页</a></li>');
    }else {
        //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一.
        nextLi=$('<li><a href="javascript:void(0)" οnclick="skipPage('+(pageNo+1)+')">下一页</a></li>');
    }
    //通过类选择器,添加进去
    $(".pagination").append(nextLi);
    

    至此,前端页面的代码全部完成,功能全部实现

    前端页面的全部代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>商品展示列表</title>
        <!--引入bootstrap相关文件-->
        <link rel="stylesheet" href="/ajax_product/bootstrap/css/bootstrap.css">
        <script type="text/javascript" src="/ajax_product/bootstrap/js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="/ajax_product/bootstrap/js/bootstrap.js"></script>
    </head>
    <script type="text/javascript">
        var url ="/ajax_product/product";
        var pageNo=1;//当前页面设置为1
        var pageSize=5;//每页显示6条商品信息
        var totalPage;//一共有多少页数据
        var products;//商品的数据信息
    
        //页面加载时,向服务器发送请求,接收全部的商品数据
        $(function () {
            skipPage(1);
        });
    
        function skipPage(page) {
            //===========分页时的post请求===================================
            pageNo=page;
            //=====向服务器发送post请求
            $.post(
                url,//给服务器传送数据的地址
                {"pageNo": pageNo, "pageSize": pageSize},//给浏览器传递当前页面数和每页显示的条数
                function (data) {
                    //解析服务器端传过来的全部pagebean数据,格式为json类型
                    var pagebean = eval(data);
                    //同步数据
                    pageNo=pagebean.pageNo;
                    pageSize=pagebean.pageSize;
                    totalPage=pagebean.totalPage;
                    products=pagebean.products;
    
                    //显示表格中的数据===============================================
                    //$("#tab").empty();
                    $("#tab tr:not(:first)").empty();
    
                    for (var i = 0; i < products.length; i++) {
                        //遍历每一行的数据
                        var protd =$("<tr><td>"+products[i].id+"</td><td>"+products[i].name+"					</td><td>"+products[i].count+"</td><td>"+products[i].price+"</td></tr>");
                        // 并添加到表格中,添加数据到表格中
                        $("#tab").append(protd);
                    }
    
                    //显示分页条的数据========================================================
    
                    //清空分页条
                    $(".pagination").empty();
    
                    //先不考虑功能,先能显示出来
                    //显示上一页,判断是否可用
                    var preLi;
                    if(pageNo===1){
                        //如果当前页是第一页,上一页功能就不可用.
                        preLi=$('<li class="disabled"><a href="javascript:void(0)">上一页</a>							</li>');
                    }else{
                        //如果当前页不是第一页,就添加点击事件,切换到上一页,把页码减一.
                        preLi=$('<li><a href="javascript:void(0)" οnclick="skipPage('+(pageNo-						1)+')">上一页</a></li>');
                    }
                    //通过类选择器,添加进去
                    $(".pagination").append(preLi);
    
                    //遍历显示页码
                    for (var i = 1; i <= totalPage; i++) {
                        var li;
                        if(i===pageNo){
                            //=========是当前页,就高亮显示
                            li=$('<li class="active"><a href="javascript:void(0)">'+i+'</a>								</li>');
                            //通过类选择器,添加到ul中
                            $(".pagination").append(li);
                        }else{
                            //========不是当前页,不高亮显示.添加点击事件,参数传递为当前页码
                            li=$('<li><a href="javascript:void(0)" 													οnclick="skipPage('+i+')">'+i+'</a></li>');
                            //通过类选择器,添加到ul中
                            $(".pagination").append(li);
                        }
                    }
                    //显示下一页,判断是否可用
                    var nextLi;
                    if(pageNo===totalPage){
                          //如果当前页是最后一页,上一页功能就不可用.
                        nextLi=$('<li class="disabled"><a href="javascript:void(0)">下一页</a>					</li>');
                    }else {
                        //如果当前页不是最后一页,就添加点击事件,切换到上一页,把页码减一.
                        nextLi=$('<li><a href="javascript:void(0)" οnclick="skipPage('+						(pageNo+1)+')">下一页</a></li>');
                    }
                    //通过类选择器,添加进去
                    $(".pagination").append(nextLi);
    
                },"json")
        }
    </script>
    
    <body>
    <h3 align="center">促销商品展示</h3>
    <div class="container">
        <!--商品的表格占一行-->
        <div class="row">
            <div class="col-md-12">
                <!--table-hover表示当鼠标移入这一行表格的时候,颜色变化
                    table-bordered表示给表格加边框
                -->
                <table class="table table-hover table-bordered" id="tab">
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>商品单价</th>
                    </tr>
                </table>
            </div>
        </div>
    
        <div class="row">
            <div class="col-md-4 col-md-offset-4" >
                <nav>
                    <ul class="pagination">
    				 <!--此处代码由js动态生成
                		-->
                    </ul>
                </nav>
            </div>
        </div>
    
    </div>
    </body>
    </html>
    

    总结

    此分页功能,用到了JavaEE的三层架构的思想.每一层各司其职,做各自的负责的事情.前端部分为难点.需要处理的细节很多.前端涉及到了ajax和jquery.jQuery的一些语法与选择器的相关的东西要非常熟练.还用到了bootrap响应式开发,让前端页面的布局更加方便.

    展开全文
  • QUnit异步AJAX单元测试

    2012-05-29 19:26:16
    Any idea? I figure since they are asynchronous, they should fire at the same time.... <pre><code>module("AJAX Request"); asyncTest("request_data_success", 1, function () { $.ajax({ url: ...
  • Ajax测试PHP响应

    2017-11-02 10:00:05
    <p>I'm making a simple registration mechanism that stores username and password into a MySQL database.... <li>User enters his data into textboxes. ...Any idea why this is happening? Thanks. </div>
  • 最近看到有人在问题里提问,模拟Ajax请求的问题。所以就想看看有没有方法通过Rhino来实现Ajax请求的模拟。二、分析通过上网检索,发现可以采用Envjs,一个纯js方式在无浏览器环境下模拟浏览器的行为,并且与Rhino有...
  • 简单使用Idea创建三层架构项目和数据库连接(使用原生ajax进行访问+ajax) Idea创建三层架构项目 首先创建一个Web项目model 创建Web完成后进行创建entity、dao、service        特别注意   ...
  • 如何测试ajax页面

    2012-06-12 18:08:43
    <p>The idea is to display the current time on the page, in an area that is not supposed to be updated by my ajax call. But when I click on my refresh button, in addition to updating the table data, ...
  • IDEA Maven+SpringMVC+Mybatis HTML+Ajax MySql Tomcat登录Demo(二) 开发工具:IDEA 前端技术:HTML+JQuery+Ajax 后端技术:Maven+SpringMVC+MyBatis 数据库:MySql 本节内容记录了Model数据层面的记录,...
  • IDEA Maven+SpringMVC+Mybatis HTML+Ajax MySql Tomcat登录Demo(二) 开发工具:IDEA 前端技术:HTML+JQuery+Ajax 后端技术:Maven+SpringMVC+MyBatis 数据库:MySql 本节内容记录了SpringMVC项目登录前端内容 ...
  • 【尚筹网IDEA版】03-SSM整合测试 代码下载: git clone https://github.com/YuanbaoQiang/atcrowdfunding.git Spring-MVC下的ajax请求 基本流程 前端代码 $("#btn4").click(function () { // 准备要发送的数据 ...
  • AJAX一 JSON1.1 JSON概述1.2 JSON基础语法1.3 JSON格式转换二 AJAX2.1 AJAX概述2.2 JS原生AJAX【了解,开发中不用....】2.3 JQuery的Ajax插件【会用】2.3.1 get/post 函数(要背下来)2.3.2 ajax函数(看得懂,会抄)2.4 ...
  • IDEA学习笔记

    万次阅读 多人点赞 2021-05-12 18:29:40
    1、IDEA的安装、配置和使用 1.1 概述 1.1.1 JetBrains概述 IDEA(https://www.jetbrains.com/idea/)JetBrains 公司的产品,公司旗下还有其它产品,比如: WebStorm:用于开发 JavaScript、HTML5、CSS3 等前端...
  • [code="...// 首先测试一下页面的按钮按下,可以调用这个方法 // 使用javascript的alert方法,显示一个弹出提示框 // alert("按钮被点击了"); // 1获取文本框的内容 // document.ge...
  • 最近看到有人在问题里提问,模拟Ajax请求的问题。所以就想看看有没有方法通过Rhino来实现Ajax请求的模拟。二、分析通过上网检索,发现可以采用Envjs,一个纯js方式在无浏览器环境下模拟浏览器的行为,并且与Rhino有...
  • UI检查、测试的一个idea 在电子商务网站中, 为达到较好的用户体验, 可能页面上会有大量的UI设计,一堆css、ajax效果等,敏捷开发中, UI变动更是带来了测试的苦恼。对于回归组catch UI bug,需要有一些策略 1...
  • 本文以ajax方式完成后台数据的分页查询和显示。 1、前提约束 完成分页获取用户信息api 2、技术选型 前端分页插件jquery paginator 前端模板技术 jquery-tmpl 后端分页插件pagehelper 3、导入依赖的js、css ...
  • (四)测试 八、整合前端界面 springboot 整合 ajax前端 九、结束(项目源码链接) 效果图 前言 博文仅介绍了如何查询数据,但项目源码包含增删改查的方便大家学习Java。异常类未完善,后期补上谢谢一键三连 本次...
  • 效果: https://v.qq.com/x/page/b3021ygobgd.html(录制的... 下面是几张截图 ...因为后端接口的代码太多,这里只粘前端代码 ... Created by IntelliJ IDEA. User: mft Date: 2019-10-08 Time: 15:00 To change...
  • 整体结构 : 建议: 一般先写服务端层,最后写客户端层(客户端层可以先不用管) 第一步:main下建立java文件: ...创建相应格式文件夹 main-Java下(控制层、数据访问层、实体类、业务层、辅助方法层) ...
  • ajax

    千次阅读 2014-07-18 23:49:29
    AJAX 简介编辑 AJAX = 异步 JavaScript 和 XML。[1] AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下...
  • ajax请求node.jsWriting tests for an application that relies on external services, say, a RESTful API, is challenging. More often than not, an external resource may require authentication, ...
  • Ajax研究 9.1、简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 Ajax 不是一种新的编程语言,而是一种...
  • 技术基础:HTML+CSS:略懂JS:熟练※开发工具:IDEA测试:伪造Ajax,使用iframe 测试,感觉效果htmla)新建模块,导入web支持b)编写一个html文件,使用iframe测试,浏览器运行![image.png](/img/bVbMqm7)![image.png]...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,875
精华内容 2,750
关键字:

ajax测试idea