登录  /  注册
博主信息
博文 145
粉丝 7
评论 7
访问量 157755
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JQuery关于Ajax的使用和无刷新分页案例
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
原创
911人浏览过

代码练习

1.关于ajax相关代码练习
1.1、登陆表单验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <script src="../JQuery3.5.1.js"></script>
  7. <title>登陆表单前端验证</title>
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. }
  13. h2 {
  14. /* display: block; */
  15. width: 350px;
  16. margin: 0 auto;
  17. text-align: center;
  18. padding-top: 10px;
  19. box-sizing: border-box;
  20. }
  21. form {
  22. margin: 10px auto;
  23. width: 350px;
  24. height: 250px;
  25. background-color: #5384e8;
  26. display: flex;
  27. flex-flow: column nowrap;
  28. justify-content: space-evenly;
  29. align-content: center;
  30. align-items: center;
  31. font-size: 1.2rem;
  32. }
  33. form:hover {
  34. box-shadow: 0 0 5px #626262;
  35. }
  36. form > .button {
  37. width: 280px;
  38. display: flex;
  39. justify-content: space-evenly;
  40. }
  41. form > .button > input {
  42. width: 100px;
  43. height: 30px;
  44. background-color: #00bb00;
  45. border: none;
  46. border-radius: 15px;
  47. }
  48. form > .button > input:hover {
  49. background-color: red;
  50. color: white;
  51. }
  52. a {
  53. color: white;
  54. text-decoration: none;
  55. }
  56. </style>
  57. </head>
  58. <body>
  59. <h2 data-index="one">用户注册</h2>
  60. <form method="POST" onsubmit="return false">
  61. <div class="account">
  62. <label for="username">账户:</label>
  63. <input
  64. type="email"
  65. required
  66. name="username"
  67. id="username"
  68. placeholder="example@163.com"
  69. autofocus="autofocus"
  70. />
  71. </div>
  72. <div class="pwd">
  73. <label for="p2">密码:</label>
  74. <input
  75. type="password"
  76. required
  77. name="p2"
  78. id="p2"
  79. placeholder="不少于六位"
  80. />
  81. </div>
  82. <div class="button">
  83. <input type="submit" value="登陆" />
  84. <input type="reset" value="重置" />
  85. </div>
  86. <div>
  87. <a href="regist.php">没有账号,点击此处注册!</a>
  88. </div>
  89. </form>
  90. </body>
  91. <script>
  92. var cl = console.log.bind(console);
  93. // var btu = $('input[type="submit"]');
  94. //禁用表单的默认提交事件;
  95. // $("form").submit(function (ev) {
  96. // ev.preventDefault();
  97. // });
  98. $('input[type="email"]').blur(function () {
  99. var tips = "";
  100. var color = "";
  101. // cl(this);
  102. if ($(this).val().length === 0) {
  103. tips = "用户名不能为空";
  104. color = "red";
  105. }
  106. if (tips.length != 0) {
  107. $(this)
  108. .parent()
  109. .after(
  110. "<span style=' font-size:8px;color:" +
  111. color +
  112. "''>" +
  113. tips +
  114. "</span>"
  115. );
  116. }
  117. });
  118. $("input[type='email']").focus(function () {
  119. cl();
  120. if ($(this).parent().next().get(0).tagName === "SPAN")
  121. $(this).parent().next().get(0).remove();
  122. });
  123. $('input[type="password"]').blur(function () {
  124. var tips = "";
  125. var color = "";
  126. // cl(this);
  127. if ($(this).val().length === 0) {
  128. tips = "密码不能为空";
  129. color = "red";
  130. } else if ($(this).val().length <= 6) {
  131. cl(tips);
  132. tips = "密码不能少于6位";
  133. color = "red";
  134. } else {
  135. tips = "";
  136. }
  137. if (tips.length != 0) {
  138. $(this)
  139. .parent()
  140. .after(
  141. "<span style=' font-size:8px;color:" +
  142. color +
  143. "''>" +
  144. tips +
  145. "</span>"
  146. );
  147. }
  148. });
  149. $("input[type='password']").focus(function () {
  150. cl();
  151. if ($(this).parent().next().get(0).tagName === "SPAN")
  152. $(this).parent().next().get(0).remove();
  153. });
  154. </script>
  155. </html>

代码运行结果:

