Question

我正在尝试设置一个页面，用户可以从选择菜单中选择1个条件，然后从另一个菜单中选择第二个。

然后我希望这些变量使用ajax通过我的自动更新div，以便在刷新的.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>

自动刷新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"];

并用于数据库查询。

修改

$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);

**

Answer 1

以下代码成功将值传递给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中，而是将相应页面的内容加载到div中

Answer 2

做这样的事情......

在你的html中添加两个隐藏字段，如下所示：

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

现在改变你的jQuery代码..

像这样修改year_select的onchange函数并单独放置。不要在此包含ajax设置。

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

现在从隐藏字段中取值。更改这些行。

        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);
})

Answer 3

低级$.ajax()方法包含一个名为data的变量，您可以通过该变量将数据传递到服务器。因此，如果您想要这种情况下的发送数据，您可以执行以下操作：

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

同样适用于load，第二个参数用于传递数据，因此您可以执行

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

Answer 4

你可以使用ajax函数的data属性来传递所选的值，如下例所示：

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

Answer 5

检查您的选择ID与下面给出的相同，因为它与您编码的选择框不匹配

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

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

5 个答案: