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

Question

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

正如我所说的，它可以工作，但每次我选择一个新值时它都会刷新页面，这会阻止我向表单添加一些新选择以改进地理地图的过滤。 我知道为了防止刷新我必须使用 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");
            }
          }); 
        }
    );">

我做错了什么？

Answer 1

你可以使用ajax

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

Answer 2

$('form').on('submit', function() {
    $.post('http://example.com', $(this).serialize(), function() {
       // Done
    });
});

Answer 3

在您的视图文件中

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

  })
</script>