HTML AJAX post 사용 방법 (feat. Flask API Server[Python])

돌크리트 2019. 5. 20. 15:20

[html]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
        <script type=text/javascript src="{{url_for('static', filename='jQuery.js') }}"></script>
        <script>
        function test(){
                var text_data = $('#SensorID').val();
                $.ajax({
                        type : 'POST',                                  <!--[GET / POST] 둘중 하나 선택-->
                        url : 'http://192.168.0.2:5000/request',
                        data : {
                               SensorID:text_data                       <!--{key : "value"}-->
                        },
                        dataType : 'JSON',
                        success : function(result){
                                alert("result = "+ result);
                        },
                        error : function(xtr,status,error){
                                alert(xtr +":"+status+":"+error);
                        }
                });
        }
        </script>
        <body>
                <p>검색하고자 하는 아이템을 입력하세요.</p>
                <input type = "text" name="SensorID" id="SensorID"/>
                <input type = "button" value = "데이터 요청" onclick="test()"/>
        </body>
</html>

 

[Flask API Server]

1
2
3
4
5
6
7
8
9
10

@app.route('/request', methods =['POST'])
def query():
    value = request.form['SensorID']
    sql = "select esnData from ESensorTable where esnSensorId ='"+value+"'"
    curs.execute(sql)
    data_list=curs.fetchall()       
    data= data_list[0]              
    jsondata=json.dumps(data[0])   <!--json문법으로 바꿔준다.-->
    
    return jsondata

 