如何在Google App Engine中用request.get获取动态货币对表单数据

Hey Kevin, let's tackle this problem step by step. The core issue here is that your current form field names use sequential IDs (like currency_1_1, currency_1_2), which makes it tricky to dynamically capture all submitted pairs since you don't know how many the user will add. Here's how to fix this on both the frontend and backend:

Frontend Fixes (Make Form Data Easier to Parse) #

Your original jQuery code has a few issues (like duplicate IDs and fragile event binding) that we can clean up. The most elegant solution is to use array-style field names—this tells the browser to group all currency pairs into a single collection, which the backend can easily parse.

Updated HTML

<form method="post" id="parentForm">
  <label>Please select your currency pairs</label>
  <br>
  <!-- Use a class instead of unique IDs for repeated pairs -->
  <div class="currency-pair">
    <select name="currency_pairs[][base]">
      <option>SGD</option>
      <option>CNY</option>
      <option>USD</option>
      <option>EUR</option>
    </select>
    <select name="currency_pairs[][quote]">
      <option>SGD</option>
      <option>CNY</option>
      <option>USD</option>
      <option>EUR</option>
    </select>
    <button type="button" class="remove-btn">Remove</button>
    <br>
  </div>
  <button type="button" id="add_button">Add Currency Pair</button>
  <input type="submit" value="Submit">
</form>

Updated jQuery

$(document).ready(function() {
  // Add new currency pair
  $("#add_button").click(function() {
    const newPair = $(".currency-pair").first().clone();
    // Reset selected values in the cloned pair (optional but user-friendly)
    newPair.find("select").val("SGD");
    $("#parentForm").append(newPair);
  });

  // Remove currency pair (use event delegation for dynamic elements)
  $("#parentForm").on("click", ".remove-btn", function() {
    // Prevent deleting the last pair
    if ($(".currency-pair").length > 1) {
      $(this).closest(".currency-pair").remove();
    }
  });
});

Key improvements here:

• No more messy unique IDs for pairs—we use a reusable class instead.
• Event delegation ensures newly added "Remove" buttons work correctly.
• Array-style names (currency_pairs[][base], currency_pairs[][quote]) group pairs logically.

Backend: Capture All Currency Pairs #

Now let's cover two approaches—one using the optimized frontend setup (recommended), and another if you want to keep your original naming.

Option 1: Use Array-Style Names (Recommended)

With the updated frontend, you can grab all pairs in one go using get_all() to fetch lists of base and quote currencies, then pair them up:

def post(self):
    # Get all base and quote currencies as lists
    base_currencies = self.request.get_all('currency_pairs[][base]')
    quote_currencies = self.request.get_all('currency_pairs[][quote]')
    
    # Combine into full currency pairs
    currency_pairs = []
    for base, quote in zip(base_currencies, quote_currencies):
        # Store as a string like "EUR/USD" or a dictionary
        currency_pairs.append(f"{base}/{quote}")
    
    # Now you have all submitted pairs!
    print(currency_pairs)

Option 2: Keep Original Naming (No Frontend Changes)

If you don't want to modify the frontend, you can loop through possible indexes until you hit empty fields:

def post(self):
    currency_pairs = []
    index = 1
    
    while True:
        # Fetch the pair for the current index
        base = self.request.get(f'currency_{index}_1')
        quote = self.request.get(f'currency_{index}_2')
        
        # Stop when we hit an empty pair
        if not base or not quote:
            break
        
        currency_pairs.append(f"{base}/{quote}")
        index += 1
    
    print(currency_pairs)

Note: This approach is less reliable if users delete middle pairs (e.g., delete pair 2, then submit—pair 3 will still have index 3, leaving a gap). The array-style method avoids this entirely.

内容的提问来源于stack exchange，提问作者Kevin Ling