Get variables from post method on Python

I made a python script that run some tasks, but i wanted it to launch when a client (frontend form) send a POST request to the server. So then I can get the variables from the client and run my script using that variable.

I think I will need to define a server on my python script that accept a post request, but I don't know where to start here. Can you help me a little bit with this?

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

you need to make an Ajax call to your python server to request information from javascript.

– Kunal Mukherjee
Nov 23 '18 at 7:23

@KunalMukherjee ok thank you, but i need to send data from my client to python server

– Joangel De La Rosa
Nov 23 '18 at 13:36

add a comment |

I think I will need to define a server on my python script that accept a post request, but I don't know where to start here. Can you help me a little bit with this?

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

you need to make an Ajax call to your python server to request information from javascript.

– Kunal Mukherjee
Nov 23 '18 at 7:23

@KunalMukherjee ok thank you, but i need to send data from my client to python server

– Joangel De La Rosa
Nov 23 '18 at 13:36

add a comment |

I think I will need to define a server on my python script that accept a post request, but I don't know where to start here. Can you help me a little bit with this?

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

I think I will need to define a server on my python script that accept a post request, but I don't know where to start here. Can you help me a little bit with this?

javascript python rest api

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

asked Nov 22 '18 at 23:37

Joangel De La Rosa

355

you need to make an Ajax call to your python server to request information from javascript.

– Kunal Mukherjee
Nov 23 '18 at 7:23

@KunalMukherjee ok thank you, but i need to send data from my client to python server

– Joangel De La Rosa
Nov 23 '18 at 13:36

add a comment |

you need to make an Ajax call to your python server to request information from javascript.

– Kunal Mukherjee
Nov 23 '18 at 7:23

@KunalMukherjee ok thank you, but i need to send data from my client to python server

– Joangel De La Rosa
Nov 23 '18 at 13:36

you need to make an Ajax call to your python server to request information from javascript.

– Kunal Mukherjee
Nov 23 '18 at 7:23

@KunalMukherjee ok thank you, but i need to send data from my client to python server

– Joangel De La Rosa
Nov 23 '18 at 13:36

add a comment |

1 Answer
1

active

oldest

votes

I have created a simple Flask server which appends person information into the list which is received from the client side.

Here's theapp.py which contains the flask Python server:

import os

import uuid



from flask import Flask, jsonify, request

from flask_cors import CORS



# instantiate the app

app = Flask(__name__)

app.config.from_object(__name__)



# enable CORS

CORS(app)



#static list containing persons

persons = 



#test check route

@app.route('/status', methods=['GET'])

def status():

    return jsonify(dict({ 'message': 'Hello world'}))





@app.route('/person', methods=['POST'])

def add_person():

    post_data = request.get_json()

    response_object = dict({

            'id': uuid.uuid4().hex,

            'name': post_data.get('name'),

            'age': post_data.get('name')

        })

    persons.append(response_object)

    return jsonify(response_object), 201





@app.route('/person', methods=['GET'])

def get_persons():

    return jsonify(persons), 200



@app.route('/person/<person_id>', methods=['GET'])

def get_person(person_id):

    person = list(filter(lambda x: x['id'] == person_id, persons))

    return jsonify(person), 200



if __name__ == '__main__':

    app.run(debug=True)

Save the script and run it using:

python app.py

This is a sample form that will post the name and age fields to your flask API:

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

Hope that gives you a head start!

Suggested Reading:

JS Fetch API

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

1

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53439105%2fget-variables-from-post-method-on-python%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

I have created a simple Flask server which appends person information into the list which is received from the client side.

Here's theapp.py which contains the flask Python server:

import os

import uuid



from flask import Flask, jsonify, request

from flask_cors import CORS



# instantiate the app

app = Flask(__name__)

app.config.from_object(__name__)



# enable CORS

CORS(app)



#static list containing persons

persons = 



#test check route

@app.route('/status', methods=['GET'])

def status():

    return jsonify(dict({ 'message': 'Hello world'}))





@app.route('/person', methods=['POST'])

def add_person():

    post_data = request.get_json()

    response_object = dict({

            'id': uuid.uuid4().hex,

            'name': post_data.get('name'),

            'age': post_data.get('name')

        })

    persons.append(response_object)

    return jsonify(response_object), 201





@app.route('/person', methods=['GET'])

def get_persons():

    return jsonify(persons), 200



@app.route('/person/<person_id>', methods=['GET'])

def get_person(person_id):

    person = list(filter(lambda x: x['id'] == person_id, persons))

    return jsonify(person), 200



if __name__ == '__main__':

    app.run(debug=True)

Save the script and run it using:

python app.py

This is a sample form that will post the name and age fields to your flask API:

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

Hope that gives you a head start!

Suggested Reading:

JS Fetch API

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

1

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

add a comment |

I have created a simple Flask server which appends person information into the list which is received from the client side.

Here's theapp.py which contains the flask Python server:

import os

import uuid



from flask import Flask, jsonify, request

from flask_cors import CORS



# instantiate the app

app = Flask(__name__)

app.config.from_object(__name__)



# enable CORS

CORS(app)



#static list containing persons

persons = 



