Question

经过很多帮助和许多尝试获得这个功能后，我现在已经这样做了。如果其他人也想要这样做，下面的代码应该足够了。

Jinja2模板

<div class="panel-footer">
  <label for="input-2" class="control-label">My Rating:</label>
<input id="stars_{{result.id}}" name="input-2" class="rating rating-loading" data-min="0" data-max="10" data-step="0.1" data-stars="10" data-size="xs"onchange="updateStars('{{result.id}}')" >
</div>
   <form action="{{url_for('delete_f', id=result.id)}}" method="post">
        <input type="hidden" name="_method" value="DELETE">
        <input type="submit" value="Delete" class="btn btn-danger">
      </form>
</div>

的JavaScript

    {% for result in results %}
<script type="text/javascript">
    function updateStars(id) {
       var rating = document.getElementById("stars_" + id).value;
       $.ajax({
           url : '/rate_movie',
           headers: {"Content-Type": "application/json"},
           type : 'POST',
           dataType: 'json',
           data : JSON.stringify{'id': 'id', 'rating': rating}
           });
};
</script>
{% endfor %}

Flask Backend

@app.route('/rate_movie',methods=['GET','POST'])
def rate_movie():

    # Create cursor
if request.method == 'POST':

    data = request.get_json(force=True)
    rating = data['rating']
    id = data['id'] 
    cursor = cnx.cursor()
        # Execute
    #cursor.execute("UPDATE favourites SET rating=5  WHERE id =49") ## Works 
    cursor.execute("UPDATE favourites SET rating=%s  WHERE id =%s",(rating,id))
    #("INSERT INTO favourites(rating)VALUES(%s) WHERE id =%s" ,(rating,id))
        # Commit to DB
    cnx.commit()

        #Close connection
    cursor.close()

    flash('Movie Rated', 'success')
return redirect(url_for('my_f'))

Answer 1

这里存在许多问题，但您的第一个大问题是您使用的是非唯一ID。让你的ID独一无二，你可以正确地引用隐藏输入的值，修复你的jQuery监听器看起来像$('#actually_uniqe_id').on('change', function (){...}而不是当前的混乱，你可以用var rating = document.getElementById("#actually_unique_id").value;正确地获得你的价值并修改您发布的数据可以传达ID和data: {'id': {{result.id}}, 'rating': rating}等等。

永远不要使用非唯一ID。由于围绕这一点的混淆，你当前的jQuery事件监听器是没有意义的，并且你的rate_id变量是未定义的，因为document.getElementById("{{result.id}}")获取该id的第一个引用，这是一个没有属性'value'的div。

编辑：此外，由于您有一个循环，可能会产生大量的评级输入，因此请删除事件监听器，例如：

<input id="value_{{result.id}}" type="hidden" onchange="updateStars('{{result.id}}')" />

和

<script type="text/javascript">
    function updateStars(id) {
       var rating = document.getElementById("value_" + id).value;
       $.ajax({
           url : '/dashboard',
           type : 'POST',
           data : {'id': '{{result.id}}', 'rating': rating}
       });
</script>

星级评定引导数据输入到Flask

1 个答案: