通过AJAX获得不寻常的JS结果

Question

在我面向用户的页面中，我有这一部分：

  <div class="navbar">
   <div class="navbar-inner">
    <div class="container">
     <ul style="margin: 0 auto;">
      <li><a id="tab_1" href="#tab1" data-toggle="tab"><strong>Section 1</strong></a></li>
      <li><a id="tab_2" href="#tab2" data-toggle="tab"><strong>Section 2</strong></a></li>
      <li><a id="tab_3" href="#tab3" data-toggle="tab"><strong>Section 3</strong></a></li>
      <li><a id="tab_4" href="#tab4" data-toggle="tab"><strong>Section 4</strong></a></li>
      <li><a id="tab_5" href="#tab5" data-toggle="tab"><strong>Section 5</strong></a></li>
      <li><a id="tab_6" href="#tab6" data-toggle="tab"><strong>Submit</strong></a></li>
     </ul>
    </div>
   </div>
  </div>

AJAX调用来自的PHP看起来像这样：

if($secErr1 === "1") {
    $report_checkReport['tab_1'] = "<span style=\"color: #ff0000;\"><strong>Section 1</strong></span>";
} else {
    $report_checkReport['tab_1'] = "<strong>Section 1</strong>";
}

if($secErr2 === "1") {
    $report_checkReport['tab_2'] = "<span style=\"color: #ff0000;\"><strong>Section 2</strong></span>";
} else {
    $report_checkReport['tab_2'] = "<strong>Section 2</strong>";
}

if($secErr3 === "1") {
    $report_checkReport['tab_3'] = "<span style=\"color: #ff0000;\"><strong>Section 3</strong></span>";
} else {
    $report_checkReport['tab_3'] = "<strong>Section 3</strong>";
}

if($secErr4 === "1") {
    $report_checkReport['tab_4'] = "<span style=\"color: #ff0000;\"><strong>Section 4</strong></span>";
} else {
    $report_checkReport['tab_4'] = "<strong>Section 4</strong>";
}

if($secErr5 === "1") {
    $report_checkReport['errorText_doSave5'] = "<span style=\"color: #ff0000;\">Section(s) of this page appear to be incomplete</span>";
    $report_checkReport['checkReport'] .= "<strong>Section 5</strong> is missing information<br>";
    $report_checkReport['tab_5'] = "<span style=\"color: #ff0000;\"><strong>Section 5</strong></span>";
} else {
    $report_checkReport['tab_5'] = "<strong>Section 5</strong>";
}

if($secErr6 === "1") {
    $report_checkReport['tab_6'] = "<span style=\"color: #ff0000;\"><strong>Submit</strong></span>";
} else {
    $report_checkReport['tab_6'] = "<strong>Submit</strong>";
}

echo json_encode($report_checkReport);

在PHP调用中还有很多内容，因为它正在检查整个多页面表单，并且（一旦我解决了这个问题）显示提交按钮或错误消息。当＆＃34;检查＆＃34;按下按钮，AJAX调用返回一个结果，如果其中一个标签出错，我只是试图让标签从正常文本转到红色文本。相当简单和合乎逻辑，对吧？

但是，当我执行此过程时，Firebug告诉我，正确的预期结果会从PHP返回（是的！）然而，页面上显示的最终结果变得混乱（boo）。之前的菜单（如代码的第一部分所示）改为：

Section 1 | Section 2 | Section 3 | Section 4 | Section 5 | Submit

成为：

Section 2 | Section 3 | Section 4 | Section 5 | Section 5 | Submit

当然链接仍然指向正确的位置，但文字很乱。如图所示，第1节现在似乎与第2节相呼应。 Firebug报告说它根本没有从AJAX中出现 - 请查看来自Firebug日志的信息，请参阅日志末尾以获取特定问题的数据。

POST post.7.VisFelAp.php？appID = 1＆amp; ident = checkReport

200 OK

木卫四

415 B

192.168.30.128:80

9ms的 ParamsHeadersPostResponseHTMLJSONCacheCookies

{"resultImg_hostOrganisation":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_postalAddress":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_streetAddress":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_organisationPhone":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_contactPerson":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_positionHeld":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_phoneDDI":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_email":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_wwPersonName":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_wwPositionHeld":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_visitingFellow":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_propDate1From":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_propDate1To":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_propDate2From":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_propDate2To":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_themeAndPurpose":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_activsAndOutcomes":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_benefitToNZPriSec":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_fitAGsStraObj":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_support":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","resultImg_dessemination":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"&#10004;\" title=\"&#10004;\">","errorText_doSave4":"<span style=\"color: #2dac4e;\">Data appears ok here<\/span>","tab_1":"<strong>Section 1<\/strong>","tab_2":"<strong>Section 2<\/strong>","tab_3":"<strong>Section 3<\/strong>","tab_4":"<strong>Section 4<\/strong>","tab_5":"<strong>Section 5<\/strong>","tab_6":"<strong>Submit<\/strong>"}

1个请求

415 B

9ms（onload：1.93s）

那么，一旦启动此检查，为什么标签文本数据会在面向用户页面的错误位置回显？这是一些奇怪的简单的小JS怪，我能以某种方式修复吗？

更新 - 因为需要更多代码。页眉中有一个.js文件，处理AJAX的部分如下所示：

$("document").ready(function() {
    // <...snip cos you don't want the long list of functioning items...>
    $("#checkReport").click(checkReport);
})

和

