自动刷新Div内容使用jQuery和AJAX传递变量

我想设置一个页面，用户可以从选择菜单中选择1个条件，然后从另一个选择第二条。自动刷新Div内容使用jQuery和AJAX传递变量

然后，我会喜欢这些变量通过我的自动更新div使用Ajax，以便它们在刷新的.php中使用。

选择菜单工作正常，但我将如何通过ajax传递值，然后确保它记住它们的刷新。

FORM

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 

</form>

AUTO REFRESHING DIV

<script> 
(function($) 
{ 
    $(document).ready(function() 
    { 
     $.ajaxSetup(
     { 
      cache: false, 
      beforeSend: function() { 
       $('#updatingdiv').hide(); 
       $('#loading').show(); 
      }, 
      complete: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      }, 
      success: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      } 
     }); 
     var $container = $("#updatingdiv"); 
     $container.load("getholidaylog.php"); 
     var refreshId = setInterval(function() 
     { 
      $container.load('getholidaylog.php'); 
     }, 9000); 
    }); 
})(jQuery); 
</script> 

    <div id="updatingdiv"></div> 
    <img src="loading.gif" id="loading" alt="loading" style="display:none;" />

然后getholidaylog.php会：

$year = $_GET["year"]; 
$username = $_GET["username"];

并用于数据库查询。

EDIT

$j(document).ready(function() {  
    $j("#year_select").change(function(){ 
     $.ajaxSetup(
     { 
      cache: false, 
      beforeSend: function() { 
       $('#updatingdiv').hide(); 
       $('#loading').show(); 
      }, 
      complete: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      }, 
      success: function() { 
       $('#loading').hide(); 
       $('#updatingdiv').show(); 
      } 
     }); 
     var $container = $("#updatingdiv"); 

     var user_select= $j('#user_select').val(); 
     var year_select= $j('#year_select').val(); 
     $container.load('getholidaylog.php',{username:user_select,year:year_select}); 
     var refreshId = setInterval(function() 
     { 
      $container.load('getholidaylog.php'); 
     }, 9000); 
    }); 

})(jQuery);

来源

2012-08-24 Codded

继值传递给PHP页面成功

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#they").change(function() { 
     var firstVal = $("#employee_user").val(); 
     var secVal = $("#they").val(); 

     $.ajax({ 
       type: "POST", 
       data: "year="+ firstVal +"&username="+ secVal, 
       url: "getholidaylog.php", 
       success: function(msg){ 
       $("#updatingdiv").html(msg); 

       } 
      }); 
     }); 
    }); 
</script>

代替，但代码加载到getholidaylog.php DIV负荷相应页面的内容进入格

来源

2012-09-01 09:54:42

低电平$.ajax()方法包含一个称为data变量，通过它可以将数据传递到服务器。所以，如果你想在这种情况下，发送数据时，你可以这样做：

$.ajax({ 
    data: {year:1999,username:'Codded'} 
});

也是一样load，有一个传递数据，所以你可以做

$("#divId").load('foo.php',{username:'Codded',year:1999});

来源

2012-08-24 11:54:53 SexyBeast

我已经编辑我的问题是这样的工作？ – Codded

您忘记了在'setInterval'方法内的Ajax调用中发送数据。 – SexyBeast

哎呀，确定补充说，但仍然无法正常工作。当我更改第二个选择时没有任何反应 – Codded

第二参U可以使用AJAX功能的数据属性，通过像本例中，选择的值：

$.ajax({ 
data: {'name': 'Dan'} // name is the name of the variable and Dan is the value in your case if the selected value 
});

来源

2012-08-24 11:59:06 Sora

我编辑了我的问题，如何将您的方法纳入 – Codded

退房下面给出的，因为它不与你相匹配的选择ID是相同的选择框已经编写

var user_select= $j('#user_select').val(); 
var year_select= $j('#year_select').val();

来源

2012-08-31 05:23:40

DO就像这样..

在您的html这样添加两个隐藏字段这样：

------- 
<input type="hidden" id="userselect" /> 
<input type="hidden" id="yearselect" /> 
</form>

现在改变你的jQuery代码这样的..

修改这样year_select的电平变化的功能，单独把它。不要在此包含ajax设置。

  $j("#year_select").change(function(){     
       $('#userselect').val($('#employee_user').val()); 
       $('#yearselect').val($('#they').val()); 
      });

现在从隐藏field.change中获取值更改这些行。

 var user_select= $j('#userselect').val(); 
     var year_select= $j('#yearselect').val();

因此，最终的HMTL标记应该是这样的：

<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 
<select id="employee_user"> 
<option value="">--</option> 
<option value="333">Test User</option> 
<option value="111">Testing Testing</option>  
</select> 

<select id="they" onchange="showUser(this.value, employee_user.value)"> 
<option value="">--</option> 
<option value="20120801" class="333" title="Test User">20120801</option> 
<option value="20110801" class="333" title="Test User">20110801</option> 
<option value="20100801" class="333" title="Test User">20100801</option> 
<option value="20120801" class="111" title="Testing Testing">20120801</option> 
<option value="20110801" class="111" title="Testing Testing">20110801</option> 
</select> 
<input type="hidden" id="userselect" /> 
<input type="hidden" id="yearselect" /> 
</form>

，你的代码看起来就像这样：

$(function(){ 
     $("#year_select").change(function(){     
        $('#userselect').val($('#employee_user').val()); 
        $('#yearselect').val($('#they').val()); 
       }); 

    $.ajaxSetup(
    { 
     cache: false, 
     beforeSend: function() { 
      $('#updatingdiv').hide(); 
      $('#loading').show(); 
     var user_select= $j('#userselect').val(); 
     var year_select= $j('#yearselect').val(); 
     }, 
     complete: function() { 
      $('#loading').hide(); 
      $('#updatingdiv').show(); 
     }, 
     success: function() { 
      $('#loading').hide(); 
      $('#updatingdiv').show(); 
     } 
    }); 

    $container.load('getholidaylog.php',{username:user_select,year:year_select}); 
    var refreshId = setInterval(function() 
    { 
     $container.load('getholidaylog.php'); 
    }, 9000); 
})

来源

2012-09-01 12:53:32 Ashirvad

自动刷新Div内容使用jQuery和AJAX传递变量

回答

相关问题