avatar
文章
100
标签
38
分类
14
首页
时间轴
标签
分类
公告：haoyongliang.gitee.io暂停访问
首页
时间轴
标签
分类
JQuery基础
|前端
阅读量:

JS 前置知识

ECMAScript

就是JS的基本语法

定义变量 let 变量名 = 值;

运算符 ==和===的区别

定义循环

定义if语句

数组 let arr = [“”,””]; let arr = new Array(“”,””) push() pop()

函数 function 函数名(){} let 变量名 = function(){}

JS对象转JSON: let str = JSON.stringify(js对象);

JSON转JS对象: let js对象 = JSON.parse(JSON格式的字符串)

BOM

定时器

​ setTimeout(function(){},毫秒)

​ setInterval(function(){},毫秒)

地址对象

​ location.href 获取浏览器地址栏中的值

​ location.href="http://www.baidu.com" 跳转到百度

历史记录

​ history.go(-1) 回退

​ history.go(1)前进

弹出确认框

​ let flag = confirm(“确定要删除吗”) 会弹出一个框，如果点击确定flag就是true，否则就是false

JQuery是什么

  • jQuery 是一个 JavaScript 库，或者说是JS的工具类
  • 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
  • jQuery 官网：https://www.jquery.com

JQuery快速入门

步骤

1.引入jquery.js

2.创建标签

3.编写js操作标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 1.引入jquery.js -->	
    <script src="jquery-3.3.1.min.js"></script>
    
</head>
<body>
    <!-- 2.创建两个div标签 -->
    <div></div>
    <hr>
    <div></div>


    <script>
        //3.编写js操作标签
        //jquery对象$()， 本质是一个数组，我们操作jquery对象就是操作数组中的每一个元素
        $("div").css({
            "background-color":"red",
            "width":"100px",
            "height":"100px",
            "border":"1px solid black"
        });
    </script>
</body>
</html>

JQuery对象和JS原生对象的相互转换

jquery对象$()， 本质是一个数组，我们操作jquery对象就是操作数组中的每一个元素

把jquery对象转JS对象,就是通过索引取出元素

1
2
let jqObj = $("#div");
let jsObj = jqObj[0];

把js对象转换成jquery对象，使用$()包裹起来

1
2
let jsObj = "abc";
let jqObj = $(jsObj);

入口函数

结论：所有的代码都写到入口函数中，保证JS在页面DOM树加载完毕后运行

onload需要资源加载完毕才执行，入口函数在资源加载之前执行

onload只能绑定一次，入口函数可以写多个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    
    <h1>哈哈哈</h1>

    <script>
        //onload事件需要等dom元素加载完毕，并且资源也加载完毕才会执行,比如页面有很多个图片，要等图片加载完毕后才能执行。如果网速特别慢，那么需要等很久
        window.onload = function(){
            console.log($("h1"))
        }

        //入口函数$(function(){});以后把所有的代码都放到入口函数中。入口函数只需要等页面的标签加载完毕就能马上运行
        $(function(){
            console.log($("h1"))
        });
    </script>
</body>
</html>

绑定事件

使用on绑定事件，效率更高，并且可以给动态添加的元素绑定事件

格式: jq对象.on(“事件名”,function(){})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div></div>
    <hr>
    <div></div>

    <script>
        //通过jquery初始化div的样式
        $("div").css({
            "background-color":"red",
            "width":"100px",
            "height":"100px",
            "border":"1px solid black"
        });


       

        //绑定事件 on('事件名',function(){}) 好处：效率高
        $("div").on("mouseenter",function(){//鼠标移入
            // this: 鼠标移入哪个div，this就表示哪个div，是一个原生的JS对象，使用$()变成jq对象，就可以调用jq对象的css方法
            $(this).css({
                "opacity":"0.5"
            });
        });
        
        $("div").on("mouseleave",function(){
            $(this).css({
                "opacity":"1"
            });
        });



    </script>
</body>
</html>

给动态添加的元素绑定事件

