jquery（4）文档数据

鹏重名了
208 阅读5分钟

1. 节点操作

概念： 参数B支持string类型的节点HTML代码，object类型的节点对象和函数返回值：

  • 创建节点：返回一个object类型的DOM节点：
    • $("<p>")：创建一个 <p></p> 节点。
    • $("<p id='p1'>hi</p>")：创建一个 <p id='p1'>hi</p> 节点。
  • 插入节点：
    • A.append(B)：在节点A中追加节点B。
    • A.appendTo(B)：在节点B中追加节点A。
    • A.prepend(B)：在节点A中前插节点B。
    • A.prependTo(B)：在节点B中前插节点A。
    • A.after(B)：在节点A后面插入一个节点B。
    • A.before(B)：在节点A前面插入一个节点B。
    • A.insertAfter(B)：把节点A移动到节点B的后面。
    • A.insertBefore(B)：把节点A移动到节点B的前面。
  • 包裹节点：
    • A.wrap(B)：在每个A的外层分别包裹一层B。
    • A.unwrap(B)：从内向外移除一层包裹。
    • A.wrapAll(B)：在所有A的外层整体包裹一层B。
    • A.wrapInner(B)：在每个A的内层分别包裹一层B。
  • 替换节点：被替换的节点的功能也会随之消失：
    • A.replaceWith(B)：用B替换A。
    • B.replaceAll(A)：用B替换A。
  • 克隆节点：
    • 元素.clone(false)：默认，表示不带事件克隆节点。
    • 元素.clone(true)：带事件克隆节点。
  • 删除节点：
    • 元素.remove()：删除元素，返回被删除的JQ对象，且不保留事件。
    • 元素.remove(selector)：根据CSS3选择器指定 remove 哪些元素。
    • 元素.detach()：删除元素，返回被删除的JQ对象，但保留事件。
    • 元素.empty()：清空元素中的所有子元素和内容，但自己保留。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<section class="wrap-sec">wrap-sec</section>
<section class="wrap-sec">wrap-sec</section>
<section class="wrap-sec">wrap-sec</section>

<ul id="user-ul">
    <li>广坤</li>
</ul>

<ul id="emp-ul">
    <li>广坤</li>
    <li>刘能</li>
    <li>赵四</li>
    <li>大脚</li>
</ul>

<div id="first-div">first-div</div>
<div id="second-div">second-div</div>

