Flask页面中通过Ajax将点击图片的ID传递至Python后端

Got it, let's break this down step by step. You're rendering images in a loop with Jinja2, and you need to capture clicks on those images then send their IDs to your Flask app using Ajax. Here's a straightforward implementation:

1. Update Your Template to Target Images Easily #

First, add a shared class to your <img> tags—this makes it simpler to bind click events without affecting other images on the page:

{% for key, value in resultat.vars_buttons.items() %}
<div class="tuile{{1+loop.index%23}} news col-xs-4 col-lg-2">
  <img 
    id="{{key}}" 
    class="remote-control-img"  <!-- Added this class -->
    style="margin-top:-5px;" 
    src="../static/img/remote/tvb.png" 
    width="30"
  >{{ value }}
</div>
{% endfor %}

2. Add Ajax Logic with JavaScript #

You can use either jQuery (for simplicity) or vanilla JavaScript. Here are both options:

Option 1: Using jQuery #

First, make sure you include jQuery in your page (place this before your custom script):

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

Then add the click handler and Ajax call:

<script>
$(document).ready(function() {
  // Bind click event to all images with our custom class
  $('.remote-control-img').on('click', function() {
    const imageId = $(this).attr('id'); // Grab the clicked image's ID
    
    // Send the ID to Flask via Ajax
    $.ajax({
      url: '/process-image-click', // Match this to your Flask route
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({ image_id: imageId }),
      success: function(response) {
        console.log('Success:', response);
        // Optional: Add user feedback, like a toast or alert
        alert(`Image ID ${imageId} sent successfully!`);
      },
      error: function(error) {
        console.error('Error sending ID:', error);
        alert('Failed to send image ID.');
      }
    });
  });
});
</script>

Option 2: Vanilla JavaScript (No jQuery) #

If you prefer not to use jQuery, here's the native JS version:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Get all target images
  const images = document.querySelectorAll('.remote-control-img');
  
  // Bind click event to each image
  images.forEach(img => {
    img.addEventListener('click', function() {
      const imageId = this.id;
      
      // Use Fetch API to send the ID
      fetch('/process-image-click', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ image_id: imageId })
      })
      .then(response => response.json())
      .then(data => {
        console.log('Success:', data);
        alert(`Image ID ${imageId} sent successfully!`);
      })
      .catch(error => {
        console.error('Error:', error);
        alert('Failed to send image ID.');
      });
    });
  });
});
</script>

3. Set Up Flask Backend Route #

Now add a route in your Flask app to receive the image ID and process it:

from flask import Flask, request, jsonify

app = Flask(__name__)

# Your existing routes go here...

@app.route('/process-image-click', methods=['POST'])
def process_image_click():
    # Get the JSON data sent from the frontend
    request_data = request.get_json()
    image_id = request_data.get('image_id')
    
    # Validate the ID exists
    if not image_id:
        return jsonify({'error': 'Image ID is missing'}), 400
    
    # Add your custom logic here—e.g., save to DB, trigger an action, etc.
    print(f"Received click on image with ID: {image_id}")
    
    # Send a success response back to the frontend
    return jsonify({
        'success': True,
        'message': f"Received image ID: {image_id}"
    }), 200

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

Key Notes #

• Route Matching: Make sure the url in your Ajax call matches the Flask route path exactly.
• Content Type: Setting contentType: 'application/json' ensures Flask can parse the data with request.get_json().
• Error Handling: The examples include basic error handling—you can expand this to fit your app's needs (e.g., show a custom error message instead of an alert).

内容的提问来源于stack exchange，提问作者Benjamin BB