JSON Response তৈরি এবং হ্যান্ডল করা

AJAX এবং Web2Py - ওয়েব২পাই (Web2Py) - Web Development

191

Web2Py তে JSON Response তৈরি এবং হ্যান্ডল করা একটি সাধারণ এবং শক্তিশালী উপায় যা অ্যাপ্লিকেশনের ক্লায়েন্ট সাইড (যেমন JavaScript) এবং সার্ভার সাইডের মধ্যে ডেটা আদান-প্রদান সহজ করে। Web2Py তে JSON রেসপন্স তৈরি করার জন্য আপনি response.json() ফাংশন ব্যবহার করতে পারেন।

এখানে JSON Response তৈরি এবং হ্যান্ডল করার পুরো প্রক্রিয়া ব্যাখ্যা করা হলো।


Web2Py তে JSON Response তৈরি করা

১. JSON রেসপন্স তৈরি করার জন্য response.json() ব্যবহার

Web2Py তে JSON রেসপন্স তৈরি করতে, response.json() ফাংশন ব্যবহার করা হয়। এটি একটি Python ডেটা স্ট্রাকচার (যেমন dictionary, list) গ্রহণ করে এবং সেটিকে JSON ফরম্যাটে রূপান্তরিত করে ইউজারের ব্রাউজারে পাঠিয়ে দেয়।

Controller (default.py):

def get_data():
    data = {
        'status': 'success',
        'message': 'Data fetched successfully',
        'data': [
            {'id': 1, 'name': 'John Doe'},
            {'id': 2, 'name': 'Jane Smith'}
        ]
    }
    return response.json(data)

এখানে, get_data() ফাংশন একটি ডিকশনারি (dictionary) তৈরি করছে, যা ইউজারের জন্য JSON রেসপন্স হিসাবে পাঠানো হবে। response.json() ফাংশন এই ডিকশনারি পাঠানোর কাজ করবে।

JSON রেসপন্সের আউটপুট:

{
  "status": "success",
  "message": "Data fetched successfully",
  "data": [
    {"id": 1, "name": "John Doe"},
    {"id": 2, "name": "Jane Smith"}
  ]
}

২. JavaScript দিয়ে JSON রেসপন্স হ্যান্ডল করা

এবার, আপনাকে JavaScript এর মাধ্যমে JSON রেসপন্সটি হ্যান্ডল করতে হবে। আপনি AJAX ব্যবহার করে এই JSON ডেটা সার্ভার থেকে নিয়ে আসতে পারেন এবং পরে সেই ডেটা ব্যবহার করে UI আপডেট করতে পারেন।