<hr/>
<button id="create-node-btn" type="button">创建节点</button>
<br/>
<button id="clone-false-btn" type="button">F克隆</button>
<br/>
<button id="clone-true-btn" type="button">T克隆</button>
<br/>
<button id="append-btn" type="button">将赵四追加到列表中</button>
<br/>
<button id="prepend-btn" type="button">将大脚前插到列表中</button>
<br/>
<button id="wrap-btn" type="button">在每个.wrap-sec外都分别包裹加粗倾斜和下划线</button>
<br/>
<button id="unwrap-btn" type="button">拆掉每个.wrap-sec外层的加粗倾斜和下划线</button>
<br/>
<button id="wrap-all-btn" type="button">在所有.wrap-sec的外层包裹加粗倾斜和下划线</button>
<br/>
<button id="wrap-inner-btn" type="button">在所有.wrap-sec的内层包裹加粗倾斜和下划线</button>
<br/>
<button id="replace-btn" type="button">将有序列表中的项目替换成新的</button>
<br/>
<button id="remove-btn" type="button">删除first-div且不保留事件</button>
<br/>
<button id="detach-btn" type="button">删除second-div但保留事件</button>
<br/>
<button id="empty-btn" type="button">清空emp-ul中的所有子元素</button>
<br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        let userUl = $("#user-ul");
        let empUl = $("#emp-ul");
        let wrapSecs = $(".wrap-sec");
        let firstDiv = $("#first-div");
        let secondDiv = $("#second-div");
        firstDiv.click(() => console.log("first div..."));
        secondDiv.click(() => console.log("second div..."));

        $("#create-node-btn").click(() => {
            let p1 = $(`<p id="new-p-1">新节点</p>`);
            console.log(p1);

            let p2 = $(`<p>`);
            p2.attr("id", "new-p-2");
            console.log(p2);
        });

        $("#clone-false-btn").click(ev => {
            ev = ev || event;
            let oldBtn = $(ev.target);
            let newBtn = oldBtn.clone();
            oldBtn.after(newBtn);
        });

        $("#clone-true-btn").click(ev => {
            ev = ev || event;
            let oldBtn = $(ev.target);
            let newBtn = oldBtn.clone(true);
            oldBtn.after(newBtn);
        });

        $("#append-btn").click(() => {
            userUl.append(`<li>赵四1</li>`);
            userUl.append($(`<li>赵四2</li>`));
            userUl.append((i, v) => `<li>赵四3</li>`);
            $(`<li>赵四4</li>`).appendTo(userUl);
        });

        $("#prepend-btn").click(() => {
            userUl.prepend(`<li>大脚1</li>`);
            userUl.prepend($(`<li>大脚2</li>`));
            userUl.prepend((i, v) => `<li>大脚3</li>`);
            $(`<li>大脚4</li>`).prependTo(userUl);
        });

        $("#wrap-btn").click(() => {
            wrapSecs.wrap("<em>");
            wrapSecs.wrap($("<strong>"));
            wrapSecs.wrap((i, v) => `<ins>`);
        });

        $("#unwrap-btn").click(() => wrapSecs.unwrap().unwrap().unwrap());

        $("#wrap-all-btn").click(() => {
            wrapSecs.wrapAll("<em>");
            wrapSecs.wrapAll($("<strong>"));
            wrapSecs.wrapAll((i, v) => `<ins>`);
        });

        $("#wrap-inner-btn").click(() => {
            wrapSecs.wrapInner("<em>");
            wrapSecs.wrapInner($("<strong>"));
            wrapSecs.wrapInner((i, v) => `<ins>`);
        });

        $("#replace-btn").click(() => {
            let guangkunLi = empUl.children().eq(0);
            let liunengLi = empUl.children().eq(1);
            let zhaosiLi = empUl.children().eq(2);
            let dajiaoLi = empUl.children().eq(3);

            guangkunLi.replaceWith(`<li>广坤1</li>`);
            liunengLi.replaceWith($(`<li>刘能1</li>`));
            zhaosiLi.replaceWith((i, v) => `<li>赵四1</li>`);
            $(`<li>大脚1</li>`).replaceAll(dajiaoLi);
        });

        $("#remove-btn").click(() => {
            let removedObj = firstDiv.remove();
            $("body").prepend(removedObj);
        });

        $("#detach-btn").click(() => {
            let detachObj = secondDiv.detach();
            $("body").prepend(detachObj);
        });

        $("#empty-btn").click(() => empUl.empty());
    });
</script>

</body>
</html>

2. 元素.load()

概念： 元素.load(url, [data], [callback])：载入远程数据到元素中：

  • param1：URL地址，GET请求使用查询串传递数据。
  • param2：POST请求使用JSON格式的data参数传递数据，可选。
  • param3：载入成功时的回调函数，可选，回调函数参数如下：
    • param1：服务端响应的数据。
    • param2：服务端响应的状态信息，有 success 和 fail 两种值。
    • param3：服务器返回的所有属性的集合。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="load-by-get-btn" type="button">将load-data.html以GET方式远程加载到本页面</button>
<br/>
<button id="load-by-post-btn" type="button">将load-data.html以POST方式远程加载到本页面</button>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        $("#load-by-get-btn").click(() => {
            let url = "load-data.html?name=joe";
            $("body").load(url, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            });
        });

        $("#load-by-post-btn").click(() => {
            let url = "load-data.html";
            let data = {"name": "joe"};
            $("body").load(url, data, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            });
        });
    });
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>load-test</h1>
</body>
</html>

3. $.get()

概念： $.get(url, [callback], [type])：通过远程HTTP的GET请求载入数据：

  • param1：URL地址，GET请求使用查询串传递数据。
  • param2：载入成功时的回调函数，可选，回调函数参数如下：
    • param1：服务端响应的数据。
    • param2：服务端响应的状态信息，有 success 和 fail 两种值。
    • param3：服务器返回的所有属性的集合。
  • param3：将响应数据强制处理成 type 指定的数据格式，若不指定则自动分析：
    • 可选值：html，text，xml，script，json。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="get-html-btn" type="button">加载get-data.html</button>