$(“父辈以上的标签”).on(‘事件名’,’真正要绑定事件的标签’,function(){})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
   
   <ul>
      <li>周星驰</li>
      <li>貂蝉</li>
      <li>乐公子</li>
   </ul>
   <input type="text" placeholder="请输入要添加的内容">
   <button type="button">添加</button>

   <script>
     $(function(){
        $("button").on('click',function(){
           //获取表单数据,获取表单的值val(),这个方法专门用来获取input输入框的value属性的值，就是用户输入的值
           let input = $(":text").val();

           //创建li标签
            let li = $("<li>"+input+"</li>")

           //把li标签添加到ul标签中
           $("ul").append(li);
        });
     })


     $(function(){
        //给动态添加的元素绑定单击事件
        //$("父辈以上的标签").on('事件名','真正要绑定事件的标签',function(){})
        $("html").on('click','li',function(){
           let content = $(this).text();
           alert(content);
        });
     });
   </script>
</body>
</html>

遍历的5中方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <script>
        //重点掌握遍历方式1和遍历方式4
        let arr = ["刘哲","崔乐","楚雄","阿威"];

        /*遍历方式1：普通for循环*/
        console.log("-----------------*遍历方式1：普通for循环--------------------");
        for(let i=0; i<arr.length; i++){
            console.log(arr[i]);
        }

        /*遍历方式2:增强for 使用 for..of*/
        console.log("-----------------遍历方式2:增强for 使用 for..of-------------------");
        for(let element of arr){//element表示数组中的元素
            console.log(element);
        }

        /*遍历方式3:增强for 使用 for..in*/
        console.log("-----------------遍历方式2:增强for 使用 for..in-------------------");
        for(let index in arr){//index表示索引
            console.log(arr[index]);
        }

        /*遍历方式4:调用jquery对象的each方法*/
        console.log("-----------------*遍历方式4:调用jquery对象的each方法-------------------")
        $(arr).each(function(index,element){//index表示索引从0开始，element表示元素 这两个是变量名，可以随便起
            console.log(`索引是:${index},元素是:${element}`);
        });

        /*遍历方式5:调用jquery的静态each(要遍历的对象,function(索引，元素))方法*/
        console.log("-----------------遍历方式5:调用jquery的静态each(要遍历的对象,function(索引，元素))方法--")
        $.each(arr,function(index,element){
            console.log(`索引是:${index},元素是:${element}`);
        });   
    </script>
</body>
</html>

选择器

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>哈</h1>
    <h1 class="c">喽</h1>
    <h1 id="w">world</h1>


    <script>
       //$("选择器")
       console.log($("h1"))//标签选择器，所有的h1标签都能获取到
       console.log($(".c"))//类选择器，获取class="c" 的标签
       console.log($("#w"))//ID选择器，获取id="w" 的标签
    </script>
</body>
</html>

层级选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>
        <div>
            <span>
                <div>哈哈哈</div>
            </span>
            <span>
                <div>嘿嘿嘿</div>
            </span>
        </div>
    </h1>


    <script>
       //$("选择器")
      console.log($("h1>div").length);//子元素选择器 表示把h1标签下的直接子元素div标签获取到，只能获取到1个
      console.log($("h1 div").length);//子孙元素选择器 表示把h1标签下的所有的div标签都获取到,获取到3个
    </script>
</body>
</html>

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1 id="le">乐乐</h1>
    <img src="xx.jpg" alt="xxx">
    <input type="text">

    <script>
       //$("[属性名]")  $("[属性名='属性值']")
      console.log($("[id='le']"));//获取id属性的值为le的标签
      console.log($("[src]"))//获取含有src属性的标签
      console.log($("[src='xx.jpg']"));
      console.log($("input[type='text']"))//获取type属性=text的input标签
    </script>
</body>
</html>

过滤选择器

:first,:last,:eq(index),:even,:odd,:gt(index),:lt(index)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>第0个</div>
    <div>第1个</div>
    <div>第2个</div>
    <div>第3个</div>
    <div>第4个</div>
    <div>第5个</div>
    <div>第6个</div>
    <div>第7个</div>

    <script>
       //$("选择器")
       //获取第一个div
       console.log($("div:first"));
       //获取最后一个div
       console.log($("div:last"));

       //获取指定索引的div标签
       console.log($("div:eq(5)"));

       //获取索引为偶数的div
       console.log($("div:even"));
       //获取索引为奇数的div
       console.log($("div:odd"));


       //获取索引大于2的div,不包含2
       console.log($("div:gt(2)"));
        //获取索引小于2的div，不包含2
        console.log($("div:lt(2)"));
    </script>
