jQuery 事件与 Ajax
1. 事件
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件</title> <script src="jquery-3.5.1.js"></script> <style> form { width: 200px; display: grid; gap: 10px; } </style> </head> <body> <p>User Login:</p> <form> <input type="text" placeholder="UserName" autofocus /> <input type="password" placeholder="Password" /> <button>Submit</button> </form> </body></html><script> // 目标：监听邮箱输入框 当输入框失去焦点时验证值是否存在 给出提示 // 先禁用掉提交 $("form").submit(function (ev) { ev.preventDefault(); }); // 拿到输入框 var user = $("input[type=text]"); // 失去焦点事件 user.blur(function () { var tips = ""; // 用户名列表 var users = ["php", "admin"]; // 非空验证 if ($(this).val().length === 0) { tips = "用户名不能为空"; $(this).focus(); } else if (users.indexOf($(this).val()) === -1) { tips = "用户名不存在"; $(this).focus(); } else { tips = "验证通过"; $("input[type=password]").focus(); } // 将信息添加到输入框后面 // 判断当前是否存在span if ($(this).next().get(0).tagName !== "SPAN") { $("<span>").html(tips).css("color", "red").insertAfter($(this)); } // 键盘按下删除span user.keydown(function () { $(this).next("span").remove(); }); });</script>
2. ajax
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="jquery-3.5.1.js"></script> <title>Ajax</title> <style> body { display: grid; gap: 15px; } button { text-align: left; height: 26px; } button:hover { background-color: #ddd; cursor: pointer; } </style> </head> <body> <button type="button">1. load()请求数据</button> <button type="button">2. $.get()请求数据</button> <button type="button">3. $.post()请求数据</button> <button type="button">4. $.getJSON()请求JSON数据</button> <button type="button">5. $.ajax()请求数据</button> <button type="button">6. $.ajax()-jsonp-跨域请求数据1</button> <button type="button">7. $.ajax()-jsonp-跨域请求数据2</button> </body></html><script> var cl = console.log.bind(console); // 1.load() 加载html片段 $("button:first-of-type").click(function () { $(this).after("<div>").next().load("nav.html"); }); // 2.$.get() $("button:nth-of-type(2)").click(function (ev) { $.get("users.php", { id: 2 }, function (data) { $(ev.target).after("<div>").next().html(data); }); }); // 3.$.post() $("button:nth-of-type(3)").click(function (ev) { $.post("users.php", { id: 2 }, function (data) { $(ev.target).after("<div>").next().html(data); }); }); // 4.$.getJSON() 请求json数据 接口返回的大多是json $("button:nth-of-type(4)").click(function (ev) { $.getJSON("users.php?id=2", function (data) { // 返回的就是js对象 不用转换 cl(data); }); }); // 5.$.ajax // $.ajax({ // // 请求类型 // type: "GET", // // 请求的URL // url: url, // // 发送的数据 // data: data, // // 期望服务器返回/响应的数据类型 // dataType: "json", // // 成功时的回调函数 // success: callback, // }); $("button:nth-of-type(5)").click(function (ev) { $.ajax({ type: "get", url: "users.php?id=2", success: function (data) { $(ev.target).after("<div>").next().html(data); }, }); }); // 6. $.ajax()-jsonp-1:跨域请求 $("button:nth-of-type(6)").click(function (ev) { $.ajax({ type: "GET", url: "http://php.edu/0522/test2.php?jsonp=?&id=1", dataType: "jsonp", success: function (data) { cl(data); var data = JSON.parse(data); cl(data); var data = "<p>" + data.title + "</p><p>" + data.user.name + ", 邮箱:" + data.user.email + "</p>"; $(ev.target).after("<div>").next().html(data); }, }); }); // 7. $.ajax()-jsonp-2:跨域请求 $("button:last-of-type").click(function (ev) { $.ajax({ type: "GET", url: "http://php.edu/0522/test2.php?jsonp=?&id=2", dataType: "jsonp", jsonpCallback: "handle", }); }); function handle(data) { cl(data); var data = JSON.parse(data); cl(data); var data = "<p>" + data.title + "</p><p>" + data.user.name + ", 邮箱:" + data.user.email + "</p>"; $("button:last-of-type").after("<div>").next().html(data); }</script>
