jq

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>login</title>
  </head>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <!-- template.js -->
  <script src="https://cdn.bootcss.com/template_js/0.8.0/template.js"></script>
  <body>
    <div>
      <input type="text" id="phone" />
      <input type="text" id="pass" />
      <button id="bid">登录</button>
      <div id="demo"></div>

      <div>
        <input
          type="text"
          name=""
          id="contact_name"
          placeholder="contact_name"
        />
        <input type="text" name="" id="phones" placeholder="phone" />
        <input type="text" name="" id="address" placeholder="address" />
        <button id="add">添加</button>
      </div>
    </div>
    <script type="text/javascript">
      $("#bid").click(function() {
        var params = {
          phone: 15871422909,
          pass: 111111
        };
        $.ajax({
          url: "http://114.55.116.174:81/apisc/members/login", //地址
          dataType: "json", //数据类型
          type: "POST", //类型
          timeout: 2000, //超时
          data: params,
          //请求成功
          success: function(data, status) {
            console.log(data);
            localStorage.setItem("userInfo", JSON.stringify(data.data));
            //获取需要的数据
            var group = data.data;
            //拼接字符串
            var str = "";
            //对数据做遍历,拼接到页面显示
            for (var i = 0; i < group.length; i++) {
              str +=
                '<div class="item">' +
                '<div class="item-title">' +
                group[i].id +
                "</div>" +
                "<div>" +
                '<span class="item-content">' +
                group[i].nick_name +
                "</span>" +
                '<span class="item-content">' +
                group[i].tid +
                "</span>" +
                "</div>" +
                "</div>";
            }
            //放入页面的容器显示
            $("#demo").html(str);
          },
          //失败/超时
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            if (textStatus === "timeout") {
              alert("請求超時");
              setTimeout(function() {
                alert("重新请求");
              }, 2000);
            }
            //alert(errorThrown);
          }
        });
      });

      //jquery的入口函数。  2.文档加载完毕,图片不加载的时候就可以执行这个函数。
      $(function() {
        var getUserInfo = function() {
          //获取需要的数据
          var message = JSON.parse(localStorage.getItem("userInfo"));
          console.log(message);
          let params = {
            id: message.id,
            token_sc: message.token_sc
          };
          $.ajax({
            url: "http://114.55.116.174:81/apisc/address/list",
            dataType: "json", //数据类型
            type: "POST", //类型
            timeout: 2000, //超时
            data: params,
            success: function(data, status) {
              //   console.log(data.data + "333");
              var group = data.data;
              //拼接字符串
              var str = "";
              //对数据做遍历,拼接到页面显示
              for (var i = 0; i < group.length; i++) {
                str +=
                  '<div class="content">' +
                  "<div>" +
                  group[i].contact_name +
                  "</div>" +
                  "<div>" +
                  "<span>" +
                  group[i].phone +
                  "</span>" +
                  "<span>" +
                  group[i].address +
                  "</span>" +
                  "</div>" +
                  "</div>";
              }
              //放入页面的容器显示
              $("#demo").html(str);
            }
          });
        };

        $("#add").click(function() {
          var message = JSON.parse(localStorage.getItem("userInfo"));
          var contact_name = $("#contact_name").val();
          var phones = $("#phones").val();
          var address = $("#address").val();
          var params = {
            id: message.id,
            token_sc: message.token_sc,
            contact_name: contact_name,
            phone: phones,
            address: address,
            is_default: 0
          };
          $.ajax({
            url: "http://114.55.116.174:81/apisc/address/add", //地址
            dataType: "json", //数据类型
            type: "POST", //类型
            timeout: 2000, //超时
            data: params,
            //请求成功
            success: function(data, status) {
              console.log(data);
              getUserInfo();
            },
            //失败/超时
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              if (textStatus === "timeout") {
                alert("請求超時");
                setTimeout(function() {
                  alert("重新请求");
                }, 2000);
              }
              //alert(errorThrown);
            }
          });
        });

        $(".content").click(function() {
          $(".content").each(function() {
            alert($(this).text());
          });
        });

        window.onload = function() {
          getUserInfo();
        };
      });
    </script>
  </body>
</html>
原文地址:https://www.cnblogs.com/mica/p/11679100.html