Question

正如标题所述，我试图在同一页面上多次使用相同的javascript函数。基本上，我有2个单独的下拉菜单，这些下拉菜单通过ajax调用用户，因此甚至会有新用户出现。（该站点基于不必总是重新加载。）无论如何，我目前对其进行设置的方式是这样的……

Javascript：

function getAllUsers() {
        (function getAllUsers() {
            $.ajax({
                url: 'staff/getAllUsers.php',
                success: function(data) {
                    $('#getAllUsers').html(data);
                },
                complete: function() {
                    // Schedule the next request when the current one's complete
                    setTimeout(getAllUsers, 5000);
                }
            });
        })();
    }
    getAllUsers();

function getAllUsers2() {
    (function getAllUsers2() {
        $.ajax({
            url: 'staff/getAllUsers.php',
            success: function(data) {
                $('#getAllUsers2').html(data);
            },
            complete: function() {
                // Schedule the next request when the current one's complete
                setTimeout(getAllUsers2, 5000);
            }
        });
    })();
}
getAllUsers2();

我确信这样做是不切实际的，因此，为什么现在我要一些指导。

这是下拉菜单中当前的HTML设置：

<select class="select2" name="user" id="getAllUsers" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

<select class="select2" name="user" id="getAllUsers2" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

显然，当加载ajax数据时，“正在加载用户...”选项已被替换。

尽管如此，我仍然确信存在更好的方法。

但是每当我尝试使用相同的javascript函数对html ...做类似的事情时，第二个只是停留在“正在加载用户...”

<select class="select2" name="user" id="getAllUsers" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

<select class="select2" name="user" id="getAllUsers" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

我认为，以目前使用多个函数的方式来进行操作，所有这些函数都会不断调用PHP文件，尤其是如果添加更多功能，则可能会导致加载时间问题。

谢谢您的帮助！

Answer 1

function getAllUsers() { $.ajax({ url: 'staff/getAllUsers.php', success: data => { $('#getAllUsers').html(data); $('#getAllUsers2').html(data); }, error: err => { //$('#getAllUsers').html("<option>test</option>"); //$('#getAllUsers2').html("<option>test</option>"); }, complete: () => { // Schedule the next request when the current one's complete setTimeout(getAllUsers, 5000); } }); } getAllUsers();都使用相同的端点，为什么不只在同一ajax请求中分配值？

可以这样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select2" name="user" id="getAllUsers" required>
  <option selected="true" disabled="disabled">Loading Users...</option>
</select>

<select class="select2" name="user" id="getAllUsers2" required>
  <option selected="true" disabled="disabled">Loading Users...</option>
</select>

import requests
from collections import abc
from bs4 import BeautifulSoup as bs

def nested_dict_iter(nested):
    for key, value in nested.items():
        if isinstance(value, abc.Mapping):
            yield from nested_dict_iter(value)
        else:
            yield key, value

r = requests.get('https://www.walgreens.com/store/c/walgreens-wal-zyr-24-hour allergy-tablets/ID=prod6205762-product')
soup = bs(r.content, 'lxml')
for script in soup.find_all('script'):
    if 'tier1Category' in script.text:
        j = json.loads(script.text[str(script.text).index('{'):str(script.text).rindex(';')])
        for k,v in list(nested_dict_iter(j)):
             if k == 'tier1Category':
                 print(v)

Answer 2

首先，您需要了解为什么它对您不起作用，然后找到解决方案。

问题是，您在两个单独的元素中使用了相同的元素ID，这不是严格禁止的，并且不会引发任何错误，但是它指向错误的实现。

当您尝试使用jQuery选择ID为getAllUsers的元素时，它知道应该只有一个这样的元素，因此它只会选择第一个。具有相同ID的任何其他元素都将被忽略。这就是为什么它仅适用于第一个的原因。

现在，让我们尝试寻找解决方案。

正如Miroslav Glamuzina所建议的那样，一种解决方案是正确且可行的，但不够灵活。

另一种解决方案是使用选择器来选择不是ID的多个元素。最好的选择是使用元素的类，这对于您的两个（或更多）select元素而言是唯一的。因此，如果您想将来再添加一个，则不必触摸JS代码，而只需触摸HTML部分。

您可以执行以下操作：

HTML

<select class="select2 getAllUsers" name="user" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

<select class="select2 getAllUsers" name="user2" required>
    <option selected="true" disabled="disabled">Loading Users...</option>
</select>

（请注意，我还更改了第二个name的{{1}}属性，以防止将来出现问题）

JavaScript

select

警告！
如果您打算公开使用此脚本，则应注意此脚本中的安全性问题。

此脚本已针对XSS攻击打开。因为，您是在请求远程内容并将其内容应用为HTML，而没有任何数据验证或转义。

在您的情况下，我建议在PHP脚本中生成JSON，其中包含用户列表和所需的所有数据，然后在JavaScript上，使用JSON列表中的数据创建(function getAllUsers() { $.ajax({ url: 'staff/getAllUsers.php', success: function(data) { $('.getAllUsers').html(data); }, complete: function() { // Schedule the next request when the current one's complete setTimeout(getAllUsers, 5000); } }); }());元素

您应该执行以下操作：

假设这是从option接收到的JSON：

staff/getAllUsers.php

JavaScript：

[
    {"id": 14, "name": "User 1"},
    {"id": 16, "name": "User 2"},
    {"id": 17, "name": "User 3"}
]

希望您可以从中学到一些东西。
祝你好运！

JavaScript函数只能运行一次？尝试多次使用同一功能

2 个答案: