Skip to main content
HashnodeOllie Seongyong Kim

Command Palette

Search for a command to run...

Make API

Published
•3 min read•View as Markdown
O
Ollie seongyong Kim
Part of seriesWeb developing

GET and POST requests

  • Get ; normally used to read data e.g. to see a movie list

  • Post ; normally used to create, update, or delete data. e.g. sign up, change a password

Get request

Jquery import

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  • add Jquery import code under <title> in index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button>버튼을 만들자</button>
</body>
</html>

  • add <script> and </script> under Jquery import code.

  • define a function

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {

        }
    </script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button onclick="hey()">버튼을 만들자</button>
</body>
</html>
  • copy and paste Get request check Ajax code below in the function.

Get request check Ajax code

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            $.ajax({
                type: "GET",
                url: "/test?title_give=봄날은간다",
                data: {},
                success: function (response) {
                    console.log(response)
                }
            })
        }

    </script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button onclick="hey()">버튼을 만들자</button>
</body>
</html>
  • copy and paste Get request API code in app.py file.

Get request API

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)
  • add request and jsonify after import
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)
  • now, open the Console and click on the button in the page. image.png

Post request

Post request check Ajax code

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })
  • Copy and paste the Ajax code above in function hey()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {

        }

    </script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button onclick="hey()">버튼을 만들자</button>
</body>
</html>

to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response)
                }
            })
        }

    </script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button onclick="hey()">버튼을 만들자</button>
</body>
</html>
  • copy and paste Post request API code in app.py file.

    Post request API code

    @app.route('/test', methods=['POST'])
def test_post():
 title_receive = request.form['title_give']
 print(title_receive)
 return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '요청을 잘 받았어요'})

if __name__ == '__main__':
   app.run('0.0.0.0',port=5000,debug=True)
  • click the button and chekc out the Console. image.png

  • add ['msg'] next to response in console.log

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
      function hey() {
          $.ajax({
              type: "POST",
              url: "/test",
              data: {title_give: '봄날은간다'},
              success: function (response) {
                  console.log(response)
              }
          })
      }

  </script>
</head>
<body>
<h1>나의 첫 웹페이지!</h1>
<button onclick="hey()">버튼을 만들자</button>
</body>
</html>

to

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function hey() {
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response['msg'])
                }
            })
        }

    </script>
</head>
<body>
  <h1>나의 첫 웹페이지!</h1>
  <button onclick="hey()">버튼을 만들자</button>
</body>
</html>
  • It only shows the message. image.png

Comments

Join the discussion

No comments yet. Be the first to comment.

Web developing

Part 37 of 44
Up next

Project. Mars- setting

create a new project in Mars folder. New directory for static, and templates and Python file named app.py Install flask, pymongo, and dnspython package Make a structure. Copy and paste Mars- app.py code in app.py file. Mars- app.py from flask...

More from this blog

Ollie Seongyong Kim

85 posts