Question

我尝试将一个变量从Javascript（在表单中选择一些选项时）传递给一个调用SQL查询的PHP文件。

应该将SQL查询（字符串）移交给Javascript函数并执行该函数。一键点击一切。这有可能吗？

我尝试使用AJAX请求但是当我在最后一步使用它时：

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

我得到异常：未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;为null

它打印出＆＃34; undefined＆＃34;

.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);
?>

Answer 1

您忘了关闭脚本标记

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

Answer 2

我想这么多的AJAX应该足够了。实际上document.write用当前的东西取代了整个DOM。我删除了它并修改了你的功能。此外，我已经删除了本机Ajax代码，因为你已经有了jQuery，所以没有必要添加大代码。这个小函数将获取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>

Answer 3

将Javascript函数定义保留在head或select标记之前。如下 -

<!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>

可以在一个AJAX请求中将PHP变量传递给Javascript函数吗？

3 个答案: