Javascript 通过AJAX实现不寻常的JS最终结果
在我面向用户的页面中，我有以下部分：Javascript 通过AJAX实现不寻常的JS最终结果,javascript,ajax,Javascript,Ajax,在我面向用户的页面中，我有以下部分： <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&l
<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>
Section 2 | Section 3 | Section 4 | Section 5 | Section 5 | Submit
{"resultImg_hostOrganisation":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_postalAddress":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_streetAddress":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_organisationPhone":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_contactPerson":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_positionHeld":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_phoneDDI":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_email":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_wwPersonName":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_wwPositionHeld":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_visitingFellow":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_propDate1From":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_propDate1To":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_propDate2From":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_propDate2To":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_themeAndPurpose":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_activsAndOutcomes":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_benefitToNZPriSec":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_fitAGsStraObj":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_support":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","resultImg_dessemination":"<img src=\".\/gfx\/form_yay.gif\" class=\"resultImg\" alt=\"✔\" title=\"✔\">","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>"}
我也没有提到我在这个页面上使用jQuery。希望这足够了？你在代码中插入的ID（你文章末尾的一大块JS）是
#tab_1#tab_1#tab_2#tab_3#tab u 4#tab u 5.tab u>
将它们修改为#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);
修改为正确的
// Tab 1
// ...snip...
$("#tab_1").html(data.tab_1);
// Tab 2
// ...snip...
$("#tab_2").html(data.tab_2);
// Tab 3
// ...snip...
$("#tab_3").html(data.tab_3);
// Tab 4
// ...snip...
$("#tab_4").html(data.tab_4);
// Tab 5
// ...snip...
$("#tab_5").html(data.tab_5);
// Tab 6
// ...snip...
$("#tab_6").html(data.tab_6);
在处理程序代码中，您可以说：
$("#tab_1").html(data.tab_1);
这是一个良好的开端，但在//选项卡2
部分，我们看到：
$("#tab_1").html(data.tab_2);
然后依次进入以下选项卡。确保您将这些更正为
$("#tab_2").html(data.tab_2);
等等。如果看不到实际处理Ajax结果和显示菜单的代码，就不可能说。Paul-question现在更新显示了更多代码。这是HTML、PHP、JSON、Javascript等最糟糕的组合。。。我认为您应该尝试以更好的结构化方式返回所有数据，而不是使用完整的HTML进行解码。只需检查数据，返回数组，然后使用JS更改页面。很抱歉，这太多，无法调试。你需要重新考虑结构，然后做一些循环，因为这是为了。。。预定义的。@Cassandra-我觉得这没问题：$（“#tab_1”）.html（data.tab_1）
，但其他的似乎有点可疑：$（“#tab_1”）.html（data.tab_2）
，$（“#tab_2”）.html（data.tab_3）
etc，etc.@something这里你所说的可能是对的，但是这对手头的问题没有帮助。如果你能举出一个例子，说明如何以更好、更简单的方式实现这一点（总体情况），我非常乐意看到这一点！我犯了这么简单的错误，我找不到。非常感谢你！Paul首先得到的只是一个分数，但很明显，两个答案都是正确的，都被接受。只要你把它修好，这就是所有的问题。两个答案在我的屏幕上都有完全相同的时间戳。。。两者都是正确的。。。有时，给不止一个人发绿色记号会很好。谢谢保罗，非常感谢。这是我第一次使用AJAX，所以我试着去适应它。似乎我时常错过显而易见的事情！
// Tab 1
// ...snip...
$("#tab_1").html(data.tab_1);
// Tab 2
// ...snip...
$("#tab_2").html(data.tab_2);
// Tab 3
// ...snip...
$("#tab_3").html(data.tab_3);
// Tab 4
// ...snip...
$("#tab_4").html(data.tab_4);
// Tab 5
// ...snip...
$("#tab_5").html(data.tab_5);
// Tab 6
// ...snip...
$("#tab_6").html(data.tab_6);
$("#tab_1").html(data.tab_1);
$("#tab_1").html(data.tab_2);
$("#tab_2").html(data.tab_2);