</body>
</html>

表单和值选择器

表单选择器：获取type=指定值的input标签，格式 :type的值

值选择器：用来获取被选中的下拉框或者单选和复选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
   <form action="">
       帐号:<input type="text" placeholder="请输入用户名" name="username"> <br>
       密码:<input type="password" placeholder="请输入密码" name="password"> <br>
       性别: <input type="radio" name="gender" value="man" checked>男 <input type="radio" name="gender" value="woman">女 <br>
       爱好: <input type="checkbox" name="hobby" value="eat" checked>吃 <input type="checkbox" name="hobby" value="drink" checked>喝 <br>
       所属村: <select name="town">
            <option value="nmc">淖马村</option>
            <option value="dmc" selected>大马村</option>
            <option value="xmc">小马村</option>
       </select>  
   </form>


   <script>
      $(function(){
        //表单选择器,简化$("input[type='text']") 这个代码
        console.log($(":text"));//等价于$("input[type='text']") 获取type属性等于text的input标签
        console.log($(":password"))//获取type属性等于password的input标签
        console.log($(":radio"));//获取到2个 获取type属性等于radio的input标签
        console.log($(":checkbox"));//获取到2个 获取type属性等于checkbox的input标签


        //值选择器：获取被选中的单选框、多选框、下拉框
        //获取被选中的单选框 :checked
        console.log("获取被选中的单选框")
        console.log($(":radio:checked"));

        //获取被选中的多选框 :checked
        console.log("获取被选中的多选框")
        console.log($(":checkbox:checked"));


        //获取被选中的下拉框 :selected
        console.log("获取被选中的下拉框")
        console.log($("select>option:selected"));
      });
   </script>
</body>
</html>

DOM操作

操作标签内容

<div>内容</div>

操作文本内容 text()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
   <div></div>

   <script>
     //向div中插入纯文本内容，页面会显示 今天你中午吃了几碗面
      $("div").text("今天你中午吃了几碗面");

      //获取标签中的纯文本内容
      let text = $("div").text();
      console.log(text);
   </script>
</body>
</html>

操作htm内容 html()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
   <div></div>

   <script>
      //向div中插入html代码
      $("div").html("<h1>今天你中午吃了几碗面</h1>");
       
      //获取div中的html代码
      let html = $("div").html();
      console.log(html);
   </script>
</body>
</html>

标签的创建、添加、删除

创建： $("<标签>内容</标签>")

添加: 父dom对象.append(要添加的dom对象)

删除: dom对象.empty() 表示把当前标签中的内容清空 dom对象.remove()表示把自己干掉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
   <div></div>



   <ul>
      <li>周星驰</li>
      <li>貂蝉</li>
      <li>乐公子</li>
   </ul>
   <script>
      //1.创建 一个h1标签,这就表示创建了一个dom对象  语法 $("<标签>内容</标签>")
      let h1 = $("<h1>今天中午吃了几碗面</h1>")

      //2.把创建好的h1标签添加到div标签中   语法 父dom对象.append(要添加的dom对象)
      $("div").append(h1);


      //3.删除 
      //把标签中的内容干掉,标签还在
      $("ul").empty();

      //把标签直接干掉
      $("ul").remove();
   </script>
</body>
</html>

操作标签的样式

操作style属性

设置

dom对象.css(“样式名”,”样式值”) //只能设置一个样式

dom对象.css({

​ “样式名1”:”值”,

​ “样式名2”:”值”…..

})//可以设置多个样式

获取

