我正在使用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"中的源代码似乎工作得很好(firebug和地图输出没有显示错误)。
主要问题是表单使用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>
正如我所说,它是有效的,但每次我选择一个新值时,它都会不断刷新页面,这使我无法在表单中添加一些新的选择来改进geomap的过滤。我知道为了防止刷新,我必须使用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");
}
});
}
);">
我做错了什么?
您可以使用ajax
$.ajax({
type: "POST",
url: "Your url here", //www.gautam.com?id=..&value1=..
success:function(data){
alert("successfully submitted");
}
});
$('form').on('submit', function() {
$.post('http://example.com', $(this).serialize(), function() {
// Done
});
});
在视图文件中
<script>
$('document').ready(function(){
$.ajax({
type: "POST",
url: "Your url here", //www.gautam.com?id=..&value1=..
success:function(data){
alert("successfully submitted");
}
});
})
</script>