星级引导数据输入到烧瓶

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 后端

@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; 正确获取您的值并将您发布的数据修改为像data: {'id': {{result.id}}, 'rating': rating}一样传达id和等级。

切勿使用非唯一 ID。由于围绕这一点的混乱，您当前的 jQuery 事件侦听器毫无意义，并且您的 rate_id 变量未定义，因为document.getElementById("{{result.id}}") 获取该 id 的第一个引用，这是一个没有属性“值”的 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>