Ajax，

最新推荐文章于 2024-05-30 11:21:03 发布

大狗晋

最新推荐文章于 2024-05-30 11:21:03 发布

阅读量235

点赞数

文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/weixin_52957373/article/details/126431462

版权

Ajax初识

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax特点

优点

不需要插件支持
用户体验极佳。不刷新页面即可获取可更新的数据
提升Web程序的性能。在传递数据方面做到按需发送，不必整体提交
减轻服务器和带宽的负担。将服务器的一些操作转移到客户端

缺点

前进、后退的功能被破坏。因为Ajax永远在当前页，不会记录前后页面
搜索引擎的支持度不够。因为搜索引擎爬虫还不能理解JS引起数据的内容

常见状态码

100 ~ 199：表示连接接续
200 ~ 299：表示各种意义上的成功
300 ~ 399：表示重定向
400 ~ 499：表示各种客户端错误
500 ~ 599：表示各种服务器错误

jQuery.Ajax

语法格式:

$.ajax({参数一:value, 参数二:value, ......})

参数:
url：请求地址
type：请求方式，GET、POST（1.9.0之后用method）
data：要发送的数据
success：成功之后执行的回调函数(全局)

练习：获取表格的信息，增添，删除等。

登录页

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <form>
      用户名：<input type="text" name="username" id="username" > 密码：<input type="password" name="psw" id="password">
      <!-- <button onclick="login()">登录</button> -->
    </form>
    <button id="login">登录</button>
  </body>
  <script>
    var login = document.getElementById("login");
    login.onclick = function () {
      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;
      $.ajax({
        url: "http://110.42.140.234:8083/user/toLogin",
        type: "get",
        data: {
          username: username,
          psw: password,
        },
        success: function (res) {
          if (res.data.login_type == "登录成功！") {//成功
            window.location.href = "del.html";
          } else {
            alert(res.data.login_type);//失败
          }
        },
      });
    };  
  </script>
</html>

在这里插入图片描述

获取，删除

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <table id="message" border="solid">
      <tr>
        <th>id</th>
        <th>name </th>
        <th>age</th>
        <th>adress </th>
        <th>cation</th>
      </tr>
      <tbody id="content">

      </tbody>
    </table>
    <button onclick="getMessage()">获取message</button>
    <button onclick="toMessage()">增加message</button>
  </body>
  <script src="js/jquery-3.6.0.min.js"></script>
  <script>

    function getMessage() {
      $.ajax({
        url: "http://110.42.140.234:8083/user/getMessage",
        type: "get",
        success: function (e) {
          var data = e.data;
          console.log(e);
          for (var i = 0; i <data.length; i++) {
            var user = "";
            user = "<tr id='i'>"+ "<td>" + data[i].id + "</td>"+
            "<td>" + data[i].name + "</td>"+
            "<td>" + data[i].age + "</td>"+
            "<td>" + data[i].adress + "</td>"+ 
            "<td>" + "<button οnclick=Delete(" + i + ")>删除</button>" + "</td>"+"</tr>";
            $("#content").append(user);
          }
        },
      });
    }
    function Delete(id){
      $.ajax({
        url: "http://110.42.140.234:8083/user/deleteMessage",
        type: "get",
        data: {
          messageId: id,
        },
        success: function (id) {
          console.log(id);

        },
      });
    }
    function toMessage() {
      window.location.href = "./addMessage.html";
    }
  </script>
</html>

在这里插入图片描述

添加

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js/jquery-3.6.0.min.js"></script>
  </head>
  <body>
  <div id="div1" align="center">
    <form id="form" >
      <table align="center" border="0px">
        <tr><td><span>id: </span></td> <td> <input type="text" name="id" id="id"><br></td></tr>
       <tr><td><span>name:</span></td><td><input type="text" name="name" id="name"><br></td></tr>
      <tr> <td><span>age:</span></td> <td><input type="text" name="age" id="age"><br></td></tr>
        <tr><td><span>adress:</span></td><td><input type="text" name="adress" id="adress"><br></td></tr>
      </tr></table>
    </form>
    <button onclick="add()">增加</button>
  </div>
  </body>
  <script>
    function add() {
      var id = document.getElementById("id").value;
      var name = document.getElementById("name").value;
      var age = document.getElementById("age").value;
      var adress = document.getElementById("adress").value;
      var use="";
      user = "<tr id='i'>"+ "<td>" + id + "</td>"+
              "<td>" + name + "</td>"+
              "<td>" + age + "</td>"+
              "<td>" + adress + "</td>"+
              "<td>"+" <button οnclick=Delete()>删除</button>" + "</td>"+"</tr>";
      $.ajax({
        url: "http://110.42.140.234:8083/user/addMessage",
        type: "get",
        data: {
          id: id,
          name: name,
          age: age,
          adress: adress,
        },
        success: function (res) {
          alert(res.data.add_type);
          $('#content').append(use);
        },

      });
    }
  </script>
</html>