function checkReport() {
$.post('./post.7.VisFelAp.php?appID=' + (appID) + '&ident=checkReport', $('#checkReport').serialize(), function(data) {
    // Tab 1
    $("#errorText_hostOrganisation").html(data.errorText_hostOrganisation);
    $("#resultImg_hostOrganisation").html(data.resultImg_hostOrganisation);
    $("#errorText_postalAddress").html(data.errorText_postalAddress);
    $("#resultImg_postalAddress").html(data.resultImg_postalAddress);
    $("#errorText_streetAddress").html(data.errorText_streetAddress);
    $("#resultImg_streetAddress").html(data.resultImg_streetAddress);
    $("#errorText_organisationPhone").html(data.errorText_organisationPhone);
    $("#resultImg_organisationPhone").html(data.resultImg_organisationPhone);
    $("#errorText_contactPerson").html(data.errorText_contactPerson);
    $("#resultImg_contactPerson").html(data.resultImg_contactPerson);
    $("#errorText_positionHeld").html(data.errorText_positionHeld);
    $("#resultImg_positionHeld").html(data.resultImg_positionHeld);
    $("#errorText_phoneDDI").html(data.errorText_phoneDDI);
    $("#resultImg_phoneDDI").html(data.resultImg_phoneDDI);
    $("#errorText_email").html(data.errorText_email);
    $("#resultImg_email").html(data.resultImg_email);
    $("#tab_1").html(data.tab_1);
    // Tab 2
    $("#errorText_wwPersonName").html(data.errorText_wwPersonName);
    $("#resultImg_wwPersonName").html(data.resultImg_wwPersonName);
    $("#errorText_wwPositionHeld").html(data.errorText_wwPositionHeld);
    $("#resultImg_wwPositionHeld").html(data.resultImg_wwPositionHeld);
    $("#errorText_visitingFellow").html(data.errorText_visitingFellow);
    $("#resultImg_visitingFellow").html(data.resultImg_visitingFellow);
    $("#errorText_propDate1From").html(data.errorText_propDate1From);
    $("#resultImg_propDate1From").html(data.resultImg_propDate1From);
    $("#errorText_propDate1To").html(data.errorText_propDate1To);
    $("#resultImg_propDate1To").html(data.resultImg_propDate1To);
    $("#errorText_propDate2From").html(data.errorText_propDate2From);
    $("#resultImg_propDate2From").html(data.resultImg_propDate2From);
    $("#errorText_propDate2To").html(data.errorText_propDate2To);
    $("#resultImg_propDate2To").html(data.resultImg_propDate2To);
    $("#errorText_propDate3From").html(data.errorText_propDate3From);
    $("#resultImg_propDate3From").html(data.resultImg_propDate3From);
    $("#errorText_propDate3To").html(data.errorText_propDate3To);
    $("#resultImg_propDate3To").html(data.resultImg_propDate3To);
    $("#tab_1").html(data.tab_2);
    // Tab 3
    $("#errorText_themeAndPurpose").html(data.errorText_themeAndPurpose);
    $("#resultImg_themeAndPurpose").html(data.resultImg_themeAndPurpose);
    $("#errorText_activsAndOutcomes").html(data.errorText_activsAndOutcomes);
    $("#resultImg_activsAndOutcomes").html(data.resultImg_activsAndOutcomes);
    $("#errorText_benefitToNZPriSec").html(data.errorText_benefitToNZPriSec);
    $("#resultImg_benefitToNZPriSec").html(data.resultImg_benefitToNZPriSec);
    $("#errorText_fitAGsStraObj").html(data.errorText_fitAGsStraObj);
    $("#resultImg_fitAGsStraObj").html(data.resultImg_fitAGsStraObj);
    $("#errorText_support").html(data.errorText_support);
    $("#resultImg_support").html(data.resultImg_support);
    $("#errorText_dessemination").html(data.errorText_dessemination);
    $("#resultImg_dessemination").html(data.resultImg_dessemination);
    $("#tab_2").html(data.tab_3);
    // Tab 4
    $("#errorText_doSave4").html(data.errorText_doSave4);
    $("#resultImg_doSave4").html(data.resultImg_doSave4);
    $("#tab_3").html(data.tab_4);
    // Tab 5
    $("#errorText_doSave5").html(data.errorText_doSave5);
    $("#resultImg_doSave5").html(data.resultImg_doSave5);
    $("#tab_4").html(data.tab_5);
    // Tab 6
    $("#errorText_sub_1").html(data.errorText_sub_1);
    $("#resultImg_sub_1").html(data.resultImg_sub_1);
    $("#checkReport").html(data.checkReport);
    $("#tab_6").html(data.tab_6);
}, 'json' );
}

我也忽略了提到我在这个页面上使用jQuery。希望这够了吗？

Answer 1

您在代码中定位的ID会插入所有内容（帖子末尾的大块JS）#tab_1，再次#tab_1，然后{{1} }，#tab_2，#tab_3，（跳过#tab_4），然后#tab_5。

修正那些#tab_6 - #tab_1，它应该看起来像你想要的那样。

您的代码

#tab_6

修改为正确

// Tab 1
// ...snip...
$("#tab_1").html(data.tab_1);
// Tab 2
// ...snip...
$("#tab_1").html(data.tab_2);
// Tab 3
// ...snip...
$("#tab_2").html(data.tab_3);
// Tab 4
// ...snip...
$("#tab_3").html(data.tab_4);
// Tab 5
// ...snip...
$("#tab_4").html(data.tab_5);
// Tab 6
// ...snip...
$("#tab_6").html(data.tab_6);

Answer 2

在处理程序代码中，您说：

$("#tab_1").html(data.tab_1);

这是一个好的开始，但在// Tab 2部分，我们看到：

$("#tab_1").html(data.tab_2);

依次进入以下标签。请务必将这些更正为

$("#tab_2").html(data.tab_2);

等...