<!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();}// 将信息添加到输入框后面// 判断当前是否存在spanif ($(this).next().get(0).tagName !== "SPAN") {$("<span>").html(tips).css("color", "red").insertAfter($(this));}// 键盘按下删除spanuser.keydown(function () {$(this).next("span").remove();});});</script>
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
