Question

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

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

然而，它使div元素看起来像文本字段（就像用于最初发送值的表单中的那些）。我已经检查了这些类，以确保所有内容都正确匹配，并且它们对于各自的功能是唯一的。此页面使用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对象中，您可以使用该对象检查成功但不填写div。

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

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

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

1 个答案: