Jquery Ajax 数据方法正在将 div 更改为文本输入字段

Question

我正在使用 ajax 将表单数据（由多个文本字段和一个文件上传组成）发送到 php 以将其插入到 sqldb 中。该脚本发回一个 json 编码数组，其中包含两个文本字段的数据，标题和地址；以及数组调用 ad_link 的上传文件的完整 URL。

Jquery Ajax 使用此数据根据 class 名称填充一些 div 元素。这些值被放入 div 元素中。

但是，它使 div 元素看起来像文本字段（就像最初用于发送值的表单中的元素一样）。我已经检查了 classes 以确保所有内容都正确匹配并且它们对于各自的功能是唯一的。此页面使用 bootstrap 和 jquery。我该如何解决或解决这个问题？

    <body>
    <!--Form-->
    <form name="data-form" class="data-form" method="post" action="add-list.php" enctype="multipart/form-data">
      <fieldset >
        <input class="fileUpload" name="flyer" type="file"  />
      </fieldset>
      <textarea name="title" id="title"></textarea>
      <textarea name="address" id="address"></textarea>
      <button id="nxtbutttwo" class="btn btn-primary avatar-save" type="submit">Save Listing</button>
    </form>

    <!--Elements to populate upon ajax success-->
    <div class="aadded_display">
      <ul>
        <li>
          <div><a class="aad_link" href="" target="_blank">
            <div class="atitle"></div>
            </a></div>
        </li>
        <li>
          <div class="aaddress"></div>
        </li>
      </ul>
    </div>

    <!--Jquery Ajax-->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script>
    $("document").ready(function() {
        $(".data-form").submit(function() {
            data = $(this).serialize();
            if (confirm("good?"))       {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "add-list.php",
                    data: data,
                    success: function(response) {
                              if (response.success) {
                                  $("#modal1").modal('hide');
                                $(".aadded_display").show();
                                $(".atitle").html(title);
                                $(".aadress").html(adress);
                                $("a.aad_link").html(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;
            }
        });
    });
    </script> 
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
    </body>

Answer 1

来自 ajax 请求的响应保存在 response object 中，您用它来检查是否成功但不用于填充 div。

$(".atitle").html(response.title);
$(".aadress").html(response.adress);
$("a.aad_link").html(response.ad_link);

对于 div 中的文本框，出现这种情况是因为某些浏览器使用其 ID 为 dom 中的元素创建全局变量，因此 title 是标题文本区域，您将它的副本放在 .atitle div.

Jquery Ajax 数据方法正在将 div 更改为文本输入字段

Jquery Ajax data method is changing a div to a text input field

ajax