2017-05-31 21 views
1

我有一个圆滑块与客户端或网页上的滑块值。当用户更改滑块位置时,客户端必须将该值发送到服务器。在这里我使用python烧瓶作为服务器端。所以值必须从j Query或java脚本发送到瓶子。我试着用下面的代码。但是当我使用Ajax时,网页变成空白。它不显示滑块。如果我删除发送的Ajax方式,则会出现滑块,但值不会发送到服务器。如何将jQuery或JavaScript的滑块值发送到python Flask?

客户端:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery roundSlider - JS Bin</title> 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.css"> 
<script src="//cdn.jsdelivr.net/jquery.roundslider/1.0/roundslider.min.js"></script> 
</head> 
<body> 
<div id="slider"></div> 
<div id="slide"></div> 
<script> 
$(document.ready(function(){ 
var value; 
$("#slider").roundSlider({ 
    sliderType: "min-range", 
    change: function(){ 
    var obj1 = $("#slider").data("roundSlider"); 
    value = obj1.getValue(); 
$("#slide").html(value); 
}); 
$.ajax({ 
    type: 'POST', 
    url: "{{url_for('test')}}", 
    contentType: 'application/json;charset=UTF-8', 
    data: {'data':value} 
}); 
}); 

</script> 
</body> 

</html> 

服务器端:

def flask(): 
      connection() 
      app = Flask(__name__, template_folder='Templates') 
      @app.route('/test/', methods=['GET', 'POST']) 
      def test(): 
        if request.method == "POST": 
          value=request.json['data'] 
          print(value) 
        return render_template('roundslider1.html') 

      if __name__ == "__main__": 
        app.run(host='192.168.42.1',port=2030, debug=True) 

回答

0

阅读一些更单证后,我使用的下面的代码来从j查询发送可变到烧瓶服务器。

客户端:

var value; 
$("#slider").roundSlider({ 
    sliderType: "min-range", 
    change: function(){ 
    var obj1 = $("#slider").data("roundSlider"); 
    value = obj1.getValue(); 
    $.getJSON('/valueofslider', { 
    a:value 
    }); 

服务器端:

@app.route('/valueofslider') 
def slide(): 
    a = request.args.get('a') 
    print (a) 
相关问题