即使刷新页面后如何在同一个选项卡上？答案

【问题标题】：How to be on the same tab even after refreshing the page?即使刷新页面后如何在同一个选项卡上？
【发布时间】：2014-09-29 03:35:40
【问题描述】：

我自己成功创建了它....但问题是当我刷新页面时，所有内容都被隐藏了。我希望在第一次加载页面时看到第一个内容.....然后，如果用户单击第二个链接并刷新页面，他应该看到他在刷新之前单击的链接的内容。我认为将局部变量设为全局可以是答案……但我不知道如何制作。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").find("[id^='tab']").hide();
	$("#tabs a").click(function(){
	var dip=$(this).attr('name');  //to grasp the name attribute we used attr separately otherwise we could write $(this[name=''])
	window.dip=dip;
	$("#content").find("[id^='tab']").hide();
	$("#content").find('#' + dip).fadeIn();  //if there are many similar elements in a parent element, find is used to search the required element with the help of its id.
	});
});
</script>
</head>

<body>
<div id="uppertabs">
			<ul id="tabs">
				<li><a href="#" name="tab1">Profile</a></li>
				<li><a href="#" name="tab2">Health</a></li>
				</ul>
			
			<div id="content">
				<div id="tab1">Your profile is good</div>
				<div id="tab2">Check your health.</div>
			</div>
</div>			

</body>
</html>

【问题讨论】：

为什么要刷新页面？除非我误解，否则您描述的问题是“预期行为”。每当刷新页面时，它都会返回到原始状态。所以给你的问题是：为什么要刷新页面？也许我们可以帮助解决那个问题（我怀疑 AJAX 将是你的救星......）
我在标签下使用了聊天代码...所以要获取消息，我需要刷新它。在一个选项卡中，我使用了动态内容搜索按钮，因此每当我单击它时，它都会返回到第一个选项卡...我必须再次打开该选项卡以查看结果。有什么解决办法吗？

标签： jquery html ajax

【解决方案1】：

您必须使用服务器端语言（例如 PHP）来获取聊天消息。

秘诀是在您的 javascript 中使用 AJAX 来动态更新内容。这样一来，一切都保持原样——用户仍然在同一个选项卡上，但数据会更新。

请不要被 AJAX 吓倒——它比听起来容易得多。你只需要看看几个很好的例子。

请看一下这些简单的例子--自己尝试一下：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

https://stackoverflow.com/questions/25945137/php-fetch-content-from-one-form-and-update-it-in-other-form/25954450#25954450

关于 AJAX，您应该了解以下几点：

(1) AJAX 请求有四种格式 - 完整的$.ajax() 结构和三种快捷结构（$.post()、$.get() 和 $.load()）

在您非常擅长 AJAX 之前，我建议您使用格式正确的 $.ajax() 代码块，这就是上述示例所展示的内容。这样的代码块如下所示：

$('#updateTab').click(function(){
    var thisTab = $(this).parent().attr('id');
    $('#my_hidden_input_field').val(thisTab); //store ID of Tab we are on
    $.ajax({
        type: 'post',
         url: 'update_chats.php', //external PHP file that processes AJAX request
    dataType: 'html',
        data: 'email=' + form.email.value,
     success: (function(recd_data) {
            var tabID = $('#my_hidden_input_field').val();
            $('#tab-' +tabID).find('#chatDIV').html(recd_data);
    });
});

(2) url: 行指定的文件必须是单独的文件。这听起来很明显，但是很多人（包括我）都尝试过因为我们可以通过将表单“发布”到它所在的同一页面来处理表单——但是这不能通过 AJAX 完成。如果您尝试，您将收到整个页面返回而不是 PHP 页面应该发送的响应。

(3) 在$.ajax() 代码块中，data: 行指定发送到 PHP 处理器文件的数据。

(4) dataType: 行指定 ajax 代码块希望从 PHP 处理器文件接收回的数据类型。除非另有说明，否则默认数据类型为 html。

(5) 在 PHP 处理器文件中，数据通过echo 命令返回到 AJAX 代码块。无论该数据是以 html、文本还是 json 形式返回，它都会被 echoed 回 AJAX 例程，如下所示：

<?php

//perform MySQL search here. You will get chat data; I will just get first/last names
//For eg, MySQL returns array `$result` with: $result['firstname'] and $result['lastname']

$out =  '<div id="myresponse">';
$out .= 'First Name: <input type="text" value="' .$result['firstname']. '" />';
$out .= 'Last Name: <input type="text" value="' .$result['lastname']. '" />';
$out .= '</div>';

echo $out; //this line sends the data back to the AJAX code block in javascript

请亲自尝试上面的几个例子，你会看到它是如何工作的。

发送/返回数据不必使用json。但是，json 是发送 array 数据的有用格式——但正如您所见，您可以在 PHP 端和 echo 构建完整的 html 响应返回完成的标记，因此通常不需要发送数组数据本身。

最后，请不要随意更改 ID 名称。呈现页面后，不要理会 ID 名称。相反，添加/删除类并使用类名通过 jQuery 和 CSS 引用元素。

【讨论】：