如何实现reservationData自动同步变量值并通过AJAX传递至控制器存入数据库

Hey Maja, the issue here is that when you initialize reservationData at the top, it only captures the current values of name, selectedMovie, and selectedDay at that exact moment. JavaScript primitive values (like strings/numbers) are stored by value, not reference—so later changes to those three variables won't automatically update the properties in your reservationData object.

Let's go through a few straightforward fixes depending on your needs:

Fix 1: Generate reservationData Right Before Sending AJAX (Simplest) #

If you only need the latest values when the user clicks the confirm button, just move the reservationData creation inside the click event handler. This way, every time the button is clicked, you grab the most up-to-date values:

var confirmReservation = $('.confirm-reservation');
confirmReservation.on('click', function(){
  // Create reservationData with the latest values each time the button is clicked
  var reservationData = {"name": name, "selectedMovie": selectedMovie, "selectedDay": selectedDay};
  console.log(reservationData);
  
  $.ajax({
    url: '/drupal/movie-reservation',
    type: 'GET',
    cache: false,
    data:{result: JSON.stringify(reservationData)},
    success: function(data){
      alert(data);
    }
  });
});

Fix 2: Use a Function to Get Fresh Data (For Reusability) #

If you need to access the updated reservationData in multiple places (not just the click event), wrap the data creation in a function. Call this function whenever you need the latest values:

// Function to fetch the latest reservation data
function getLatestReservationData() {
  return {
    "name": name,
    "selectedMovie": selectedMovie,
    "selectedDay": selectedDay
  };
}

var confirmReservation = $('.confirm-reservation');
confirmReservation.on('click', function(){
  var reservationData = getLatestReservationData();
  console.log(reservationData);
  
  $.ajax({
    url: '/drupal/movie-reservation',
    type: 'GET',
    cache: false,
    data:{result: JSON.stringify(reservationData)},
    success: function(data){
      alert(data);
    }
  });
});

Fix 3: Use ES6 Getters for a Self-Updating Object #

If you want reservationData to always reflect the latest values (even when accessed elsewhere in your code), use ES6 getter properties. This makes the object's properties dynamically return the current value of the variables whenever they're accessed:

// reservationData will automatically return the latest values for its properties
var reservationData = {
  get name() { return name; },
  get selectedMovie() { return selectedMovie; },
  get selectedDay() { return selectedDay; }
};

var confirmReservation = $('.confirm-reservation');
confirmReservation.on('click', function(){
  // Convert the getter-based object to a plain object before stringifying
  // This ensures JSON.stringify picks up the latest values
  var dataToSend = {...reservationData};
  console.log(dataToSend);
  
  $.ajax({
    url: '/drupal/movie-reservation',
    type: 'GET',
    cache: false,
    data:{result: JSON.stringify(dataToSend)},
    success: function(data){
      alert(data);
    }
  });
});

Quick Note #

Make sure that name, selectedMovie, and selectedDay are actually being updated correctly when the user makes changes (e.g., you have event listeners on input fields or dropdowns that update these variables). If those variables aren't changing in the first place, none of these fixes will help!

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