Question

如何将javascript变量值发送到php。我已经使用了ajax但它的工作对我来说。请帮忙，我是javascript和ajax的新手。这是我的ajax＆amp; javascript代码。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
    $(function ()
    {        
        $("#slider-range").slider(
        {
            range: true,
            min: 71,
            max: 109,
            values: [75, 100],
            slide: function (event, ui)
            {
                $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                $("#min_inches").val(ui.values[0]);
                $("#max_inches").val(ui.values[1]);
            }
        });
        $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
        var a = $("#min_inches").val($("#slider-range").slider("values", 0));
        var b = $("#max_inches").val($("#slider-range").slider("values", 1));

        $.ajax(
        {
            type: "POST",
            url: "searchrange.php",
            data:
            {
                a: a,
                b: b
            },
            success: function (option)
            {
                alert("voted");
            }
        });
    });
</script>

以下是我的php代码（searchrange.php）。

<?php
    if(isset($_POST['a']) && $_POST['a'] != '')
    {
    $kws = $_POST['a'];
    $kws1=$_POST['b'];
    echo $kws;     
    echo  $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
    $res = mysql_query($query);
    $count = mysql_num_rows($res);
    $i = 0;
    if($count > 0)
    {
        echo "<ul>";
        while($row = mysql_fetch_array($res))
        {
            echo "<a href='#'><li>";     
            echo "<div id='rest'>";?>
            <a href="searchrange.php?id=<?php echo $row['0'];?> "><?php echo $row['Religion'];?><br><?php echo $row['Name'];?></a>
            <?php echo $row[0];
            echo "<br />";
            echo "<br />";    
            echo "<div style='clear:both;'></div></li></a>";
            $i++;
            if($i == 5) break;
        }
        echo "</ul>";
        if($count > 5)
        {
            echo "<div id='view_more'><a href='#'>View more results</a></div>";
        }
    }
    else
    {  
        echo "<div id='no_result'>No result found !</div>";
    }
}
?>

任何帮助将不胜感激。谢谢

Answer 1

        Try this. Let the ajax call be done inside a call back.

        $(function (){        
             $("#slider-range").slider({
                    range: true,
                    min: 71,
                    max: 109,
                    values: [75, 100],
                    slide: function (event, ui)
                    {
                        $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                        $("#min_inches").val(ui.values[0]);
                        $("#max_inches").val(ui.values[1]);
                        var a = $("#min_inches").val($("#slider-range").slider("values", 0));
                        var b = $("#max_inches").val($("#slider-range").slider("values", 1));

                $.ajax({
                    type: "POST",
                    url: "searchrange.php",
                    data:
                    {
                        a: a,
                        b: b
                    },
                    success: function (option)
                    {
                        alert("voted");
                    }
                });
              }
           });
$("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');

     });

Answer 2

我认为您的问题是您的$.ajax({...})过早被调用 - 即。在文档就绪$(function (){ ... $.ajax({...}) });上，而不是在更改/选择滑块后。您可以点击按钮调用$.ajax({...}) -

<input id="vote" type="button" value="Vote" />

$("#vote").on('click',function(){
    var a= $("#min_inches").val();
    var b=$("#max_inches").val();  

    $.ajax ({
            type: "POST",
            url: "searchrange.php",
            data: { a : a,
            b : b },
            success: function(option)
            {
              alert("voted");
            }
            });

});

所以你的代码可能是 -

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript">
    $(function ()
    {        
        $("#slider-range").slider(
        {
            range: true,
            min: 71,
            max: 109,
            values: [75, 100],
            slide: function (event, ui)
            {
                $("#size-range").html(Math.floor(ui.values[0] / 12) + "'" + (ui.values[0] % 12) + '" - ' + Math.floor(ui.values[1] / 12) + "'" + (ui.values[1] % 12) + '"');
                $("#min_inches").val(ui.values[0]);
                $("#max_inches").val(ui.values[1]);
            }
        });
        $("#size-range").html(Math.floor($("#slider-range").slider("values", 0) / 12) + "'" + ($("#slider-range").slider("values", 0) % 12) + '" - ' + Math.floor($("#slider-range").slider("values", 1) / 12) + "'" + ($("#slider-range").slider("values", 1) % 12) + '"');
        $("#min_inches").val($("#slider-range").slider("values", 0));
        $("#max_inches").val($("#slider-range").slider("values", 1));

        $("#vote").on('click',function(){
             var a= $("#min_inches").val();
             var b=$("#max_inches").val();  

             $.ajax({
                    type: "POST",
                    url: "searchrange.php",
                    data:
                    {
                      a: a,
                      b: b
                    },
                   success: function (option)
                   {
                     alert("voted");
                   }
             });
        });
    });
</script>

请参阅此JSFiddle示例（使用alert代替$ .ajax（）） - http://jsfiddle.net/8JgW6/

Answer 3

试试这段代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() { 
    $( "#slider-range" ).slider({ 
        range: true, 
        min: 0, 
        max: 500, 
        values: [ 75, 300 ], 
        slide: function( event, ui ) { 
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); 
        },
        change: function(event, ui) {
            // when the user change the slider
        },
        stop: function(event, ui) {
            // when the user stopped changing the slider
               $.ajax(
        {
            type: "POST",
            url: "searchrange.php",
            data:
            {"min" :ui.values[0],"max":ui.values[1]},
            success: function (option)
            {
                alert("voted");
            }
        });
        }
    }); 
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + 
                        " - $" + $( "#slider-range" ).slider( "values", 1 ) ); 
}); 


</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>

您的搜索页面将如下：

 if(isset($_POST['min']) && $_POST['min'] != '')
    {

    $kws = $_POST['min'];
    $kws1=$_POST['max'];
    echo $kws;     
    echo  $query = "select * from newusers where Age between '".$kws."' and '".$kws1."'" ;
    $res = mysql_query($query);
    $count = mysql_num_rows($res);
    $i = 0;
    if($count > 0)
    {
        echo "<ul>";
        while($row = mysql_fetch_array($res))
        {
            echo "<a href='#'><li>";     
            echo "<div id='rest'>";?>
            <a href="searchrange.php?id=<?php echo $row['0'];?> "><?php echo $row['Religion'];?><br><?php echo $row['Name'];?></a>
            <?php echo $row[0];
            echo "<br />";
            echo "<br />";    
            echo "<div style='clear:both;'></div></li></a>";
            $i++;
            if($i == 5) break;
        }
        echo "</ul>";
        if($count > 5)
        {
            echo "<div id='view_more'><a href='#'>View more results</a></div>";
        }
    }
    else
    {  
        echo "<div id='no_result'>No result found !</div>";
    }
}

Answer 4

    HI,

    You can try this.In this example you can see how I have made a call to ajax

function callService(val1,val2){
            alert("call service here  "+val1);

            $.ajax({
                       type: "POST",
                       url: "searchrange.php",
                       data:
                       {
                           a: val1,
                           b: val2
                       },
                       success: function (option)
                       {
                           alert("voted");
                       }
                   });


   }
  $sliderValue="";
    $(function() {

        $( "#slider-range" ).slider({
          range: true,
          min: 0,
          max: 500,
          values: [ 75, 300 ],
          slide: function( event, ui ) {


          },
          stop: function(event, ui) {            
                    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                    b = 0;
                    $sliderValue=ui.value;
                    console.log($sliderValue)
                    callService($sliderValue,b);
          }
        });
     http://jsfiddle.net/kapilgopinath/c4XA5/

如何将javascript变量值发送到php

4 个答案: