02_jQuery与Ajax

jquery

jquery的作用

他是js的库

处理html,事件,实现动画效果,方便的为网站提供AJAX交互

命名格式

.ji:体积大,用于学习和debug使用

.min.js:压缩的文件,体积小,用于线上环境使用

使用方法

必须先在页面文件中进行引用

$就是jQuery

注意:

jQuery是DOM的封装

jQuery和DOM的方法不能进行混用

jQuery对象的格式和DOM对象的格式不同

jQuery对象输出顺序在DOM对象之前

jQuery和DOM之对象之间的转换

​ dom对象转jQuery对象(可以使用jquery对象里面的方法)

var btn = document.getElementById("btn");
var jq=$(btn);

​ jQuery对象转dom对象(可以使用dom对象里面的方法)

​ jQuery是一个伪数组(不能修改里面的元素)

$(function () {
    //jQuery对象
    console.log($("#btn").innerText);
    //使用自己的方法取里面的文本
    console.log($("#btn").text());
    //jQuery对象转dom对象
    //方法1
    console.log($("#btn")[0]);
    //方法2
    console.log("对象:"+$("#btn").get(0).innerText);
})

jQuery对象使用方法

.html

操作元素内中的html代码

console.log($("#h1").html());

.text

操作元素中的文本,忽略HTML标签

console.log($("#h1").text("xxx"));

.css

操作元素中的style属性

console.log($("#h1").css("color","green"));

.val

操作元素的value属性

$("#username").val("安安安");

.size

获取该对象的个数

console.log($("p").size());

选择器类型

语法： $(“选择器表达式”)

<div id="msg">使⽤ ID 选择器获取当前 DIV元素</div>
<ul>
  <li>item1</li>
  <li>item2</li>
</ul>
<ul id="myul">
  <li>item1</li>
  <li class="selected">item2</li>
</ul>

id选择器

$(function{
$("#msg");
})

class选择器

$(function{
$(".selected");
})

标签选择器

$(function{
$("ul");
})

层级选择器

​ 后代选择器(会自动去重)

$(function){
$("ul li");
}

​ 子代选择器

$(function){
$("#myul > li");
}

​ 兄弟选择器

$(function){
$("label + input");
}

​ 所有的同级选择器

$(function){
$("label ~ input");
}

json

轻量级的数据交互格式,是ES自带的,更高效的进行传输

**总结:**是一种具有一定格式的字符串,用于数据的传,和JQuery是两种不同的东西

json语法格式

标准格式的名称使用双引号括起来

属性名于属性值的映射使⽤冒号分隔 : 标准格式名称⽤双引号括起来；

“name”: value

多个属性使⽤逗号分隔 ,

“name1”: value1, “name2”: value2

映射的对象⽤⼤括号 {} 表示

{“name1”: value1, “name2”: value2}

数组/集合使⽤⽤⽅括号 [] 表示,如下有两个对象

[{“name”, value}, {“name”: value}]

**元素值的类型:**string,number,objiect,array,true,false,null

json字符串转js对象

浏览器中提供了json工具,里面的方法实现两者的转换

​ 1.创建Json字符串(里面可以是数组或者对象)

    var jsonString='{"id":1,"name":"李华","age":23,"favs":["Java","BG"],"dept":{"id":2,"name":"销售"}}';

2.转换

JSON.parse(jsonString)

js对象转json字符串

1.创建js对象

var obj={
name:"张三",
age:25
}

2.转换

JSON.stringfy(obj)

java对象与json字符串互转

方式1,使用Jackson

使用的是ObjiectMapper()

​ 导入依赖

<dependency>
 <groupId>com.fasterxml.jackson.core</groupId>
 <artifactId>jackson-databind</artifactId>
 <version>2.9.6</version>
</dependency>

//创建java对象
Department d=new Department(1L,"张三",23);
//使用JSON第三方库,将java对象转化为字符串
ObjiectMapper mapper=new ObjiectMapper();
mapper.writeValueAsString(d);
//字符串转java对象
String jsonString="{"id":1,"name":"研发部","sn":"yfb\";
    //里面的值就是  字符串,类型字节码
