重新加载 javascript 而不刷新页面

发布于 2025-01-05 22:03:05 字数 415 浏览 0 评论 0原文

免责声明:我对这方面还很陌生,所以请牢记这一点。

您好,

我正在设置一个使用 AJAX 加载页面内容的网站,而无需离开页面。我有几个页面使用 javascript 加载列表信息。

这是链接设置的外观:

#home
#list.php?list=$list_id

我有一个名为 $list_id 的变量,并将其与一些 javascript 一起使用来加载列表。我面临的问题是,如果我加载一个列表(假设 ID 为 1 的列表),然后返回并加载另一个列表(假设 ID 为 2 的列表),则 javascript 尚未重新加载以考虑新的列表 ID。

无论如何,我可以重新加载 javascript 代码来解释新变量,而无需刷新页面吗?

谢谢!

Disclaimer: I am very new to this stuff so please bare this in mind.

Hello,

Im setting up a site using AJAX to load page content without having to leave the page. I have a few pages that use javascript to load list information.

Here is link setup looks:

#home
#list.php?list=$list_id

I have a variable called $list_id and use that with some javascript to load the list. The problem I am facing is that if I load one list (lets say list with ID 1) then go back and load another list (lets say list with ID 2) the javascript has not reloaded to account for the new list ID.

Is there anyway I can reload the javascript code to account for the new variable without having to refresh the page?

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(6

长梦不多时 2025-01-12 22:03:05

我不明白你到底面临什么问题。
但如果你想重新加载脚本而不刷新页面,你可以这样做:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "somefile.js";
document.getElementsByTagName("head")[0].appendChild(script);

或使用 jQuery.loadScript 函数

I dont understand what problem you are facing exactly.
but if you want to reload script without refreshing the page, you can do in this way:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "somefile.js";
document.getElementsByTagName("head")[0].appendChild(script);

or use jQuery.loadScript function

樱花落人离去 2025-01-12 22:03:05

当将 HTML 插入到 DOM 中时,就会执行脚本。因此,当您通过 AJAX 加载一些 HTML 时,您可以执行包含的脚本。

When inserting HTML into the DOM scripts are executed. Therefore, when you load some HTML via AJAX you can execute contained scripts.

壹場煙雨 2025-01-12 22:03:05

您不能将 $list_id 存储在隐藏的输入字段中,然后在 ajax 调用后更新它吗?

例如,

  <input type="hidden" id="list-id" value="<?php echo $list_id; ?>" />

  <script>
  //ajax request
  var  $list_id = $('#list-id');
  $.ajax({
  url:'http://www.example.com/page.php',
  data:'list_id=' + $list_id.val(),
  success:function(data){
     //do something

     $list_id.val() = $list_id.val() + 1;
 }
 });

只是快速拼凑起来给你一个想法,所以可能会有一些 js 错误

Could you not store the $list_id in a hidden input field and then update it after an ajax call?

e.g.

  <input type="hidden" id="list-id" value="<?php echo $list_id; ?>" />

  <script>
  //ajax request
  var  $list_id = $('#list-id');
  $.ajax({
  url:'http://www.example.com/page.php',
  data:'list_id=' + $list_id.val(),
  success:function(data){
     //do something

     $list_id.val() = $list_id.val() + 1;
 }
 });

just cobbled this together quickly to give you an idea, so there might be some js errors

℉絮湮 2025-01-12 22:03:05

您可以使用 jQuery 的 getScript() 函数动态获取(和执行)脚本。例如:

$.getScript("/js/myscript.js");

You can use jQuery's getScript() function for getting (and executing) scripts dynamically. For example:

$.getScript("/js/myscript.js");
旧人 2025-01-12 22:03:05

由于您根本没有发布任何代码,因此我在这里进行了大胆的猜测。

在这种情况下,您不必重新加载 Javascript 代码,但您可以将数据存储在对象中。

请向我们展示一些 JS 代码来正确回答您的问题。

As you posted no Code at all I'm taking a wild guess here.

You don't have to reload your Javascript Code in this case but you could propably store your data in an object.

Please show us some JS Code to answer your question properly.

薄荷→糖丶微凉 2025-01-12 22:03:05

通常,最好在这里设计一个协议。您应该有一个函数来解析正在加载的任何“列表”,一个函数来解析 URL 哈希,以及一个函数来加载新列表。您可以使用 location.hash 获取 URL 哈希值。

这是一个简单的示例,期望列表具有某种格式。因此它将是基于协议的,因为在你的 Javascript 中应该只需要加载一次,并且它应该期望某种特定的格式,它能够在不添加任何依赖项的情况下进行解析。实际上需要依赖关系是可以的,但是如何/何时/何处都应该纳入协议中。

<a class="listLoader" href="#list.php?list=1">List 1</a>
<a class="listLoader" href="#list.php?list=2">List 2</a>
<a class="listLoader" href="#list.php?list=3">List 3</a>

$('.listLoader').onclick(function() {
    $.ajax({
        'success': function () {
            //Do what you gotta do with your lists
        },
        'url': location.hash.substring(1)
    });
});

Typically, it would be best to design a protocol here. You should have one function to parse any 'lists' being loaded, one function to parse the URL hash, and one function to load new lists. You can get the URL hash with location.hash.

Here's a simple example, that expects the list to be a certain format. So it would be protocol based, as in your Javascript should only need to be loaded once, and it should expect a certain specific format that it would be capable of parsing without any added dependencies. It would be okay to actually require dependencies, but how/when/where should all be worked into the protocol.

<a class="listLoader" href="#list.php?list=1">List 1</a>
<a class="listLoader" href="#list.php?list=2">List 2</a>
<a class="listLoader" href="#list.php?list=3">List 3</a>

.

$('.listLoader').onclick(function() {
    $.ajax({
        'success': function () {
            //Do what you gotta do with your lists
        },
        'url': location.hash.substring(1)
    });
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文