javascript - 如何在 Ajax 成功设置中填充 Span 元素

Question

提交表单后(表单未显示)我的页面正在从我的 php 脚本接收一个 JSON 编码的数组，没有问题。该页面包含以下元素，我试图用来自 json 的数据填充这些元素。我正在尝试让数据显示在 span 元素之间。

          <div class="added_display">
        <ul>
          <li>
            <p>Title: <a href="#link_for_flyer" target="_blank"><span class="title"></span></a></p>
          </li>
          <li style="color: #FF0004">
            <p><span class="comment" style="color: #FF4245"></span></p>
          </li>
          <li>
            <p>Address: <span class="address"></span></p>
          </li>
          <li>
            <p>Sale Price: <span class="sale-price"></span></p>
          </li>
          <li>
            <p>Lease Price: <span class="lease-price"></span></p>
          </li>
          <li>
            <p>Lot Size: <span class="lot-size"></span></p>
          </li>
          <li>
            <p>Building Size: <span class="building-size"></span></p>
          </li>
          <li>
            <p>Zoning: <span class="zoning"></span></p>
          </li>
        </ul>
      </div>

和以下指导一切的 ajax 脚本。我在成功设置中使用 span 元素类:

$("document").ready(function() {
$(".data-form").submit(function() {
    data = $(this).serialize();
    if (confirm("Are you ready to sumbmit this listing?\nYou can always edit the listing after going to the menu tab - edit listing."))       
    {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "add-list.php",
            data: data,
            success: function(response) {
                      if (response.success) {
                       $("#modal1").modal('hide');
                        $(".added_display").show();
                        $(".title").data(title);
                        $(".comment").data(comment);
                        $(".address").data(address);
                        $(".sale-price").data(sale_price);
                        $(".lease-price").data(lease_price);
                        $(".lot-size").data(lot_size);
                        $(".building-size").data(build_size);
                        $(".zoning").data(zoning);
                        $(".ad_link").data(ad_link);
                        }
                      else {
                          console.log("An error has ocurred: sentence: " + response.sentence + "error: " + response.error);
                      }
                  },
                  error: function() {
                      alert("An Error has ocurred contacting the server. Please contact your system administrator");
                  }
              });
        return false;
      }
   }); 
 });

我认为我的错误与成功设置有关。如何更正此代码以填充我的 span 元素？

Answer 1

代替 .data(value); 试试 .text(value);

根据 docs , .data() 将在元素上存储任意数据。它不会用于在 DOM 中显示值。如果要在元素内设置文本，请使用 .text(text) .

如果值是 HTML，使用 .html(htmlString) .