flask13 use AJAX

html

<input type="button" name="btn-test" id="btn-querystring_to_text" value="get, 서버 URI: /main/querystring_to_text" />

자바스크립트

$("#btn-querystring_to_text").on("click", function () {
    ajax_get_querystring_to_text();
});
function ajax_get_querystring_to_text(){
    var URI = "/main/querystring_to_text"
    var PARAM1 = "?string_data="+"hello";
    var PARAM2 = "&int_data="+3;
    var URI = URI + PARAM1 + PARAM2

    var request = $.ajax({
        type: 'GET',
        url: URI,
        dataType: 'text', //response dataType
        timeout: 30000, //millisecond unit
        success: function(objs) {
            alert("ajax HTTP 통신 성공");
             $("#response_result").text("ajax_get_querystring_to_text :" + objs);
        },
        error : function() {
            alert("ajax HTTP 통신 실패. 관리자에게 문의하세요.");
        }
    });
} //end of ajax_get_querystring_to_text

@bp.route('/querystring_to_text', methods=['GET'])
def querystring_to_text():
    print('Request URL: http://127.0.0.1:8888/main/querystring_to_text')

    string_value = request.args.get('string_data')
    int_value = request.args.get('int_data')

    response = "success : " + string_value + " , " + int_value
    return response

html

<input type="button" name="btn-test" id="btn-get_query_to_json" value="get, 서버 URI:  /main/get_query_to_jsondb" />


자바스크립트

$("#btn-get_query_to_json").on("click", function () {
    ajax_get_query_to_json();
});

function ajax_get_query_to_json(){
    //보내기 : URI?키이름=값&키이름1=값1"
    //플라스크 받기 : GET HTTP Method + reuest.args.get("키값")
    //data 속성은 사용 하지 않는다.

    var URI = "/main/get_query_to_jsondb";
    var PARAMETER="?username=apple&userid=33";
    URI = URI + PARAMETER;

    $.ajax({
        type: 'GET',
        url: URI,
        // data:  data를 사용하지 않는다.
        contentType: 'text/html;charset=utf-8',
        dataType: 'json',
        cache: false,
        async: true,
        timeout: 30000,

        success: function(objs) {
            alert("ajax 기반 HTTP 통신 성공");
            console.log("objs=", objs);
            console.log("objs[0]=", objs[0]);
        },
        error : function(jqXHR) {
            alert("ajax HTTP 통신 실패. 관리자에게 문의하세요.");
            alert(jqXHR)
        }
    });
} //end of ajax_get_query_to_json

@bp.route('/get_query_to_jsondb', methods=['GET'])
def get_query_to_jsondb():
    print('Request URL: http://127.0.0.1:8888/main/get_query_to_jsondb')

    client_username = request.args.get("username")
    client_userid = request.args.get("userid")

    row_list = model.User.query.filter(
        model.User.username == client_username,
        model.User.userid == client_userid).all()

    user_record = []
    for i, row in enumerate(row_list):
        print(f"{i} - row = {row.serialize}")
        user_record.append(row.serialize)

    response = json.dumps([user_record], default=str, ensure_ascii=False)
    return response, 201

html

<p><label>서버 요청 문자열:</label> <input type = "text" id="input_value_string" placeholder = "공백 없이 문자열을 입력 하세요." /></p>
<p><label>서버 요청 정수:</label> <input type = "number" id="input_value_int" placeholder = "공백 없이 정수를 입력 하세요." /></p>
<p><input type="button" value="서버로 전송" id="btn-ajax_get_url">


자바스크립트

$("#btn-ajax_get_url").on("click", function () {
    ajax_get_URL();
});

function ajax_get_URL(){
alert("ajax_get_URL.");
    var string_data = $("#input_value_string").val();
    var int_data = $("#input_value_int").val();

    var URI = "/main/ajax_url"
    var PARAM1 = "/" + string_data;
    var PARAM2 = "/" + int_data;

    var URI = URI + PARAM1 + PARAM2

    $.ajax({
        type: 'GET',
        url: URI,
        // data없음 : URL 파라메터로 보내기 때문에 주석처리한다.,
        contentType: 'text/html;charset=utf-8',
        dataType: 'text',

        cache: false,
        async: false,
        timeout: 30000,

        success: function(data) {
            alert("ajax url 통신 성공");
            alert(data)
        },
        error : function(e) {
            alert("ajax HTTP 통신 실패. 관리자에게 문의하세요.");
            alert(e)
        }
    });
} // end of ajax_get_URL

@bp.route('/ajax_url/<string_value>/<int:int_value>', methods=['POST', 'GET'])
def get_url(string_value, int_value):
    print('Request URL: http://127.0.0.1:8888/main/ajax_url')

    print(f"string value = {string_value}")
    print(f"int value = {int_value}")

    response = f"SUCCESS = {string_value}, {int_value}"
    return response