1.2、JQuery有关Ajax的代码练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <script src="../JQuery3.5.1.js"></script>
  7. <title>Document</title>
  8. <style>
  9. .Ajax {
  10. display: flex;
  11. flex-flow: column nowrap;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2>Ajax</h2>
  17. <div class="Ajax">
  18. <button>load()请求数据</button>
  19. <button>$.get()请求数据</button>
  20. <button>$.post()请求数据</button>
  21. <button>$.getJSON请求数据</button>
  22. </div>
  23. </body>
  24. <script>
  25. var cl = console.log.bind(console);
  26. //load()导入html片段
  27. $("button")
  28. .first()
  29. .click(function (ev) {
  30. // cl(this);//当前触发事件的对象,等同于ev.target
  31. // cl(ev.target);//当前触发事件的对象,等同于this
  32. // cl(ev.currentTarget);//当前绑定事件的对象DIV
  33. ev.preventDefault(); //ev当前点击的行为
  34. if ($(this).next().get(0).tagName != "DIV")
  35. $(this).after("<div>").next().load("docment.html");
  36. });
  37. cl($("button").eq(1).text()); //eq(index)index是从零开始的
  38. //$.get()请求
  39. $("button")
  40. .eq(1)
  41. .click(function (ev) {
  42. ev.preventDefault();
  43. // cl(this);
  44. var that = this;
  45. $.get("data.php", "id=3", function (data) {
  46. // cl(data);
  47. $(that).after('<span style="color:red">' + data + "<span>");
  48. });
  49. });
  50. //$.post()请求
  51. $("button")
  52. .eq(2)
  53. .click(function (ev) {
  54. ev.preventDefault();
  55. // cl(this);
  56. var that = this;
  57. $.post("data.php", "id=3", function (data) {
  58. // cl(data);
  59. $(that).after('<span style="color:red">' + data + "<span>");
  60. });
  61. });
  62. //$.getJSON()请求
  63. $("button")
  64. .last()
  65. .click(function (ev) {
  66. ev.preventDefault();
  67. var that = this;
  68. $.getJSON("data.php", "{id:3}", function (data) {
  69. // var data = JSON.parse(data);
  70. // return "你好!";
  71. //要求返回的数据必须时JSON格式
  72. cl(data);
  73. $(that).after('<span style="color:red">' + data.name + "<span>");
  74. });
  75. });
  76. </script>
  77. </html>

代码运行效果图

1.3 demo2代码练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. <script src="../JQuery3.5.1.js"></script>
  8. <style>
  9. .Ajax {
  10. display: flex;
  11. flex-flow: column nowrap;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h2>Ajax</h2>
  17. <div class="Ajax">
  18. <button>$.Ajax()请求数据</button>
  19. <button>$.Ajax()-JSONP跨域请求1数据</button>
  20. <button>$.Ajax()—JSONP跨域请求2数据</button>
  21. </div>
  22. </body>
  23. <script>
  24. var cl = console.log.bind(console);
  25. var first = $("button:first-child");
  26. // cl(first);
  27. //$.ajax()=XMLHttpRequest请求函数
  28. first.click(function (ev) {
  29. ev.preventDefault();
  30. var that = this;
  31. $.ajax({
  32. type: "GET",
  33. url: "docment.html",
  34. dataType: "html",
  35. success: function (data) {
  36. // cl(data);
  37. cl(that);
  38. $(that).after(data);
  39. },
  40. });
  41. });
  42. //$.ajax()跨域请求
  43. $("button:nth-child(2)").click(function (ev) {
  44. ev.preventDefault();
  45. // var that = this;
  46. $.ajax({
  47. type: "GET",
  48. url: "http://php.edu/cors/demo1.php?jsonp=?&word=hello",
  49. // data: "id=1",
  50. dataType: "jsonp",
  51. jsonpCallback: "index",
  52. });
  53. });
  54. var hello = "hello,China!";
  55. function index(data) {
  56. // cl(data);
  57. // cl(that);
  58. $("button:nth-child(2)").after("<span>" + data + "</span>");
  59. }
  60. $("button:last-child").click(function (ev) {
  61. ev.preventDefault();
  62. var that = this;
  63. $.ajax({
  64. type: "GET",
  65. url: "http://php.edu/cors/demo1.php?jsonp=?&word=hello",
  66. // data: "id=1",
  67. dataType: "jsonp",
  68. success: function (data) {
  69. cl(data);
  70. $(that).after(data);
  71. },
  72. });
  73. });
  74. </script>
  75. </html>

运行代码效果图

2 无刷新分页代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>员工信息表</title>
  7. <script src="../JQuery3.5.1.js"></script>
  8. <style>
  9. body > div {
  10. width: 700px;
  11. margin: 0 auto;
  12. outline: 1px solid red;
  13. display: flex;
  14. flex-flow: column nowrap;
  15. align-items: center;
  16. }
  17. p {
  18. height: 25px;
  19. display: flex;
  20. justify-content: flex-start;
  21. align-items: center;
  22. }
  23. p a {
  24. text-decoration: none;
  25. width: 38px;
  26. text-align: center;
  27. margin: 0 3px;
  28. }
  29. .active {
  30. background-color: tomato;
  31. color: white;
  32. }
  33. p a:hover {
  34. cursor: pointer;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div>
  40. <table border="1" cellspacing="0" cellpadding="10">
  41. <caption style="font-size: 28px;">
  42. 员工信息表
  43. </caption>
  44. <thead>
  45. <tr>
  46. <th>ID</th>
  47. <th>姓名</th>
  48. <th>年龄</th>
  49. <th>性别</th>
  50. <th>职位</th>
  51. <th>电话</th>
  52. <th>入职时间</th>
  53. </tr>
  54. </thead>
  55. <tbody></tbody>
  56. </table>
  57. <p></p>
  58. </div>
  59. </body>
  60. <script>
  61. var cl = console.log.bind(console);
  62. //页面生成函数
  63. var page = 1;
  64. get(page);
  65. // 点击页面生成新的页面内容下;
  66. $("p").click(function (ev) {
  67. // cl(ev.target);
  68. page = $(ev.target).data("index");
  69. $("tbody").html("");
  70. $("p").html("");
  71. get(page);
  72. });
  73. function get(page) {
  74. $.ajax({
  75. type: "GET",
  76. url: "http://php.edu/pages/contect.php",
  77. data: { p: page },
  78. dataType: "jsonp",
  79. jsonpCallback: "view",
  80. });
  81. }
  82. function view(data) {
  83. // cl(data);
  84. // cl(data.pages);
  85. //生产页码
  86. for (var i = 1; i <= data.pages; i++) {
  87. if (i === page) {
  88. $("p").append(
  89. "<a class='active' data-index='" + i + "'>" + i + "</a>"
  90. );
  91. } else {
  92. $("p").append("<a data-index='" + i + "'>" + i + "</a>");
  93. }
  94. }
  95. //生成员工信息表
  96. var staffs = data.data;
  97. // cl(staffs);
  98. var res = "";
  99. staffs.forEach(function (item) {
  100. staff =
  101. "<tr><td>" +
  102. item.id +
  103. "</td><td>" +
  104. item.name +
  105. "</td><td>" +
  106. item.age +
  107. "</td><td>" +
  108. item.sex +
  109. "</td><td>" +
  110. item.position +
  111. "</td><td>" +
  112. item.mobile +
  113. "</td><td>" +
  114. item.hiredate +
  115. "</td></tr>";
  116. // cl(staff);
  117. res += staff;
  118. });
  119. // cl(res);
  120. // cl($("tbody"));
  121. $($("tbody")[0]).html(res);
  122. }
  123. </script>
  124. </html>

运行结果图

总结:

1.JQuery对于事件有关的函数:

  1. .submit(function(ev){});提交事件函数
  2. .blur(function(){});失去焦点事件函数
  3. .focus(function(){});获取焦点函数
  4. .keydown()|keyup();键盘按键函数

2.$.Ajax()相关事件函数:

  1. $.load();加载html片段;
  2. $.get(url,data,function(repesondata){});get请求数据
  3. $.post(url,data,function(repesondata){});post请求函数
  4. $.Ajax({type: "GET",url: url,data: data,dataType: "json",success: callback,});通过请求函数

3.跨域请求函数:
$.Ajax({type: "GET",url: url,data: data,dataType: "jsonp",jsonpCallback:函数名,});跨域请求函数

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:作业中推荐写一些没有讲到的方法, 这些都在手册中, 不能只会用学过的
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学