Scribd
Upload
15 views

Python BAKMR010399005

Uploaded by

Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

Python BAKMR010399005

Uploaded by

Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Flask is a lightweight web framework for Python, enabling developers to build web applications quickly.

It's based on the


Werkzeug WSGI toolkit and Jinja2 template engine. Flask's simplicity and flexibility make it ideal for small to medium-
sized applications, and it supports extensions to add more functionality as needed. Here’s a brief overview of using Flask
with Ajax calls:

### Flask

1. **Setup**:

- First, install Flask using pip:

```bash

pip install Flask

```

- Create a basic Flask application:

```python

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)

@app.route('/')

def home():

return render_template('index.html')

if __name__ == '__main__':

app.run(debug=True)

```

2. **Routes and JSON Responses**:

- Define routes to handle AJAX requests and return JSON responses:

```python

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

def data():

request_data = request.get_json()
response_data = {'message': 'Received', 'data': request_data}

return jsonify(response_data)

```

### AJAX Calls

Ajax (Asynchronous JavaScript and XML) allows web pages to update asynchronously by exchanging data with a web
server behind the scenes. This means that parts of a web page can be updated without reloading the whole page.

1. **Setting Up HTML and JavaScript**:

- Create `index.html` to interact with the Flask app:

```html

<!DOCTYPE html>

<html>

<head>

<title>Flask and AJAX</title>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>

<h1>Flask AJAX Example</h1>

<button id="getDataButton">Send Data</button>

<div id="response"></div>

<script>

$(document).ready(function(){

$('#getDataButton').click(function(){

$.ajax({

url: '/data',

type: 'POST',

contentType: 'application/json',

data: JSON.stringify({name: 'Alice', age: 25}),


success: function(response){

$('#response').html('<p>' + response.message + '</p>');

},

error: function(error){

$('#response').html('<p>An error occurred</p>');

});

});

});

</script>

</body>

</html>

```

2. **Handling Responses**:

- When the button is clicked, an AJAX POST request is sent to the `/data` endpoint.

- Flask processes the request and returns a JSON response.

- The JavaScript code handles the response and updates the HTML content accordingly.

### Conclusion

Combining Flask with AJAX allows for creating dynamic and responsive web applications. Flask handles the backend logic
and routing, while AJAX ensures smooth and asynchronous data exchange, enhancing the user experience. This setup is
particularly effective for applications that require real-time updates or interactions without refreshing the page.

You might also like