Jquery 从选择框中获取值并进行 AJAX 调用答案

【问题标题】：Jquery get values from select boxes and make AJAX callJquery 从选择框中获取值并进行 AJAX 调用
【发布时间】：2017-03-21 13:02:03
【问题描述】：

我有多个选择框，我想在其中获取每个所选选项的值并根据所选选项进行 AJAX 调用。我怎样才能做到这一点？

到目前为止我有这个：

$('select[name="restaurant_chosen"]').on('change', function() {
    var restaurant_id = $(this).val();
});

$('select[name="date_chosen"]').on('change', function() {
    var date_chosen = $(this).val();
});

$.ajax({
   type: 'GET',
   url: '/api/' + restaurant_id + '/' + date_chosen +
   success: function(data) {
     console.log(data)
   }, 
   error: function(data){
    console.log('error')
  }
 });

restaurant_id 和 date_chosen 两个变量我收到错误 not defined。我做错了什么？

【问题讨论】：

这是一个非常基本的oops，称为变量访问范围。您已经在 change 函数中声明了变量，并在 ajax 调用中绑定了访问权限。让它们在全球范围内使用。

标签： javascript jquery ajax

【解决方案1】：

function sendToServer(values, onSuccess, onError){

  var restaurant_id, date_chosen;
  
  //here fill restaurant_id and date_chosen  using values
  
  $.ajax({
     type: 'GET',
     url: '/api/' + restaurant_id + '/' + date_chosen, //replace the plus by a comma
     success: function(data) {
       onSuccess(data);
     }, 
     error: function(data){
      onSuccess(data);
    }
   });
   
}


$('select').on('change', function() {
  var values = [];
  $('select').each(function(index){        
    v = $(this).val();     
    n = $(this).attr("name");
    values.push( {"name":n, "value":v} );  
  });

  console.log("values: ", values);
  
  sendToServer(values, 
    function(data){
       console.log(data);
    }, 
    function(data){
      console.log('error', data);
    }
  );
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="brand">
  <option value="volvo">Volvo</option>
  <option value="audi">Audi</option>
</select>


<select name="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>

【讨论】：

【解决方案2】：

这就是它应该的样子。你在一个私有函数上下文中声明你的变量，你不能（也不能）从外部访问。

简单的解决方案，将您的两个变量的声明移出onchange 事件处理程序（使其更具全局性）。

var restaurant_id;
    date_chosen;

$('select[name="date_chosen"]').on('change', function() {
   date_chosen = $(this).val(); // skip the var here
});

【讨论】：