js怎么实现点击下一页的按钮播放音效

Posted 2023-04-19

js怎么实现点击下一页的按钮播放音效

参考技术A 给下一页按钮绑定个事件，当点击的时候执行对应的函数，函数里面执行音乐播放的api即可。本回答被提问者采纳 参考技术B 点击下一页时，让mp3自动播放就行了追问

能提供下代码吗，我的代码在window下直接开html网页有声音，但在pycharm中运行django项目时报无法解析avoid音频

追答

无法解析是因为你音频格式问题，很简单啊，点击事件你会写吧？自动播放音频你会吧？在点击事件里执行自动播放音频就行了啊

将数据从按钮传输到下一页的帖子表单。 Django的

我试图将分配给我的按钮的上一页的get参数传递到下一页将其添加到我的表单并将其保存在我的数据库中。我的代码看起来像这样：

views.朋友

def massage_order(request):
    parametr_html_product_name = request.GET('parameter')
    if request.method == 'POST' and 'btn_massage_order' in request.POST:
        ordering_form = OrderingMassageForm(data=request.POST)
        if ordering_form.is_valid():
        massage_product = parametr_html_product_name
        [...]
    else:
        ordering_form = OrderingMassageForm()

templates.html

<a href="{% url 'app:massage_order' %}?parameter={{ product.name }}&parameter_1={{ product.price }}&parameter_2={{ product.time }}&parameter_3={{ masseur.name }}">
    <div class="btn-group btn-action-label" role="group" aria-label="Like">
        <div class="btn btn-sm btn-outline-primary btn-label">{{ product.price }} zł/ {{ product.time }} min</div>
        <button type="button" class="btn btn-sm btn-primary btn-action">
            <span>Zamów masaż</span>
        </button>
    </div>
</a>

但是每次'Multi Value Dict Key Error'我都会收到一个错误，我找到了他的解决方案parametr_html_product_name = request.GET.get('parameter', False)，但在这种情况下，我的变量是False，而不是产品的名称（它的预期）。如何将变量'html parameter product name'传递给我的表单？我试图将它添加到列表中（也没有正面效果）。任何帮助将不胜感激。

为什么，尽管在Django列表中添加了一个变量，但是在我的表单中没有看到它？

list = [parametr_html_masseur_name, parametr_html_product_name]

[...]
massage_product = list[1]
[...]

编辑

templates.html

<form action="." method="post">
    <input type="hidden" name="name" value="{{ product.name }}">
    <input type="hidden" name="name" value="{{ product.price }}">
    <input type="hidden" name="name" value="{{ product.time }}">
    {% csrf_token %}
    <div class="btn-group btn-action-label" role="group" aria-label="Like">
        <div class="btn btn-sm btn-outline-primary btn-label">{{ product.price }} zł/ {{ product.time }} min</div>
        <button type="submit" name="hidden_btn" class="btn btn-sm btn-primary btn-action">
        <span>Zamów masaż</span>
        </button>
    </div>
</form>

forms.朋友

class HiddenOrderingMassageForm(forms.Form):
    product_name = forms.CharField(widget=forms.HiddenInput)
    price = forms.IntegerField(widget=forms.HiddenInput)
    time = forms.IntegerField(widget=forms.HiddenInput)

views.朋友

if request.method == 'POST' and 'hidden_btn' in request.POST:
    hidden_form = HiddenOrderingMassageForm(request.POST)
    if hidden_form.is_valid():
        product_name = hidden_form.cleaned_data['product_name']
        return HttpResponseRedirect(reverse('app:massage_order', args=[product_name]))
else:
    hidden_form = HiddenOrderingMassageForm()

URLs.朋友

url(r'^massage_order/(?P<text>[w-]+)/$', views.massage_order, name='massage_order')

答案

在您当前的代码中，您正在使用GET（因为所有内容都包含在<a>标记中），但您希望这些值在request.POST中。我认为最好的方法是使用隐藏输入的表单，根据需要使用所有值，并在后端验证它们，就像使用表单一样。所以，而不是使用a，改为以下内容：

<form action="{% url 'app:massage_order' %}" method="post">
    <input type="hidden" name="name" value="product_name">
    ...
    {% csrf_token %}
    <div class="btn-group btn-action-label" role="group" aria-label="Like">
        <div class="btn btn-sm btn-outline-primary btn-label">{{ product.price }} zł/ {{ product.time }} min</div>
        <button type="button" class="btn btn-sm btn-primary btn-action">
            <span>Zamów masaż</span>
        </button>
    </div>
</form>

或者，不是在模板中手动创建表单，而是可以指定一个OrderingMassageForm，它将所有字段的小部件设置为隐藏输入，即：

class HiddenOrderingMassageForm(forms.Form):
    product_name = forms.CharField(widget=forms.HiddenInput)

然后以通常的方式放入模板：

<form action="{% url 'app:massage_order' %}" method="post">
    {{ hidden_form }}
    {% csrf_token %}
    <div class="btn-group btn-action-label" role="group" aria-label="Like">
        <div class="btn btn-sm btn-outline-primary btn-label">{{ product.price }} zł/ {{ product.time }} min</div>
        <button type="button" class="btn btn-sm btn-primary btn-action">
            <span>Zamów masaż</span>
        </button>
    </div>
</form>