<br/>
<button id="get-txt-btn" type="button">加载get-data.txt</button>
<br/>
<button id="get-xml-btn" type="button">加载get-data.xml</button>
<br/>
<button id="get-js-btn" type="button">加载get-data.js</button>
<br/>
<button id="get-json-btn" type="button">加载get-data.json</button>
<br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        $("#get-html-btn").click(() => {
            $.get("get-data.html?name=joe", (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            }, "html");
        });

        $("#get-txt-btn").click(() => {
            $.get("get-data.txt?name=joe", (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            }, "text");
        });

        $("#get-xml-btn").click(() => {
            $.get("get-data.xml?name=joe", (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("url-text:", $(response).find("root").find("url").text());
                    console.log("xhr:", xhr);
                }
            }, "xml");
        });

        $("#get-js-btn").click(() => {
            // 也可以使用 $.getScript(url, [callback]) 替代
            $.get("get-data.js?name=joe", (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                    myFunction();
                }
            }, "script");
        });

        $("#get-json-btn").click(() => {
            $.get("get-data.json?name=joe", (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("username:", response["username"]);
                    console.log("password:", response["password"]);
                    console.log("xhr:", xhr);
                }
            }, "json");
        });

    });
</script>

</body>
</html>

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>get-test</h1>
</body>
</html>

文本：

get-data.txt中的纯文本数据...

配置：

<root>
    <url>get-data.xml中的XML数据...</url>
</root>

脚本：

function myFunction(){
    console.log("get-data.js中的myFunction函数...");
}

数据：

{
  "username": "admin",
  "password": "123"
}

4. $.post()

概念： $.post(url, [data], [callback], [type])：通过远程HTTP的POST请求载入数据：

  • param1：URL地址。
  • param2：POST请求使用JSON格式的data参数传递数据，可选。
  • param3：载入成功时的回调函数，可选，回调函数参数如下：
    • param1：服务端响应的数据。
    • param2：服务端响应的状态信息，有 success 和 fail 两种值。
    • param3：服务器返回的所有属性的集合。
  • param4：将响应数据强制处理成 type 指定的数据格式，若不指定则自动分析：
    • 可选值：html，text，xml，script，json。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="post-html-btn" type="button">加载post-data.html</button>
<br/>
<button id="post-txt-btn" type="button">加载post-data.txt</button>
<br/>
<button id="post-xml-btn" type="button">加载post-data.xml</button>
<br/>
<button id="post-js-btn" type="button">加载post-data.js</button>
<br/>
<button id="post-json-btn" type="button">加载post-data.json</button>
<br/>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        $("#post-html-btn").click(() => {
            $.post("post-data.html", {"name": "joe"}, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            }, "html");
        });

        $("#post-txt-btn").click(() => {
            $.post("post-data.txt", {"name": "joe"}, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            }, "text");
        });

        $("#post-xml-btn").click(() => {
            $.post("post-data.xml", {"name": "joe"}, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("url-text:", $(response).find("root").find("url").text());
                    console.log("xhr:", xhr);
                }
            }, "xml");
        });

        $("#post-js-btn").click(() => {
            // 也可以使用 $.getScript(url, [callback]) 替代
            $.post("post-data.js", {"name": "joe"}, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                    myFunction();
                }
            }, "script");
        });

        $("#post-json-btn").click(() => {
            $.post("post-data.json", {"name": "joe"}, (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("username:", response["username"]);
                    console.log("password:", response["password"]);
                    console.log("xhr:", xhr);
                }
            }, "json");
        });

    });
</script>

</body>
</html>

案例：ajax账号测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<label><input id="username-ipt"/></label>
<span id="username-msg"></span>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {
        let usernameIpt = $("#username-ipt");
        let usernameMsg = $("#username-msg");

        usernameIpt.blur(() => {
            $.get("user.json", response => {
                let isUsed = false;
                $.each(response["users"], (i, v) => {
                    if (v === usernameIpt.val()) {
                        isUsed = true;
                        return false;
                    }
                });
                if (isUsed) {
                    usernameMsg.text("帐号已经存在！").css("color", "red");
                } else {
                    usernameMsg.text("帐号可以使用！").css("color", "green");
                }
            }, "json");
        });
    });
</script>


</body>
</html>

{
  "users": [
    "admin",
    "admin1",
    "admin2"
  ]
}

5. $.ajax()

概念： $.ajax() 是JQ对原生AJAX的封装，可以替代高层实现如 $.get()，$.post() 等，它只有一个JSON参数，缺省无效：

  • url：目标URL地址，默认为当前页地址。
  • type：请求方式POST或GET，默认为GET方式。
  • data：请求中的数据，以查询串的方式传递，JSON格式数据也会在发送时会被转成查询串格式：
    • 若请求数据中存在数组结构，则必须额外配置 traditional: true，否则后台接不到值。
  • success/error：载入成功/失败时的回调函数，可选，回调函数参数如下：
    • param1：服务端响应的数据。
    • param2：服务端响应的状态信息，有 success 和 fail 两种值。
    • param3：服务器返回的所有属性的集合。
  • dataType：将响应数据强制处理成 type 指定的数据格式，若不指定则自动分析：
    • 可选值：html，text，xml，script，json。
  • async：是否异步请求，boolean类型，默认为true，表示异步。
  • global:是否允许触发环绕事件，默认为true，表示允许。

停止AJAX，$.ajax() 返回的是其创建的XMLHttpRequest对象，如果对 $ajax() 的返回值对象调用 abort()，可以阻止这次ajax请求。

更多ajax参数自行百度。

ajax参数

    $(() => {
        $.ajax({
       			 //地址
            "url": "ajax-data.json",
            	//传值方式
            "type": "post",
            	//数据
            "data": {"name": "joe"},
               //格式
            "dataType": "json",
            //异步请求
            "async": "true",
            //回调函数
            "success": (response, isSuccess, xhr) => {
                if ("success" === isSuccess) {
                    console.log("response:", response);
                    console.log("xhr:", xhr);
                }
            }
        });
    });

需求:点击按钮获取JSON中的全部数据并展示在html表格中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">

    /* 需求：点击按钮获取JSON中的全部数据并展示在html表格中。
     1. JSON文件自己编写，需要 `name`，`age` 和 `gender`。
     2. 点击按钮，出现一个表格，表格中循环展示JSON中的数据，且按钮只触发一次事件。
     3. 表格必须居中，有外边框，宽度 `500px`。
     4. 完全使用JQ编写程序，不允许使用HTML和CSS代码。
     */
    $(() => {
        let body = $("body");
        let btn = $(`<button></button>`)
            .attr("type", "button")
            .text("获取数据")
            .appendTo(body);

        let table = $(`<table></table>`).css({
            "margin": "0 auto",
            "border": "1px solid red",
            "width": "500px",
            "text-align": "center"
        }).appendTo(body);

        let tbody = $(`<tbody></tbody>`)
            .append(`<tr><th>name</th><th>age</th><th>gender</th></tr>`)
            .appendTo(table);

        btn.one("click", () => {
            $.ajax({
                url: "ajax-data.json",
                type: "post",
                dataType: "json",
                success: response => {
                    let tr;
                    $.each(response, (i, v) => {
                        tr = $(`<tr>`).appendTo(tbody);
                        tr.append(`<td>${v["name"]}</td>`);
                        tr.append(`<td>${v["age"]}</td>`);
                        tr.append(`<td>${v["gender"]}</td>`);
                    });
                }
            });
        });
    });
</script>
</body>
</html>

[
  {"name": "赵四", "age": 25, "gender": "男"},
  {"name": "刘能", "age": 26, "gender": "男"},
  {"name": "大脚", "age": 27, "gender": "女"}
]

5.1 阻止AJAX

概念： $.ajax() 返回的是其创建的XMLHttpRequest对象，如果对 $ajax() 的返回值对象调用 abort()，可以阻止这次ajax请求。

布局：

    $(() => {
        $.ajax({success: () => console.log("ajax a...")});
        $.ajax({success: () => console.log("ajax b...")}).abort();
        $.ajax({success: () => console.log("ajax c...")});
        $.ajax({success: () => console.log("ajax d...")}).abort();
    });

5.2 表单序列化

概念：

  • 表单.serialize()：将表单转换成可序列化对象：查询串。
  • 表单.serializeArray()：将表单转换成可序列化对象：JSON数组。 布局：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="login-form">
    <label><input name="username" value="joe"/></label>
    <label><input name="password" value="123"/></label>
</form>
<hr/>
<button id="query-string-btn" type="button">序列化成查询串</button>
<br/>
<button id="json-array-btn" type="button">序列化成JSON数组</button>


<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        let loginForm = $("#login-form");

        $("#query-string-btn").click(() => {
            console.log(loginForm.serialize());
        });

        $("#json-array-btn").click(() => {
            console.log(loginForm.serializeArray());
        });
    });
</script>
</body>
</html>

5.3 AJAX环绕事件

概念： AJAX请求可以触发以下环绕事件，建议全部书写在 $.ajax() 之上：

  • $(document).ajaxStart(() => {})：全部AJAX请求开始前触发，只执行一次。
  • $(document).ajaxSend(() => {})：每个AJAX请求发送前均会触发。
  • $(document).ajaxSuccess(() => {})：每个AJAX请求成功时均会触发。
  • $(document).ajaxError(() => {})：每个AJAX请求错误时均会触发。
  • $(document).ajaxComplete(() => {})：每个AJAX请求完成时均会触发。
  • $(document).ajaxStop(() => {})：全部AJAX请求结束时触发，只执行一次。
  • $.ajaxSetup(options)：设置全局AJAX默认选项，对页面上所有AJAX的重复JSON参数对进行抽取，允许同时设置多个，被触发时依次执行。