let 值= dom对象.css(“样式名”)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div></div>
    <button type="button">点击设置样式</button> <button type="button">点击获取样式</button>

    <script>
        $(function(){
            //设置样式
            $("button:first").on('click',function(){
                //以下方式只能一个一个的设置
                // $("div").css("width","200px");
                // $("div").css("height","200px");
                // $("div").css("border","1px solid black");

                //同时设置多个样式
                $("div").css({
                    "width":"200px",
                    "height":"200px",
                    "background-color":"red"
                });
            });

            //获取样式
            $("button:last").on('click',function(){
                //获取背景色
                console.log($("div").css('background-color'));
                //获取高度
                console.log($("div").css('height'));
            });
        });
    </script>
</body>
</html>

操作class属性

前提：页面中先得有样式，并且必须是类样式.xxx{}

添加类样式 dom对象.addClass('类样式')

删除类样式 dom对象.removeClass('类样式')

切换类样式 dom对象.toggleClass('类样式') 有就删除，没有就添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        .dv{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div></div>
    
    <button>添加类样式</button>
    <button>删除类样式</button>
    <button>切换类样式</button>

    <script>
        $(function(){
            $("button:eq(0)").on('click',function(){
                //找到div标签，添加类样式
                $("div").addClass("dv")
            });
            $("button:eq(1)").on('click',function(){
                //找到div标签，删除类样式
                $("div").removeClass("dv")
            });

            $("button:eq(2)").on('click',function(){
                //找到div标签，如果有dv样式，就删除，如果没有就添加
                $("div").toggleClass("dv")
            });

        })
    </script>
</body>
</html>

操作标签的属性

操作原始属性属性

操作原始属性 。原始属性就是W3C规范赋予的属性，比如超链接有href属性，那么href属性就是a标签的原始属性，href不是div标签的原始属性

获取prop(“属性名”)

设置prop(“属性名”,”属性值”)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <a>百度</a>

    <button>添加href属性</button>
    <button>获取href属性</button>

    <script>
        $(function(){

            $("button:first").on('click',function(){
                //设置原始属性的值 prop("属性名","属性值")
                $("a").prop("href","http://www.baidu.com");
            });

            $("button:last").on('click',function(){
                //获取原始属性的值 prop("属性名")
                console.log($("a").prop("href"));
            });
        });
    </script>
</body>
</html>

操作自定义属性

一般情况自定义属性的名字建议以data-开头

设置 attr(“属性名”,”属性值”)

获取 attr(“属性名”)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <a>百度</a>

    <button>添加xx属性</button>
    <button>获取xx属性</button>

    <script>
        $(function(){

            $("button:first").on('click',function(){
                //设置自定义属性的值 attr("属性名","属性值")
                $("a").attr("data-xx","今天吃了两碗面");
            });

            $("button:last").on('click',function(){
                //获取自定义属性的值 attr("属性名")
                console.log($("a").attr("data-xx"));
            });
        });
    </script>
</body>
</html>

获取表单中用户输入的值

表单标签有 普通文本输入框，密码框，单选框，复选框，下拉框。我们可以通过val()获取用户输入或者选中的值，也可以通过val(“值”) 设置值。本质是操作标签的value属性的值，一般获取用的比较多，这里只演示获取值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="text" value="今天吃了2碗面">
    
    <select name="" id="">
        <option value="1">淖马村</option>
        <option value="2">圪僚沟</option>
        <option value="3">圪针沟</option>
    </select>

    <br>
    <button>获取输入框中的值</button>
    <br>
    <button>获取下拉框选中的值</button>
    
    <script>
        $(function(){

            $("button:eq(0)").on('click',function(){
                //获取<input type="text">中用户输入的值
                console.log($("input").val())
            });
            

            $("button:eq(3)").on('click',function(){
                //获取下拉框选中的值
                console.log($("select").val())
            });

        });
    </script>
</body>
</html>

设置复选框的选中状态

通过js代码操作复选框的checked属性，设置true或者false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <input type="checkbox"> 吃
    <input type="checkbox"> 喝


    <script>
        $(function(){
            //设置复选框处于选中状态 true表示选中 false表示不选中
            $(":checkbox").prop("checked",true)
        });
    </script>
</body>
</html>

AJAX

$.get()方法

语法 $.get(url,[data],[callback],[type]);

[]表示可选参数，可以不写

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是字符串例如:”name=jack&age=13&password=123456”，也可以是 js 对象,例如{name:”jack”,age:13,passwordd:”123456”}。如果客户端不需要向服务器传参，可以写””,null,或者可以省略不写

callback：当请求成功后的回调函数(服务端响应成功以后前端要做的事情都写在这个函数中)，该方法可以定义形参，用来接收服务端返回的数据。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

后端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@WebServlet("/DataController/*")
public class DataController extends BaseServlet {

    public void getData(HttpServletRequest request, HttpServletResponse response)throws Exception{
        //获取前端传过来的数据，并打印到控制台
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        String password = request.getParameter("password");
		System.out.println(name+","+age+","+password);
        
        //向前端返回的数据是："哈哈"
        response.getWriter().print("哈哈");
    }
}

前端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery-->
    <script src="js/jquery-3.3.1.min.js"></script>

</head>
<body>
<button>点击请求服务器中的数据</button>

<script>
    $(function () {
        // 给按钮绑定单击事件，单击的时候把name,age,password的值发送给/DataController/getData，并且在控制台获取并输出服务端返回的数据
        $("button").on('click', function () {
            /*1.在浏览器后台偷悄悄的发送请求，访问服务器中的数据*/
            /**
             * 参数1：要请求的资源路径
             * 参数2：发送给服务器的数据 1.数据的格式可以使用字符串拼接也可以使用对象 2.如果客户端不需要向服务器传参，可以写"",null,该参数也可以省略不写
             * 参数3: 服务端响应成功后的前端要执行的函数，xxx表示服务端返回的数据
             * 参数4：指定服务端返回的数据类型，说白了就是xxx的类型，了解，后期不用
             */

            //该案例发送数据使用字符串拼接的形式
            $.get("/DataController/getData","name=jack&age=13&password=123456",function(xxx){
                console.log(xxx)
            },'text');

            /*
            	//该案例发送数据使用对象的形式
                $.get("/DataController/getData", {
                    name: "jack",
                    age: 13,
                    password: 123456
                }, function (xxx) {
                    console.log(xxx)
                }, 'text');
            */

            /*
                //该案例不需要向服务端发送数据，所以省略不写
                $.get("/DataController/getData", function (xxx) {
                    console.log(xxx)
                }, 'text');
            */

        });
    })
</script>
</body>
</html>

在浏览器的network窗口监听发送的请求

$.post()方法

语法 $.post(url,[data],[callback],[type]);

[]表示可选参数，可以不写

剩下的操作同get。

$.ajax()方法

$.ajax({name:value,name:value,…});

​ url：请求的资源路径。

​ async：是否异步请求，true-是，false-否 (默认是 true)。一般不写

​ data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

​ type：请求方式，POST 或 GET (默认是 GET)。

​ dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等，一般不写

​ success：请求成功时调用的回调函数。

​ error：请求失败时调用的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jquery-->
    <script src="js/jquery-3.3.1.min.js"></script>

</head>
<body>
<button>点击请求服务器中的数据</button>

<script>
    $(function () {
        // 给按钮绑定单击事件，单击的时候把name,age,password的值发送给/DataController/getData，并且在控制台获取并输出服务端返回的数据
        $("button").on('click', function () {
            $.ajax({
                url:"/DataController/getData",//路径
                data:{                      //发送给服务器的数据
                    name: "jack",
                    age: 13,
                    password: 123456
                },
                type:"POST",                //请求方式
                dataType:"text",            //服务端返回的数据类型
                success:function(xxx){      //服务端成功响应执行的函数
                    console.log(xxx)
                },
                error:function (xxx) {      //服务端报错执行的函数,xxx是异常信息
                    console.log(xxx)
                }
            });

        });
    })
</script>
</body>
</html>
文章作者: 微信号:hao_yongliang
文章链接: https://haoyongliang.github.io/2020/11/16/%E5%89%8D%E7%AB%AF/Jquery/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 公告：haoyongliang.gitee.io暂停访问！
jquery
打赏
  • 微信
    微信
  • 支付寶
    支付寶
相关推荐
2019-08-28
JQuery分页插件的使用
评论