0

我正在使用 Google Visualizator Geomap 进行混搭，我想对过滤器进行动态选择，以便每次都更改从 SQL 查询中检索到的信息，而无需任何“提交”按钮。

这是我的主页来源：

<?php 
require 'protoext.php'
?>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

 google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

   function drawMap() {
      var data = new google.visualization.DataTable();
    data.addColumn('string', 'Code');
    data.addColumn('number', 'Value');
    data.addRows([
        <?php while($r = mysql_fetch_assoc($res)) {
                echo "['$r[COD]', $r[Value]],";
        } ?>
    ]);
      var options = {};
      options['dataMode'] = 'regions';
      options['region'] = 'IT';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
   };
</script>

“protoext.php”中的源代码似乎工作得很好（萤火虫和地图输出没有显示错误）。

主要问题是使用 POST 方法将“性别”值发送到“protoext.php”的表单

<form method="post">
    <select name="gender" onchange="this.form.submit();">
        <option selected>Choose</option>
        <option value="total">total</option>
        <option value="male">male</option>
        <option value="female">female</option>      
    </select>
</form>

<div id='map_canvas'></div>
</div>

正如我所说的那样，它可以工作，但是每次我选择一个新值时它都会不断刷新页面，这阻止了我向表单添加一些新的选择来改进地理地图的过滤。我知道为了防止刷新我必须使用 AJAX，并且我尝试了几种方法，但就像没有发送到 protoext.php 一样。

有人知道吗？预先感谢您的任何回复。

编辑

由于我进行的任何 AJAX 调用都无法正确解析，因此我将发布另一个 php 文件（protoext.php），也许我在函数之间存在冲突或只是不兼容问题。

<?php
$selection=$_POST["gender"];
$dbhost="localhost";
$dbuser="root";
$dbpass="";

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(!$conn) die ("Error Mysql: ".mysql_error());

$sql= "USE csv_db";
$ok = mysql_query ($sql, $conn);

if(!$ok)
    die("imposs. select DB: ".mysql_error()); 

    $sql="SELECT COD, Value
FROM view_codes  //that is the view obtained from my database
WHERE  `Age` LIKE  '15+ years '
AND  `Qualification` LIKE  'totale'
AND `Home_Town` LIKE  'totale'
AND `Gender` LIKE  '$selection'
AND  `Period` LIKE  'T2-2012'";

echo "querySQL: $sql<br>"; 

$res=mysql_query($sql,$conn);
if (!$res)
    die ("Error query" .mysql_error());
?>

编辑更新

我也尝试过这种方式，但仍然无法正常工作。

<form method="post">
        <select name="gender" onchange="this.form.submit(
       function (){
        $.ajax({
        type: "POST",
        url: "protoext.php",            //www.gautam.com?id=..&value1=..
        success:function(data){                                        
               alert("successfully submitted");
            }
          }); 
        }
    );">

我究竟做错了什么？

4

3 回答 3

1

你可以使用ajax

$.ajax({
            type: "POST",
            url: "Your url here",            //www.gautam.com?id=..&value1=..
            success:function(data){                                        
                alert("successfully submitted");
            }
          });
于 2012-09-08T11:34:08.567 回答
0

在您的视图文件中

<script>
    $('document').ready(function(){
          $.ajax({
        type: "POST",
        url: "Your url here",            //www.gautam.com?id=..&value1=..
        success:function(data){                                        
            alert("successfully submitted");
        }
      });

  })
</script>
于 2012-09-08T11:40:52.337 回答
0 
$('form').on('submit', function() {
    $.post('http://example.com', $(this).serialize(), function() {
       // Done
    });
});
于 2012-09-08T11:39:01.817 回答