如何在不刷新的情况下将数据从提交的选择表单发送到*.php文件


How can i send data to a *.php file from a submitted select form without refreshing

我正在使用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>