2013-12-09 41 views
-2

我怎樣才能發送JavaScript變量值到PHP。我爲此使用了ajax,但是它爲我工作。請幫助,我是新的JavaScript和Ajax。這裏是我的ajax & JavaScript代碼。我怎樣才能發送JavaScript變量值到PHP

<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>"; 
    } 
} 
?> 

任何幫助,將不勝感激。謝謝

+2

定義 '它不工作'。你看到錯誤信息嗎?有什麼事情發生?這是你期望的,如果不是,它有什麼不同? – 2013-12-09 04:34:47

+0

在發送之前警告「a」變量並查看得到的結果。 –

+0

您在執行頁面$'((){... $ .ajax({...})})'時正在執行$ .ajax({...})''。不應該在按鈕點擊/表單提交時執行此操作嗎? – Sean

回答

0

試試這個代碼:

<!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>"; 
    } 
} 
+0

謝謝啊mj ajax調用正在工作,但值不會在php頁面 – user3077217

+0

我測試和ajax值與min和amx變量去index.php page.Did你替換索引。 PHP與你自己的頁面? –

+0

現在檢查我編輯index.php與searchrange.php.you可以查看螢火蟲控制檯上的參數。 –

0
 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) + '"'); 

    }); 
+0

先生,當我使用此代碼我的範圍框不移動 – user3077217

+0

我編輯了代碼。你能檢查一下嗎? –

+0

:我試過bt結果是一樣的。 – user3077217

0

我認爲你的問題是,你的$.ajax({...})被稱爲太早 - 即。準備好文件$(function(){ ... $.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"); 
      } 
      }); 

}); 

所以你的代碼可能是 - - 你可以點擊一個按鈕打電話給你$.ajax({...})

<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例子(代替$。阿賈克斯()使用警報) - http://jsfiddle.net/8JgW6/

0
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/