Ajax+jQuery+JSON总结

Ajax+jQuery+JSON总结（良心总结，有错希望告知）

1. Ajax：前后端之间响应+请求，ajax四步曲：*获取核心对象+注册回调函数+开启通道+发送请求

    /*页面加载完毕时执行回调函数*/
    window.onload = function () {
        /*绑定按钮鼠标单击事件执行回调函数*/
        document.getElementById("btn").onclick = function () {
            /*创建ajax核心对象*/
            var xhr = new XMLHttpRequest();
            /*注册回调函数 当ajax核心对象状态发生改变时*/
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        /*若响应成功的话将响应结果，相应到div容器中去*/
                        document.getElementById("mydiv").innerText = this.responseText;
                    }
                }
            }
            var username = document.getElementById("name").value
            var password = document.getElementById("pass").value
            /*开启通道*/
            xhr.open("GET", "/ajax/request2?name="+username+"&pass="+password+"", true)
            /*发送请求*/
            xhr.send();
        }
    }

2.Ajax的POST请求和Get请求：相对于传统的请求方式（超链接+form表单），Ajax实现局部刷新，异步请求，增加了用户的体验效果。无论是哪种请求方式，向后端发送的数据格式是一样的； eg:username="zhangsan"&address="大兴区"
ps：数据格式一定要一致，且不可以有空格，否则会出现304,使你头皮发麻，迟迟找不到问题哈！

Ajax的get请求：get在请求头中发送数据（代码中的时间戳解决了浏览器端缓存问题）

            // 3.开启通道
            xhr.open("GET", "/ajax/ajaxGet6?t=" + new Date().getTime(), true)
            // 4.发送请求
            xhr.send()

Ajax的Post请求：在请求体中发送数据（相对于get请求，模拟表单发送数据，所以多了一行代码）

            /*var username = document.getElementById("username").value*/
             xhr.open("POST", "/ajax/post1", true)
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
            xhr.send("username=" + username)

3.jQuery:由于ajax请求是固定格式，所以将其封装成库，名为jQuery库

• 如何引入：

<script type="application/javascript" src="js/jquery-3.4.1.js"></script>

• 如何使用：（省市联动的前端js代码）

    <script type="application/javascript">
        function loadDataAjax() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "queryProvince",
                success: function (provinces) {
                    /*响应成功，遍历json格式的字符串*/
                    $("#province").empty()
                    $.each(provinces, function (i, n) {
                        /*测试获取到后端的数据没有？*/
                        /* alert("省份id"+n.id+"省份名称："+n.name)*/
                        /*将获取到的数据拼接到前端相应位置*/
                        $("#province").append("<option value='" + n.id + "'>" + n.name + "</option>")
                    })
                }
            })
        }

        $(function () {
            loadDataAjax()
            $("#btn1").click(function () {
                loadDataAjax()
            })
            $("#province").change(function () {
                /*alert($("#province").val())*/
                var pId = $("#province>option:selected").val()
                /*alert(provinceId)*/
                /*做POST请求与后端交互，将选中的省份id传给后端，根据省份Id查询出城市信息再响应到前端*/
                $.post("queryCity", {pId: pId}, success, "json")
            })
        })
        function success(cities) {
            /* alert(cities)*/
            $("#city").empty()
            $.each(cities, function (i, n) {
                /*测试获取到后端的数据没有？*/
                /* alert("省份id"+n.id+"省份名称："+n.name)*/
                /*将获取到的数据拼接到前端相应位置*/
                $("#city").append("<option value='" + n.id + "'>" + n.name + "</option>")
                /*alert("城市"+n.id+"城市名字"+n.name)*/
            })
        }
    </script>

4.DOM对象(js对象)转换成jQuery对象（数组）：

var obj = document.getElementId("对应节点id名称");
var j1 = $(obj)

jQuery对象转换成DOM对象：

var jobj = $("#对应节点id名称");
var dom = jobj[0]
//或者
var dom1 = jobj.get(0)

5.jQuery中选择器的使用(可组合)：

• *样式#定义，结构idi调用:$("#btn1")

• 样式点定义，结构类调用:$(".btn1")

• 标签选择器:$("div")

• 所有:$("*")

• 表单选择器：$(":type属性值")*

6. jQuery过滤器（指定部分DOM对象）：

$("选择器:过滤条件")
//过滤条件：first   last   eq(数组下标)    lt(下标)  gt(下标)
//eg:$(":text:enabled/disabled")
//$(":radio/checkbox:checked")
//$("select>option:selected")(针对下拉列表)

7. each的语法：
   provinces:后端响应到前端的数据（each遍历的内容）
   i:下标
   n:数组中元素

            $.ajax({
                type: "GET",
                dataType: "json",
                url: "queryProvince",
                success: function (provinces) {
                    /*响应成功，遍历json格式的字符串*/
                    $("#province").empty()
                    $.each(provinces, function (i, n) {
                        /*测试获取到后端的数据没有？*/
                        /* alert("省份id"+n.id+"省份名称："+n.name)*/
                        /*将获取到的数据拼接到前端相应位置*/
                        $("#province").append("<option value='" + n.id + "'>" + n.name + "</option>")
                    })
                }
            })

8**.jQuery对象函数的使用：**

• $(“:text”).val （） 获取dom数组中第一个对象的value属性值（对value值进行取）
• $(“:text”).val （”***“）设置新值（对value值进行存）
• • $(“:div”).html （）对成对标签的文本内容进行取
• $(“:div”).html （”***“）对成对标签的文本内容进行存
• $(“div”).text() 将所有div值连接成一个字符串
• $(“:text”).text(“新内容”) 设置新值
• $(“img”).attr(“src”) 读取src属性值
• $(“img”).attr(“src”,"赋新值’) 为src属性赋新值
• $(选择器).remove() 删除Dom对象的子与父
• $(选择器).empty() 删除Dom对象的子
• $(选择器).append() 为Dom对象追加子对象

9.JSON相关总结：
如何将集合转换成JSON格式的字符串?
@引入

//集合---JSON
String JSON =JSON.toJsonString(list)
//将String---int
Integer provinceId = Integer.valueOf(pId);

如何将JSON格式的字符串转成json对象：

var JsonStr = {"username":"zhangsan","password","123"}
var jsonobj = JSON.parse(JsonStr)

how复习:徒手撸省市联动

下一站：CRM