来自多个选择的 AJAX 调用答案

【问题标题】：AJAX Call from multiple selects来自多个选择的 AJAX 调用
【发布时间】：2013-09-23 15:42:14
【问题描述】：

这是上一篇文章的延续，我对 AJAX 非常陌生，因此一直碰壁。无论如何，我有以下代码：

<script type='text/javascript'>
 $(document).ready(function(){
  $('#view1, #view2, #view3, #view4, #view5, #view6, #view7, #view8, #view9, #view10, #view11, #view12, #view13, #view14, #view15, #view16, #view17, #view18').on( 'change', 'select', function( ) {                            
        var statusVal = $(this).val();
          var job_id = $(this).prop('id');
          $.ajax({
                   type: "POST",
                   url: "saveStatus.php",
                   data: { statusType : statusVal, jobID: job_id },
                   cache : false,
                   success: function(data) {
                    $('#view1').load('jobs.php #view1', function() {});
                    $('#view2').load('jobs.php #view2', function() {});
                    $('#view3').load('jobs.php #view3', function() {});
                    $('#view4').load('jobs.php #view4', function() {});
                    $('#view5').load('jobs.php #view5', function() {});
                    $('#view6').load('jobs.php #view6', function() {});
                    $('#view7').load('jobs.php #view7', function() {});
                    $('#view8').load('jobs.php #view8', function() {});
                    $('#view9').load('jobs.php #view9', function() {});
                    $('#view10').load('jobs.php #view10', function() {});
                    $('#view11').load('jobs.php #view11', function() {});  
                    $('#view12').load('jobs.php #view12', function() {});   
                    $('#view13').load('jobs.php #view13', function() {});   
                    $('#view14').load('jobs.php #view14', function() {});   
                    $('#view15').load('jobs.php #view15', function() {});   
                    $('#view16').load('jobs.php #view16', function() {});   
                    $('#view17').load('jobs.php #view17', function() {});   
                    $('#view18').load('jobs.php #view18', function() {});   
                   }
        })
    });
  });
</script>

现在我在一个 div 中有多个 select 语句，每个语句都是 view1-18，所以每个 18 个 div 都有一个 select 语句，它通过自动将 select 中的值保存到我的数据库来工作，这很好用但是 我确信这是写得很糟糕的代码，所以我的第一个问题是帮助正确格式化它。

我的第二个问题是，如果现在我想在每个 div 中添加两个选择，并且每个选择都保存到不同的数据库字段中。以下是我的选择代码：

    <select name="status" id="<?php echo str_pad($job->job_id, 6, "0", STR_PAD_LEFT); ?>">
      <option value=''>--Select--</option>
      <option value='Job Approved' <?php if($job->job_schedulestatus == 'Job Approved') echo 'selected'; ?> >Jobs Approved to Print Internally</option>
      <option value='To Artwork' <?php if($job->job_schedulestatus == 'To Artwork') echo 'selected'; ?> >To Artwork</option>   
    </select>

我想添加另一个并将其称为“status2”并创建一个重复的 AJAX 调用并将任何显示 status 的内容重命名为 status2 ，但这不起作用，我不知道该去哪里。我还创建了一个 saveStatus2.php，其中包含要插入新字段的代码。

任何指导/帮助将不胜感激

伊恩

【问题讨论】：

每次选择更改时都需要更新视图吗？还是只需要在选择更改时更新当前视图？
是的，我需要根据保存的值更新每个视图持有的信息，并且通过更改一个可能意味着 2 个视图将发生变化。
您可以在视图中添加类吗？
已经上课了。下面的评论似乎缩小了代码。我现在需要能够在每个 div 中有 2 个选择，但只能更改每个的名称而不是 id，并将每个选项保存到不同的字段中

标签： javascript php mysql ajax autosave

【解决方案1】：

这对我来说似乎有点可疑 - 主要是因为我看到的是正在发生的“ajax inception”事情。记住 $.load() 也是一个 ajax 函数，所以你调用多个 .load 事件作为主 ajax 事件的回调。

有没有办法将它整合到单个 Ajax 调用中，就像在您拥有的第一个包装器 ajax 中一样，然后让 PHP 为您设置所有选择？

如果您必须遍历每个选择，我可能会走这条路线以使其更简洁：

for(var i=1; i<19; i++)
{
  $('#view'+i).load('jobs.php#view'+i); //empty callback not needed here as well..
}

【讨论】：

这很好，谢谢，关于我现在如何让它与两个选择一起工作的任何想法？
为您的选择分配一个类，如 class="select1"，与 2 相同。将选择编号放在 id 中，如 id="view1" 等。然后，设置更改选择的侦听器。在 jquery 中使用类选择器会将其绑定到该类的所有选择。例如 $('.select1').on('click', function(){ id = $(this).prop('id') .... }) 然后在同一个回调中进行 .load 调用...
抱歉，应该是 .on('change',... 而不是 'click'。
在 select 上使用一个类，然后在 AJAX 语句中调用，然后为第二个语句创建一个新语句似乎可行。非常感谢。

【解决方案2】：

我会做这样的事情......

// cache the views
var views = $('.view');

$('#view_wrapper').on('change', 'select', function() {
    var statusVal = $(this).val();
    var job_id = $(this).prop('id');
    $.ajax({
        type: "POST",
        url: "saveStatus.php",
        data: { statusType : statusVal, jobID: job_id },
        cache : false,
        success: function(data) {
            $(views).eatch(function() {
                var view_id = $(this).prop('id');
                $('#'+view_id).load('jobs.php#'+view_id);
            });
        }
    });
});

【讨论】：