时间戳

首页 > 解决方案 > 使用 AJAX 调用 HTML 数据时网格框显示错误

javascript - 使用 AJAX 调用 HTML 数据时网格框显示错误

问题描述

我使用 HTML 和 CSS 设计了一个网格。当用户单击网格时，我使用 PHP 和 AJAX 显示另一个网格。

我的代码：

$(document).ready(function() {
  $(document).on('click', '.showme', function() {

    var id = $(this).attr("id");
    var num = $(this).attr("class");
    var poststr = "request=" + num + "&moreinfo=" + id;
    $.ajax({enter code here
      url: "http://kiranasaman.com/mobiledesign/testme.php",
      cache: 0,
      data: poststr,
      success: function(result) {
        document.getElementById("grid").innerHTML = result;
      }
    });
  });
});
main {
  display: block;
  box-sizing: border-box;
  width: 90%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(204, 204, 204, .7);
  border: .07em solid rgba(0, 0, 0, .5);
  border-radius: .5em;
}

button {
  text-align: center;
  font-size: 100%;
  border-radius: 1em;
  border: .1em solid #333;
  padding: 1em;
  width: 8em;
  margin: .25em;
  width: 23%;
}

button strong {
  display: block;
  box-sizing: border-box;
  line-height: 1.35;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 200%;
  background-color: #000;
  color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  border: .1em solid #fff;
}

button:hover,
button:focus {
  background-color: #060;
  box-shadow: 0 0 1em rgba(0, 0, 0, .5);
  color: #fff;
  outline: none;
}

.gridmine {
  display: -ms-grid;
  -ms-grid-columns: auto 1fr;
  -ms-grid-rows: auto 1fr auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto;
}

.title {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  grid-column: 1;
  grid-row: 1;
}

.title1 {
  ms-grid-column: 2;
  -ms-grid-row: 1;
  grid-column: 2;
  grid-row: 1;
}

.title2 {
  ms-grid-column: 3;
  -ms-grid-row: 1;
  grid-column: 3;
  grid-row: 1;
}

.gridmine button {
  width: 100%;
  height: 100%;
  margin: 0;
}

.gridmine button:hover {
  background-color: #73090D;
}

.gridmine .soman {
  height: 200px;
  font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main>

  <h2 style="font-size:28px;">Shop by Category</h2>
  <div class="gridmine" id="grid">
    <div class="soman title">
      <button class='request_1 showme' id='rating_1' style="background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);">

      <h3>  Rice, Grains &amp; Flours</h3>
      </button>
    </div>
    <div class="soman title1">
      <button style="background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);">

         <h3>Dals, Pulses &amp; Seeds</h3>
      </button>
    </div>
    <div class="soman title2">
      <button style="background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);">
        <h3>Sugar &amp; Salts</h3>
      </button>
    </div>

  </div>
</main>

当用户单击该框时，我正在使用 AJAX 和 PHP 获取数据并显示它以替换相同的网格。

PHP代码：

<?php
  $request_id = preg_replace("/[^0-9]/","",$_REQUEST['request']);
  $request_moreinfo = preg_replace("/[^0-9]/","",$_REQUEST['moreinfo']);

  if($request_id=="1")
  {
      echo "<div id='grids' class='gridmine'>
        <div class='soman titles'>
          <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3>  Rice</h3>
          </button>
        </div>
        <div class='soman title1s'>
          <button style='background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);'>

             <h3>Grains</h3>
          </button>
        </div>
        <div class='soman title2s'>
          <button style='background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);'>
            <h3>Flours</h3>
          </button>
        </div>
</div>";
  }
  ?>

我对两个网格中的所有内容都使用相同的类。第一个网格正在正确显示，但是来自 AJAX PHP 请求的第二个网格没有像第一个一样正确显示，它的宽度更小。

谁能告诉我这里有什么问题？提前致谢。

标签： javascriptphphtmlcsscss-grid

解决方案

您将innerHTMLof设置#grid为本质上相同的元素，包括容器。如果您删除容器，它应该可以工作：

echo "
        <div class='soman titles'>
          <button class='request_2 seeme' id='rating_2' style='background: linear-gradient(to bottom, #cc99ff 0%, #ff99cc 100%);'>

          <h3>  Rice</h3>
          </button>
        </div>
        <div class='soman title1s'>
          <button style='background: linear-gradient(to right, #ff9a9e  0%, #fad0c4 100%);'>

             <h3>Grains</h3>
          </button>
        </div>
        <div class='soman title2s'>
          <button style='background: linear-gradient(to right, #a1c4fd  0%, #c2e9fb 100%);'>
            <h3>Flours</h3>
          </button>
        </div>
";

然后它会用div带有按钮的三个元素替换它。

推荐阅读