Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Ajax方法实例
Blogger Information
Blog 36
fans 0
comment 0
visits 28107
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Ajax方法实例
phpcn_u202398
Original
761 people have browsed it

1、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.     <title>Ajax</title>
  7.     <script src="jquery-3.4.1.js"></script>
  8.     <style>
  10.         .body{
  12.             display: grid;
  13.             gap: 15px;
  14.         }
  15.         .body > .button{
  16.             width: 100px;
  17.             height: 50px;
  18.             font-size: 15px;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <button type="button">load()请求数据</button>
  24.     <button type="button">$.get()</button>
  25.     <button type="button">$.post()</button>
  26.     <button type="button">$.getJSON()请求JSON数据</button>    
  27.     <button type="button">$.get()</button>
  28.     <button type="button">6. $.ajax()-jsonp-跨域请求数据1</button>
  29.     <button type="button">7. $.ajax()-jsonp-跨域请求数据2</button>
  30. </body>
  31. </html>
  32. <script>
  33.     // 1. load(): 加载html片断
  34.     $("button:first-of-type").click(function () {
  35.          $(this).after("<div>").next().load("nav.html");
  36.     });
  38.     //2.get():以get方式从服务器获取数据
  39.     $("button:nth-of-type(2)").click(function (ev) {
  40.     $.get("users.php", { id: 2 }, function (data) {
  41.       $(ev.target).after("<div>").next().html(data);
  42.     });
  43.   });
  44.   //3.post():以post方式从服务器获取数据
  45.   $("button:nth-of-type(3)").click(function (ev) {
  46.     $.post("users.php", { id: 2 }, function (data) {
  47.       $(ev.target).after("<div>").next().html(data);
  48.     });
  49.   });
  50.    // 4. $.getJSON():接口返回的大多是JSON
  51.    $("button:nth-of-type(4)").click(function (ev) {
  53.     $.getJSON("users.php?id=2", function (data) {
  54.       var res = data.id + ": " + data.name + ", " + data.age + "岁";
  55.       $(ev.target).after("<div>").next().html(res);
  56.     });
  57.   });
  58.   // 5. $.ajax(): 终级方法, 实际上大家只需要掌握这一个方法
  59.   $("button:nth-of-type(5)").click(function (ev) {
  60.     $.ajax({
  61.       type: "GET",
  62.       url: "users.php",
  63.       data: { id: 2 },
  64.       dataType: "html",
  65.       success: function (data) {
  66.         $(ev.target).after("<div>").next().html(data);
  67.       },
  68.     });
  69.   });
  70.   // 6. $.ajax()-jsonp-1:跨域请求
  71.   $("button:nth-of-type(6)").click(function (ev) {
  72.     $.ajax({
  73.       type: "GET",
  74.       url: "http://php11.demo/0527/test.php?jsonp=?&id=2",
  75.       dataType: "jsonp",
  76.       success: function (data) {
  77.         cl(data);
  78.         var data = JSON.parse(data);
  79.         cl(data);
  80.         var data =
  81.           "<p>" +
  82.           data.title +
  83.           "</p><p>" +
  84.           data.user.name +
  85.           ", 邮箱:" +
  86.           data.user.email +
  87.           "</p>";
  88.         $(ev.target).after("<div>").next().html(data);
  89.       },
  90.     });
  91.   });
  93.   // 7. $.ajax()-jsonp-2:跨域请求
  94.   $("button:last-of-type").click(function (ev) {
  95.     $.ajax({
  96.       type: "GET",
  97.       url: "http://php11.demo/0527/test.php?jsonp=?&id=2",
  98.       dataType: "jsonp",
  99.       jsonpCallback: "handle",
  100.     });
  101.   });
  103.   function handle(data) {
  104.     cl(data);
  105.     var data = JSON.parse(data);
  106.     cl(data);
  107.     var data =
  108.       "<p>" +
  109.       data.title +
  110.       "</p><p>" +
  111.       data.user.name +
  112.       ", 邮箱:" +
  113.       data.user.email +
  114.       "</p>";
  115.     $("button:last-of-type").after("<div>").next().html(data);
  116.   }
  117. </script>

学习总结

本节课我们学习了Ajax方法，通过本节课的学习学到了Ajax方法，知道通过什么方式进行数据请求。有助于后期的实战应用。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：异步编程对js来说是致命的技术, 一定要掌握
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post