mapper.readValue(jsonString.Department.class)

方式2:使用fastJson

使用的是 JSON

​ 导入依赖

<dependency>
 <groupId>com.alibaba</groupId>
 <artifactId>fastjson</artifactId>
 <version>1.2.47</version>
</dependency>

//创建java对象
Department d=new Department(1L,"张三",23);
//使用JSON第三方库,将java对象转化为字符串
JSON.toJSONString(d)
//转java对象
String jsonString="{"id":1,"name":"研发部","sn":"yfb\";
JSON.parseObjiect(jsonString,Department);

Spring MVC响应json

使用spring响应json数据给浏览器

做java对象转化json时使用注解的方式更加快捷

​ 方式一(@ResponseBody):贴在方法上.告知spring将返回值转化成json字符串并响应

方式二(@RestConttroller):贴在类上,将Controller和ResponseBody的功能进行结合

AJAX

重要:

使用ajax后,不在通过浏览器发送你请求,使用JavaScript对象发送请求和接收响应

**同步请求:**请求一个个发送,只有等接收到响应后才再次发送请求,容易造成请求阻塞

**异步请求:**发送数据请求后,不用等到接收响应继续发送请求,可以对部分内容进行刷新,减少请求发送的次数,减轻服务器的压力

AJAX的缺点

1.部分浏览器可能不支持

2.只能更新部分内容,后退功能失效(没有缓存进行数据的存储)

3.不支持跨域访问

jQuery 中 AJAX API

1.$.ajax([option])

填值的时候没有固定的顺序

参数	作用
url	请求java的地址-------必传
data	发送到服务器的数据,使用的是字符串格式
success	请求成功后的回调函数,function中的参数由服务器返回
type	使用的请求方法:get,post,delete,put--------必传
async	默认为true(异步请求),可设置为false为同步请求
datatype	给服务器返回的数据类型,可以不指定

示例用法:

<script>
    //当用户名输入框失去焦点是发送请求到服务器,检查输入框中的用户名是否存在
    //使用异步请求提交数据,使用AJAX,不使用表单
    $(function () {
        $("#username").change(function (){
            var username = this.value;
            //console.log(".........");
            //使用ajax发送请求
            $.ajax({
                type:"post",
                url:"/checkUsername",
                data:"username="+username,
                success:function (res){
                    //console.log(res);
                    if(res.success){
                        $("span").text(res.msg).css("color","green");
                    }else{
                        $("span").text(res.msg).css("color","red");
                    }
                }
            })
        })
    })
</script>

get和post填值的时候必须按照格式进行填写

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

参数	作用
url	请求java的地址
data	发送到服务器的数据,使用的是字符串格式
callback	请求成功后的回调函数,使用function函数
type	使用的请求方法:get,post,delete,put

<script src="../js/jquery-2.1.4.js"></script>
  <script>
      //使用异步请求提交数据,使用AJAX,不使用表单
$(function (){
    $("#login").click(function (){
        //使用的是jQuery.val取json的值
        var username = $("#username").val();
        var password = $("#password").val();
        //将两个拼接成一个js对象
        var js={username:username,password:password}
        
        $.post("/login", js, function (result){
                if(result.success){
                    //$("#result").text(result.msg).css("color","green");
                    //成功后进行页面跳转
                    alert(result.msg);
                    location.href("/login.jsp")
                }else {
                    $("#result").text(result.msg).css("color","red");
                }
        })
    })
})
  </script>

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

参数	作用
url	请求java的地址
data	发送到服务器的数据,使用的是字符串格式
callback	请求成功后的回调函数,使用function函数

 }else {
                $("#result").text(result.msg).css("color","red");
            }
    })
})

})

**3.$.post(url, [data], [callback], [type])**

| 参数     | 作用                                  |
| -------- | ------------------------------------- |
| url      | 请求java的地址                        |
| data     | 发送到服务器的数据,使用的是字符串格式 |
| callback | 请求成功后的回调函数,使用function函数 |
| type     | 使用的请求方法:get,post,delete,put    |