如何使用Ajax制作一个按钮，使用相同的表单数据重新掷骰子？

2024-09-30 14:34:21 发布

您现在位置：Python中文网/ 问答频道 /正文
7722 3

我正在为我的应用程序使用Flask，现在我正在学习一些Javascript。 我正在做一个骰子应用程序，你在其中提交一些值（骰子数等），然后掷骰子。我想重新掷相同的骰子，并用按钮重新提交相同的值。 有人说我可以用jquery和ajax实现这一点，但我没有找到正确的方法。我是否应该只重新加载卷，而不更改其他卷？我是否应该重新加载该卷并以JSON的形式调用提交数据？我是否应该复制重新加载和确认重新提交数据的浏览器过程？ 以下是视图的代码：

@app.route('/juego', methods=['GET'])
def juego():
    form = CumuloForm()
    if form.validate_on_submit():
        return redirect(url_for('resjuego'))
    return render_template('juego.html', title='A ver!', form=form)

@app.route('/resjuego', methods=['GET','POST'])
def resjuego():
    form = CumuloForm()
    signo=request.form.get('signo')
    pool=request.form.get('pool')
    magnitud=request.form.get('magnitud')
    x = int(pool)
    m = int(magnitud)
    i=0
    roll=Dado.signar(x)
    res=roll
    y=rnd.randint(1,6)
    entropia=Dado.signar(y)
    thislist=[]
    thislist2=[]
    for i in range(x):
        thislist.append(Aspecto.aspectario(signo, res[0+i]))
        zumbi = thislist
    for i in range(y):
        thislist2.append(Aspecto.aspectario(signo, entropia[0+i]))
        zumbi2 = thislist2
    totalasp=zumbi+zumbi2
    conj = 2*(zumbi.count("conjunción"))
    semsex = 0*(zumbi.count("semisextil"))
    sext = 1*(zumbi.count("sextil"))
    cuad = -1*(zumbi.count("cuadratura"))
    trig = 1*(zumbi.count("trígono"))
    quinc = 0*(zumbi.count("quincuncio"))
    opos = -2*(zumbi.count("oposición"))

    conj2 = 2*(zumbi2.count("conjunción"))
    semsex2 = 0*(zumbi2.count("semisextil"))
    sext2 = 1*(zumbi2.count("sextil"))
    cuad2 = -1*(zumbi2.count("cuadratura"))
    trig2 = 1*(zumbi2.count("trígono"))
    quinc2 = 0*(zumbi2.count("quincuncio"))
    opos2 = -2*(zumbi2.count("oposición"))

    éxitos = conj + semsex + sext + cuad + trig + quinc + opos
    éxitosent= conj2 + semsex2 + sext2 + cuad2 + trig2 + quinc2 + opos2
    if éxitos + m <=0:
        rest="fallo"
    if éxitos >=0:
        rest="éxito"
    if éxitos <=0 and éxitos + m >=0:
        rest="adverso"
    des_exitos = descriptorc(rest)

    T1 = struli(zumbi)
    T2 = struli(zumbi2)
    res=struli(res)
    entropia=struli(entropia)
    

    return render_template('resjuego.html', title='Caosmos', lanzarcum=res, signo = signo, entropia=entropia, aspecto=T1, aspecto2=T2, éxitos=éxitos, éxitosent = éxitosent, des_exitos=des_exitos)

更新：这是查询的后面

@app.route('/back_retirada')
def back_retirada():
    signo = request.form.get('signo')
    pool =  request.form.get('pool')
    magnitud = request.form.get('magnitud')
    return jsonify(signo=signo, pool=pool, magnitud=magnitud)

这是html（我试图在其中应用Ajax）：

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block app_content %}
<head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type=text/javascript>
            $ function() {
                $('#re_tirada').on('click', 
                $.getJSON('/back_retirada', {signo: signo, magnitud:magnitud, pool: pool}, function(data) {$("#result").text(data);
                }
                )
            }

                
        </script>
    </head>

        <h1>✹     Tu ascendente y magnitud    ✹</h1>
        <p class='formula'> {{signo}} </p>
        <div>
            <h1>✹ Tu cúmulo astral ✹</h1>
            <p class='formula' href=# id=result> {{lanzarcum}} <p>  
        </div>
        <div>
            <h1>✹ Entropía ✹</h1>
            <p class='formula'> {{entropia}} <p>   
        </div>
        <div>
        <h1>✹ Cálculo de éxitos✹</h1>

        <p class = 'instrucciones'>Cúmulo: {{aspecto}} ✹ puntaje: {{éxitos}}<p>
        <p class = 'instrucciones'>Entropía: {{aspecto2}} ✹ puntaje: {{éxitosent}}<p>
        <p class = 'instrucciones'>
            {{des_exitos}} <p>
        <br>
        </div>

<div class='text-center'>
    <form>
        <span href=# id=re_tirada><button type="submit" value="submit">¡Lanza otra vez!</button> </span>
    </form>
</div>
<br>
<div class='text-center'>
    <form action= " {{(url_for('juego'))}}" method="get">
    <button type="submit" value="submit">Vuelve atrás</button>
    </form>
</div>
<br>
<div class='text-center'>
    <form action= " {{(url_for('index'))}}" method="get">
    <button class="home" type="submit" value="submit"> Al inicio...</button>
</form>

{% endblock %}

这是我的应用程序：https://astrodados.herokuapp.com/juego

谢谢大家!


Tags： divformgetrequestcounth1classsubmit
1条回答
网友
1楼 · 发布于 2024-09-30 14:34:21

您不必重新加载页面。有一个按钮来掷骰子，当用户单击该按钮时，您可以使用Ajax将其提交到后端（flask应用程序）

如果使用Ajax，则不必重新加载页面，页面基本保持原样（也意味着不会丢失用户数据）。如果用户希望再次掷骰子，可以再次单击该按钮，然后再次使用Ajax提交内容

在第二次滚动之后，您可以禁用按钮（如果您只希望用户能够滚动按钮两次），或者可以重新加载页面

根据OP添加的评论更新答案

  1. jquery.bind已被弃用。您应该使用jquery.on（“单击”）。见documentation
  2. 您正在调用Jquery.getJSON，它用于返回JSON数据，但您正在通过render_模板返回html页面。有关Ajax调用的结构，请参见this answer

相关问题 更多 >

    编程相关推荐