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

Question

提交表单后（表单未显示）我的页面正在从我的 php 脚本接收 JSON 编码数组，没有问题。该页面包含以下元素，我正尝试用 json 中的数据填充这些元素。我正在尝试让数据显示在跨度元素之间。

          <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 脚本指导一切。我在成功设置中使用跨度元素 class：

$("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() will store arbitrary data on an element. It won't be used to display a value in the DOM. If you want to set the text inside an element use .text(text)。

如果值为 HTML，请使用 .html(htmlString)。

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

How to populate Span elements in an Ajax success setting

javascript

ajax

jquery