Python Simple Asynchronous Post request with Jquery Example

Introduction: Asynchronous communication between the front-end and back-end is a crucial aspect of modern web development. In this blog post, we'll explore how to create a simple web page using Python, jQuery, and HTML to perform an asynchronous POST request. Specifically, we'll focus on dynamically posting dropdown values from the front-end to a Python script and updating the page with the returned value.

Setting up the HTML Page: To begin, let's set up our HTML page. We'll create a form with two dropdowns, a button, and a label to display the result. Here's the code:

html
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <select id="dropdown1" name="dropdown1">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <select id="dropdown2" name="dropdown2">
      <option value="optionA">Option A</option>
      <option value="optionB">Option B</option>
      <option value="optionC">Option C</option>
    </select>
    <button type="submit">Post</button>
    <label id="resultLabel"></label>
  </form>

  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(event) {
        event.preventDefault(); // Prevent form submission
        var value1 = $('#dropdown1').val();
        var value2 = $('#dropdown2').val();
        $.ajax({
          url: '/process',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify({ value1: value1, value2: value2 }),
          success: function(data) {
            $('#resultLabel').text(data.result);
          }
        });
      });
    });
  </script>
</body>
</html>

Understanding the HTML Code:

  1. The HTML page includes the jQuery library by adding the script tag with the source from the official CDN.
  2. The form with the id "myForm" contains two dropdowns, each with a set of options.
  3. The submit event handler is attached to the form, preventing the default form submission behavior.
  4. On submission, the selected values from both dropdowns are retrieved.
  5. An asynchronous POST request is made using jQuery's $.ajax method.
  6. The URL '/process' is specified as the target for the POST request.
  7. The content type is set as JSON, and the selected dropdown values are sent as a JSON object in the request body.
  8. Upon success, the returned data, containing the result, is displayed in the 'resultLabel' element.

Creating the Python Script: Now let's create the Python script that will handle the POST request and process the values. We'll use Flask, a popular web framework, to achieve this. Here's the code for your_python_script.py:

python
from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

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

@app.route('/process', methods=['POST'])
def process_post_request():
    value1 = request.json['value1']
    value2 = request.json['value2']
    # Process the values as needed
    # In this example, we'll concatenate them and return the result
    result = value1 + ' ' + value2
    return jsonify(result=result)

if __name__ == '__main__':
    app.run()

Understanding the Python Code:

  1. We import the necessary modules: Flask for creating the web application, request for handling the HTTP request, jsonify for creating the JSON response, and render_template to render the HTML file.
  2. The @app.route('/') decorator specifies the root route, which renders the index.html template.
  3. The @app.route('/process', methods=['POST']) decorator specifies the '/process' route, which expects a POST request.
  4. Inside the process_post_request function, we retrieve the values from the request's JSON payload.
  5. In this example, we simply concatenate the two values and return the result in JSON format.
  6. The Flask application is run if the script is executed directly.

Conclusion: In this blog post, we've demonstrated how to create a simple web page that performs an asynchronous POST request using Python, jQuery, and HTML. By leveraging Flask and jQuery's AJAX capabilities, we can seamlessly exchange data between the front-end and back-end, providing a smooth user experience. Asynchronous communication is an essential technique for modern web development, and understanding its implementation with Python can greatly enhance your web applications.

Comments

Post a Comment