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

时间:2015-01-08 17:48:56

标签: javascript jquery ajax

提交表单后(表单未显示)我的页面正在从我的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元素?

1 个答案:

答案 0 :(得分:3)

而不是.data(value);尝试.text(value);

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

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