簡體   English   中英

如果可能將AJAX請求傳遞給Javascript函數的PHP變量?

[英]Pass PHP variable to Javascript function whitin an AJAX request possible?

我嘗試將變量從Javascript(當在表單中選擇某些選項時)傳遞給調用SQL查詢的PHP文件。

應將SQL查詢(字符串)移交給Javascript函數並執行該函數。 一鍵式完成所有操作。 有可能嗎?

我嘗試了AJAX請求,但是當我將其用於最后一步時:

var javascriptstring;
      $.getJSON('getstring.php', function(data) {
        javascriptstring = data.value;
        });

我收到異常:未捕獲的TypeError:無法將屬性'innerHTML'設置為null

並打印出“未定義”

.HTML

  <!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
     function showString(time) {
  if (time=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getstring.php?q="+time,true);
  xmlhttp.send();

      var javascriptstring;
      $.getJSON('getstring.php', function(data) {
        javascriptstring = data.value;
        });
        document.write(javascriptstring);
}
</script>
</head>
<body>

    <form>
    <select name="somestring" onchange="showString(this.value)">
    <option value="">No string selected</option>
    <option value="1">String 1</option>
    </select>
    </form>
    <br>
    <div id="txtHint"><b>String will be listed here...</b></div>

</body>
</html>

PHP

<?php
$q = intval($_GET['q']);

$con = pg_connect("host=localhost port=5432 dbname=Twitter user=postgres password=****");
if (!$con) {
    die('Could not connect: ' . pg_errormessage($con));
}

$sql="SELECT * FROM tswholeworld WHERE createdat > (NOW() - INTERVAL '".$q."hour');";
$result = pg_query($con,$sql);

    $string = "";
while($row = pg_fetch_assoc($result)){
    $lat = $row['latitude'];
    $lon = $row['longitude'];
    $string .= "new google.maps.LatLng({$lat}, {$lon}), ";
}
echo '{"value": "'.$string.'"}';
pg_close($con);
?>

您忘記關閉腳本標簽

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>// close include external javascript tag

然后在腳本標簽內調用函數

<script>
function showString(time) {

-----Your code----

</script>

我想這么多的AJAX就足夠了。 實際上document.write用當前替換了整個DOM。 我已刪除它並修改了您的功能。 另外,由於您已經擁有jQuery,因此我已經刪除了本地Ajax代碼,因此添加大代碼毫無意義。 這個小函數將獲取JSON數據並打印服務器發送的值

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
function showString(time) {
    if (time=="") {
      document.getElementById("txtHint").innerHTML="";
      return;
    } 
    $.getJSON('getstring.php?q='+time, function(data) {
      document.getElementById("txtHint").innerHTML = data.value;
    });
}
</script>

編輯:請關閉外部腳本標簽

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
  //your script
</script>

將Javascript函數定義放在headselect標簽之前。 像下面-

<!DOCTYPE html>
 <html>
   <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script type='text/javascript'>
       function showString(time) {
         if (time=="") {
         document.getElementById("txtHint").innerHTML="";
         return;
       } 
       if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
         xmlhttp=new XMLHttpRequest();
        } else { // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
         xmlhttp.onreadystatechange=function() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
         }
       }
       xmlhttp.open("GET","getstring.php?q="+time,true);
       xmlhttp.send();

       var javascriptstring;
       $.getJSON('getstring.php', function(data) {
        javascriptstring = data.value;
        });
       document.write(javascriptstring);

     }

     </script>

   </head>
   <body>
     <form>
       <select name="somestring" onchange="showString(this.value)">
         <option value="">No string selected</option>
         <option value="1">String 1</option>
       </select>
     </form>
   </body>
 </html>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM