如何知道必须通过 ajax 特定问题发送哪些数据

Question

我正在学习 JS 并且遇到了另一个困难，所以希望任何人都可以提供帮助。无论它是 jQuery 还是 Angular 中的解决方案，无论如何我都需要并且只是想了解这个概念。所以，我的 HTML 中有两种类型的任务，用户可以选择他要解决的一种 - 音频或图形。现在我的 JS 看起来像：

var request = $http({
  method:  'POST',
  url:     'check.php',
  data:    {
    'audioAnswer': $scope.audioValue.data,
    'imageAnswer': $scope.imageValue.data,
    'userAnswer':  $scope.userAnswer
  },
  headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});

正如您现在所看到的，我正在发送用户答案和两个问题 ID（音频和图形）。所以我不知道他一直在解决哪一个问题，只是将两者与我服务器上的用户答案进行比较，显然这不是最好的解决方案......

编辑

带有音频和图形任务的当前 HTML 看起来像

<div class="cptch_bottom-hold">
   <div class="cptch_player" id='cptch_blue-button' ng-show='show'>
     <i class="fa fa-volume-up cptch_icon-hold" id="cptch_icon">
       <audio ng-src='{{audioSrc.data}}' id="audioplayer"></audio>
       <input type="hidden" name="audio_answer" class="player_input" ng-model='audioValue'>
     </i>
   </div>
   <div class="image-hold" ng-show='!show'>
     <img class='cptch_image' ng-src='{{imageSrc.data}}' ng-if='imageSrc' alt='image'>
     <input type="hidden" name="image_answer" class="image_input" ng-model='imageValue'>
   </div>
</div>

所以问题是 - 如何了解用户正在解决哪个任务？只需单击一个按钮即可更改任务，因此您在一瞬间只能看到一项任务。 任何建议将不胜感激:)

Answer 1

可能的解决方案是：

您将一个事件附加到两个输入，当有人开始输入时，另一个消失。
在同一事件中，您可以“保存”输入的两者中的哪一个，这样您就可以在 ajax 调用中执行 if 语句。

在同一事件中，您还应该检查输入是否被删除，以便您可以再次显示两个输入。

Answer 2

你需要在方法之外创建对象，所以不要作为方法的参数，像这样：

 var data = {};
 if($scope.audioValue.data) { data.audioAnswer = $scope.audioValue.data);
 if($scope.userAnswer.data) { data.userAnswer= $scope.userAnswer.data);
 if($scope.imageAnswer.data) { data.imageAnswer= $scope.imageAnswer.data);

 var request = $http({
   method:  'POST',
   url:     'check.php',
   data:    data,
   headers: {'Content-Type': 'application/x-www-form-urlencoded'}
 });

Answer 3

您可以在发送之前创建要发送的数据对象。

像这样：

var dataToBeSent = {};

if (isAudioAnswer) {
    dataToBeSent.audioAnswer = $scope.audioValue.data;
    dataToBeSent.userAnswer = $scope.userAnswer;
} else if (isImageAnswer) {
    dataToBeSent.imageAnswer = $scope.imageValue.data;
    dataToBeSent.userAnswer = $scope.userAnswer;
}

var request = $http({
    method:  'POST',
    url:     'check.php',
    data:    dataToBeSent,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});