AJAX环绕事件执行顺序是：“开始，发送前，运行回调函数，成功，完成，结束” 或 “开始，发送前，错误，完成，结束”。

布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        $.ajaxSetup({
            "url": "ajax-data.json",
            "type": "get",
        });

        $.ajaxSetup({
            "dataType": "json",
        });

        $(document).ajaxStart(() => console.log("全部AJAX请求开始前-1..."));
        $(document).ajaxStart(() => console.log("全部AJAX请求开始前-2..."));
        $(document).ajaxSend(() => console.log("AJAX请求发送之前..."));
        $(document).ajaxSuccess(() => console.log("AJAX请求发送成功时..."));
        $(document).ajaxComplete(() => console.log("AJAX请求发送完成时..."));
        $(document).ajaxStop(() => console.log("全部AJAX发送结束..."));

        $.ajax({"global": true, "success": () => console.log("ajax-a发送中...")});
        $.ajax({"global": true, "success": () => console.log("ajax-b发送中...")});
        $.ajax({"global": true, "success": () => console.log("ajax-c发送中...")});
    });
</script>

</body>
</html>

[
  {"name": "赵四", "age": 25, "gender": "男"},
  {"name": "刘能", "age": 26, "gender": "男"},
  {"name": "大脚", "age": 27, "gender": "女"}
]

5.4 AJAX上传文件

概念： $.ajax() 可以完成文件上传的工作，流程如下：

  1. AJAX请求方式必须为 post。
  2. AJAX请求的数据必须是包含文件控件的表单对应的 FormData 对象，以保证让后台接收到正确的File流：
    • new FormData(表单)：构造器参数要求必须是原生对象。
  3. 将AJAX参数 processData 更改为 false，以保证 data 不会被JQ处理成一个查询串。
  4. 将AJAX参数 contentType 更改为 false，规避默认提交类型。
  5. 将AJAX参数 dataType 更改为 json，以保证数据响应类型为JSON格式。
  6. 在真正上传文件之前，可以对上传的图片进行实时预览：
    • fileIpt.on("change", () => {})：在文件控件内容改变时触发。
    • 利用 ev.target.files || ev.dataTransfer.files 得到上传的文件对象列表。
    • 利用文件的 size 属性对上传的文件大小进行限制。
    • 利用文件的 type 属性对上传的文件类型进行限制。
    • let reader = new FileReader()：获取文件阅读器对象。
    • reader.onload(() => {})：文件阅读器装载文件时触发。
    • reader.result：获取阅读器地址信息，可用于替换原图 src 属性。
    • reader.readAsDataURL(file[0])：装载文件，参数为文件的JS原生对象。 布局：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #img-preview {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<form id="login-form">
    <label>
        <input id="file-ipt" type="file" name="srcFile"/>
    </label>
    <hr/>
    <img id="img-preview" src="../../z-image/ylt.png" alt=""/>
    <hr/>
    <button id="upload-btn" type="button">上传</button>
</form>

<script type="text/javascript" src="../../script/jquery-3.2.1.js"></script>
<script type="text/javascript">
    $(() => {

        $("#upload-btn").click(() => {
            $.ajax({
                "url": "ajax-data.json",
                "type": "post",
                "data": new FormData($("#login-form")[0]),
                "processData": false,
                "contentType": false,
                "dataType": "json",
                success: () => console.log("upload ok...")
            });
        });

        let fileIpt = $("#file-ipt");

        fileIpt.on("change", ev => {
            ev = ev || event;
            let file = ev.target.files || ev.dataTransfer.files;
            if (!file) return;
            if (file[0].size > 1024 * 1024 * 10) {
                alert("文件太大，不能超过10M！");
                fileIpt.val("");
                return;
            }
            if (file[0].type !== "image/jpeg") {
                alert("文件类型不对，必须是JPG格式！");
                fileIpt.val("");
                return;
            }
            let reader = new FileReader();
            reader.onload = (ev) => {
                ev = ev || event;
                $("#img-preview").attr("src", ev.target.result);
                console.log(ev.target.result);
            };
            reader.readAsDataURL(file[0]);

        });
    });
</script>

</body>
</html>

[
  {"name": "赵四", "age": 25, "gender": "男"},
  {"name": "刘能", "age": 26, "gender": "男"},
  {"name": "大脚", "age": 27, "gender": "女"}
]
avatar
文章
阅读
粉丝