web--模拟题

最新推荐文章于 2024-05-14 16:27:26 发布

Nuo__

最新推荐文章于 2024-05-14 16:27:26 发布

阅读量107

点赞数

分类专栏：笔记前端文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_62976139/article/details/130327272

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

input.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>产品录入</title>
    <link href="css/input.css" rel="stylesheet" type="text/css" />
    <style>
      #search div:nth-child(1) {
        float: left;
        width: 100px;
        margin-right: 10px;
        text-align: right;
      }
      #search div:nth-child(2) {
        width: 150px;
        margin-left: 110px;
      }
      #submit input {
        width: 265px;
        margin-top: 8px;
      }
      #error {
        color: #f00;
      }
    </style>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
      $().ready(function () {
        $("#submit input").click(function () {
          var errormsg = "";
          if ($("#search div:nth-child(2) input").val() == "") {
            errormsg = "产品名称必须输入";
          } else if (/\d/.test($("#search div:nth-child(2) input").val())) {
            errormsg = "产品名称中不能有数字";
          }
          if (errormsg != "") {
            $("#error").text(errormsg);
          } else {
            window.location.href = "product.html";
          }
        });
      });
    </script>
  </head>
  <body>
    <div id="search">
      <div>产品名称</div>
      <div><input type="text" placeholder="请输入产品名称" /></div>
    </div>
    <div id="error"></div>
    <div id="submit"><input type="button" value="录入" /></div>
  </body>
</html>

product.html

实验要求

一。

1、前后端数据交互：点击页面中“搜索”按钮向后端发起请求

（1）接口地址：http://43.136.217.18:8081/getProduct

（2）接口调用方式：post

（3）提交参数：name

（4）输入产品名称“电脑”并点击搜索，服务器将返回JSON数据

服务端返回数据格式：（请粘贴在下方）

二。

3、界面设计和数据填充（如下图所示）

（1）遍历JSON中的所有的产品，构造表格HTML代码，并填充至id为product的div中。

（2）将数据放入一个四列表格中，第一行单元格为表头，height设为30px，后续行为数据，height设为100px；

（3）所有单元格都设置为垂直居中和水平居中；

（4）第一列显示一张图片，高宽各为100px，图片文件名为JSON中的image属性值，完整图片链接为：（4分）

http://43.136.217.18:8081/img/图片文件名

（5）第二列显示品牌，取值为JSON中的brand属性值

（6）第三列显示型号链接，链接文本取值为JSON中的model属性值，链接的中的图片文件名为JSON中的image属性值，完整链接代码为：

链接要求点击后在新页面打开；

（7）第四列显示价格，取值为JSON中的price属性值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>产品</title>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script>
      $().ready(function () {
        $("#search").click(function () {
          $.ajax({
            url: "http://43.136.217.18:8081/getProduct",
            data: { name: $("#product").val() },
            type: "post",
            dataType: "JSON",
            success: function (jsondata) {
              // var str=JSON.stringify(jsondata);
              // document.write(str)
              // {"code":200,
              // "data":[{"brand":"联想","image":"thinkpad.jpeg","model":"thinkpad","price":5000},
              //         {"brand":"戴尔","image":"lingyue.jpeg","model":"灵越","price":6000},
              //         {"brand":"惠普","image":"anyinjinglin.jpeg","model":"暗影精灵","price":6000},
              //         {"brand":"神舟","image":"youya.jpeg","model":"优雅","price":4000},
              //         {"brand":"联想","image":"yangtian.jpeg","model":"扬天","price":4000}],
              // "msg":"成功","success":true}
              var html = "<table>";
              html +=
                "<tr><th>&nbsp;</th><th>品牌</th><th>型号</th><th>价格</th></tr>";
              for (var i in jsondata.data) {
                var item = jsondata.data[i];
                html += "<tr>";
                html +=
                  "<td><img src='http://43.136.217.18:8081/img/" +
                  item.image +
                  "'></td>";
                html += "<td>" + item.brand + "</td>";
                html +=
                  "<td><a href='http://43.136.217.18:8081/img/" +
                  item.image +
                  "'>" +
                  item.model +
                  "</a></td>";
                html += "<td>" + item.price + "</td>";
                html += "</tr>";
              }
              html += "</table>";
              $("#pro").html(html);
            },
            error: function () {},
          });
        });
      });
    </script>
    <style>
      table {
        width: 550px;
        border: 1px solid #000;
        border-collapse: collapse;
      }
      th {
        height: 30px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #000;
      }
      td {
        height: 100px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #000;
      }
      img {
        height: 100px;
        width: 100px;
      }
      a {
        color: #0ff000;
      }
      a:hover {
        color: #ff0000;
      }
      tr th:nth-child(4) {
        background-color: #ffffd0;
      }
      tr td:nth-child(4) {
        background-color: #ffffd0;
      }
      tr th:nth-child(1) {
        width: 100px;
      }
      tr th:nth-child(2) {
        width: 150px;
      }
      tr th:nth-child(4) {
        width: 150px;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="text" id="product" placeholder="请输入产品名称" />
      <input type="button" id="search" value="搜索" />
    </div>
    <div id="pro"></div>
  </body>
</html>