HTML/JavaScript Example (views/default/index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web2Py JSON Example</title>
</head>
<body>

    <h1>Users List</h1>
    <ul id="user-list"></ul>

    <script>
        // AJAX Call to get JSON data
        fetch('/default/get_data')
            .then(response => response.json())  // Parse the JSON data from the response
            .then(data => {
                const userList = document.getElementById('user-list');
                data.data.forEach(user => {
                    const li = document.createElement('li');
                    li.textContent = `ID: ${user.id}, Name: ${user.name}`;
                    userList.appendChild(li);
                });
            })
            .catch(error => console.error('Error fetching data:', error));
    </script>

</body>
</html>

এখানে fetch('/default/get_data') ব্যবহার করে আমরা Web2Py এর get_data ফাংশনে AJAX রিকোয়েস্ট পাঠাচ্ছি। response.json() এর মাধ্যমে সার্ভার থেকে আসা JSON ডেটা পার্স করে, সেই ডেটাকে HTML উপাদানে (<ul> ট্যাগে) প্রদর্শন করছি।

৩. ইনপুট ডেটা নিয়ে JSON রেসপন্স তৈরি করা

আপনি ব্যবহারকারীর ইনপুট নিয়েও JSON রেসপন্স তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ফর্মের ইনপুট নেওয়া হচ্ছে এবং সেটি JSON আকারে ক্লায়েন্ট সাইডে ফেরত পাঠানো হচ্ছে।

Controller (default.py):

def submit_form():
    # ফর্মের ইনপুট ডেটা গ্রহণ
    name = request.vars.name
    age = request.vars.age

    # ইনপুট ডেটা যাচাই এবং JSON রেসপন্স তৈরি
    if name and age:
        response_data = {
            'status': 'success',
            'message': f'Received data: Name - {name}, Age - {age}'
        }
    else:
        response_data = {
            'status': 'error',
            'message': 'Missing required fields'
        }

    return response.json(response_data)

HTML/JavaScript Example (views/default/submit_form.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Form</title>
</head>
<body>

    <h1>Submit Your Info</h1>
    <form id="user-form">
        <label for="name">Name: </label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="age">Age: </label>
        <input type="number" id="age" name="age" required>
        <br>
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('user-form').addEventListener('submit', function(event) {
            event.preventDefault();  // Prevent the form from submitting normally

            const formData = new FormData(this);

            // Send form data via AJAX to Web2Py controller
            fetch('/default/submit_form', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())  // Parse the JSON response
            .then(data => {
                if (data.status === 'success') {
                    alert(data.message);  // Show success message
                } else {
                    alert(data.message);  // Show error message
                }
            })
            .catch(error => console.error('Error submitting form:', error));
        });
    </script>

</body>
</html>

এখানে, submit_form ফাংশনটি ইউজারের ইনপুট গ্রহণ করে এবং তা JSON রেসপন্স আকারে ফেরত পাঠায়। JavaScript এর মাধ্যমে এই JSON রেসপন্স পেয়ে আমরা ইউজারকে মেসেজ দেখাচ্ছি (যেমন, সফল বা ত্রুটির বার্তা)।

৪. JSON রেসপন্সে HTTP স্ট্যাটাস কোড সেট করা

Web2Py তে JSON রেসপন্সের সাথে HTTP স্ট্যাটাস কোডও নির্ধারণ করা যায়, যা ক্লায়েন্ট সাইডে রেসপন্সের অবস্থা বুঝতে সাহায্য করে।

Controller (default.py):

def get_data():
    data = {
        'status': 'success',
        'message': 'Data fetched successfully',
        'data': [
            {'id': 1, 'name': 'John Doe'},
            {'id': 2, 'name': 'Jane Smith'}
        ]
    }
    response.status = 200  # HTTP Status Code for OK
    return response.json(data)

এখানে, response.status = 200 ব্যবহার করে আমরা HTTP স্ট্যাটাস কোড 200 (যা সাধারণত "OK" নির্দেশ করে) সেট করেছি।


সারাংশ

Web2Py তে JSON Response তৈরি এবং হ্যান্ডল করা খুবই সহজ এবং কার্যকরী। response.json() ফাংশন ব্যবহার করে আপনি Python ডেটা স্ট্রাকচারকে JSON ফরম্যাটে রূপান্তরিত করতে পারেন এবং AJAX এর মাধ্যমে ক্লায়েন্ট সাইডে ডেটা পাঠাতে পারেন।

  • JSON রেসপন্স ক্লায়েন্ট সাইডে ডায়নামিকভাবে ডেটা আপডেট করার জন্য অত্যন্ত উপযোগী।
  • fetch() ব্যবহার করে JavaScript এ JSON রেসপন্স গ্রহণ করা এবং UI আপডেট করা যায়।
  • ইনপুট ডেটা প্রক্রিয়াকরণ এবং ফর্ম সাবমিশন এর মাধ্যমে JSON রেসপন্স তৈরি করা সম্ভব।

এই প্রক্রিয়াগুলি ওয়েব অ্যাপ্লিকেশনগুলোকে আরো ইন্টারেকটিভ এবং ডায়নামিক করে তোলে।

Content added By
Promotion

Are you sure to start over?

Loading...