发表于: 2020-03-13 23:42:42

1 1747


今天完成的事情:今天学习了jQ的AJAX的部分
明天计划的事情:继续后续AngularJS部分的学习
遇到的问题:实际操作不够还是需要更多的练习
收获:AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

例如

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("/gzd/demo_test.txt");
      });
    });
  </script>
</head>

<body>

  <div id="div1">
    <h2>使用 jQuery AJAX 修改文本内容</h2>
  </div>
  <button>获取外部内容</button>

</body>

</html>

运行结果

点击

也可以把 jQuery 选择器添加到 URL 参数

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("/try/ajax/demo_test.txt #p1");
      });
    });
  </script>
</head>

<body>

  <div id="div1">
    <h2>使用 jQuery AJAX 修改文本</h2>
  </div>
  <button>获取外部文本</button>

</body>

</html>

运行结果

点击

 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素里面

加上提示框

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $("#div1").load("/try/ajax/demo_test.txt"function (responseTxtstatusTxtxhr) {
          if (statusTxt == "success")
            alert("外部内容加载成功!");
          if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
        });
      });
    });
  </script>
</head>

<body>

  <div id="div1">
    <h2>使用 jQuery AJAX 修改该文本</h2>
  </div>
  <button>获取外部内容</button>

</body>

</html>

运行结果

加载失败

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求:GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $.get("/try/ajax/demo_test.php"function (datastatus) {
          alert("数据: " + data + "\n状态: " + status);
        });
      });
    });
  </script>
</head>

<body>

  <button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>

</html>

运行结果

点击

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
    $(document).ready(function () {
      $("button").click(function () {
        $.post("/try/ajax/demo_test_post.php", {
          name: "baidu",
          url: "http://www.baidu.com"
        },
          function (datastatus) {
            alert("数据: \n" + data + "\n状态: " + status);
          });
      });
    });
  </script>
</head>

<body>

  <button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>

</html>

运行结果

点击

明天看一下关于AngularJS的内容


返回列表 返回列表
评论

    分享到