#test check route

@app.route('/status', methods=['GET'])

def status():

    return jsonify(dict({ 'message': 'Hello world'}))





@app.route('/person', methods=['POST'])

def add_person():

    post_data = request.get_json()

    response_object = dict({

            'id': uuid.uuid4().hex,

            'name': post_data.get('name'),

            'age': post_data.get('name')

        })

    persons.append(response_object)

    return jsonify(response_object), 201





@app.route('/person', methods=['GET'])

def get_persons():

    return jsonify(persons), 200



@app.route('/person/<person_id>', methods=['GET'])

def get_person(person_id):

    person = list(filter(lambda x: x['id'] == person_id, persons))

    return jsonify(person), 200



if __name__ == '__main__':

    app.run(debug=True)

Save the script and run it using:

python app.py

This is a sample form that will post the name and age fields to your flask API:

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

Hope that gives you a head start!

Suggested Reading:

JS Fetch API

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

1

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

add a comment |

I have created a simple Flask server which appends person information into the list which is received from the client side.

Here's theapp.py which contains the flask Python server:

import os

import uuid



from flask import Flask, jsonify, request

from flask_cors import CORS



# instantiate the app

app = Flask(__name__)

app.config.from_object(__name__)



# enable CORS

CORS(app)



#static list containing persons

persons = 



#test check route

@app.route('/status', methods=['GET'])

def status():

    return jsonify(dict({ 'message': 'Hello world'}))





@app.route('/person', methods=['POST'])

def add_person():

    post_data = request.get_json()

    response_object = dict({

            'id': uuid.uuid4().hex,

            'name': post_data.get('name'),

            'age': post_data.get('name')

        })

    persons.append(response_object)

    return jsonify(response_object), 201





@app.route('/person', methods=['GET'])

def get_persons():

    return jsonify(persons), 200



@app.route('/person/<person_id>', methods=['GET'])

def get_person(person_id):

    person = list(filter(lambda x: x['id'] == person_id, persons))

    return jsonify(person), 200



if __name__ == '__main__':

    app.run(debug=True)

Save the script and run it using:

python app.py

This is a sample form that will post the name and age fields to your flask API:

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

Hope that gives you a head start!

Suggested Reading:

JS Fetch API

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

I have created a simple Flask server which appends person information into the list which is received from the client side.

Here's theapp.py which contains the flask Python server:

import os

import uuid



from flask import Flask, jsonify, request

from flask_cors import CORS



# instantiate the app

app = Flask(__name__)

app.config.from_object(__name__)



# enable CORS

CORS(app)



#static list containing persons

persons = 



#test check route

@app.route('/status', methods=['GET'])

def status():

    return jsonify(dict({ 'message': 'Hello world'}))





@app.route('/person', methods=['POST'])

def add_person():

    post_data = request.get_json()

    response_object = dict({

            'id': uuid.uuid4().hex,

            'name': post_data.get('name'),

            'age': post_data.get('name')

        })

    persons.append(response_object)

    return jsonify(response_object), 201





@app.route('/person', methods=['GET'])

def get_persons():

    return jsonify(persons), 200



@app.route('/person/<person_id>', methods=['GET'])

def get_person(person_id):

    person = list(filter(lambda x: x['id'] == person_id, persons))

    return jsonify(person), 200



if __name__ == '__main__':

    app.run(debug=True)

Save the script and run it using:

python app.py

This is a sample form that will post the name and age fields to your flask API:

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

Hope that gives you a head start!

Suggested Reading:

JS Fetch API

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

// Write the following in index.js

window.onload = () => {





  document.querySelector('#btnSubmit').addEventListener('click', function(event) {



    const pName = document.querySelector('#pName').value;

    const pAge = document.querySelector('#pAge').value;



    if (!pName || !pAge) {

      alert('Please enter all fields to continue!');

      return;

    }



    const objectToSend = {

      name: pName,

      age: pAge

    };



    fetch('http://localhost:5000/person', {

        method: 'POST',

        mode: 'cors',

        body: JSON.stringify(objectToSend)

        headers: new Headers({

          'Content-Type': 'application/json',

          'Access-Control-Allow-Origin': '*'

        })

      })

      .then(function(response) {

        return response.json()

      })

      .then(function(data) {

        console.log(data);

      })

      .catch(function(err) {

        console.err(err);

      });



  });



}

<!DOCTYPE HTML>

<HTML>



<!-- <script src="index.js"> -->



<BODY>

  <FORM name="myform">

    <label>Name: <input id="pName" type="text" placeholder="Enter name"></label>



    <label>Age: <input type="number" id="pAge" placeholder="Enter age"></label>



    <input type="button" id="btnSubmit" value="Submit">



  </FORM>



</BODY>



</HTML>

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

edited Nov 23 '18 at 14:59

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

answered Nov 23 '18 at 14:50

Kunal Mukherjee

1,3162825

1

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

add a comment |

1

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

Awesome! thank you so much for your help now i know where to start

– Joangel De La Rosa
Nov 23 '18 at 14:57

@JoangelDeLaRosa no problem :)

– Kunal Mukherjee
Nov 23 '18 at 14:58

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk