提交表单php无刷新页面

Question

我正在处理一个PHP应用程序，我想提交表单而不刷新页面。实际上，我希望我的php代码被写在与包含html和jquery代码的页面相同的页面上。 为了使用jQuery提交表单我写这段代码

$(document).ready(function(){ 

    $("#btn").click(function(){ 

var vname = $("#selectrefuser").val(); 
$.post("php-opt.php", //Required URL of the page on server 
{ // Data Sending With Request To Server 
selectrefuser:vname, 

}, 
function(response,status){ // Required Callback Function 
//alert("*----Received Data----*\n\nResponse : " + response+"\n\nStatus : " + status);//"response" receives - whatever written in echo of above PHP script. 

}); 
php_lat = <?php echo $resclient_alt; ?>; 
    php_long = <?php echo $resclient_long; ?>; 
    var chicago = new google.maps.LatLng(parseFloat(php_lat), parseFloat(php_long)); 
    addMarker(chicago); 
    //return false; 
//e.preventDefault(); 
//$("#monbutton:hidden").trigger('click'); 
}); 


}); 

和我的PHP代码：

<?php 
$resclient_alt = 1; 
$resclient_long = 1; 
if(isset($_POST['selectrefuser'])){ 
$client = $_POST['selectrefuser']; 
echo $client; 
$client_valide = mysql_real_escape_string($client); 
$dbprotect = mysql_connect("localhost", "root", "") ; 
$query_alt= "SELECT altitude FROM importation_client WHERE nom_client='$client_valide' "; 
$query_resclient1_alt=mysql_query($query_alt, $dbprotect); 
$row_ss_alt = mysql_fetch_row($query_resclient1_alt); 
$resclient_alt = $row_ss_alt[0]; 
//echo $resclient_alt; 
$query_gps= "SELECT longitude FROM importation_client WHERE nom_client='$client_valide' "; 
$query_resclient1=mysql_query($query_gps, $dbprotect); 
$row_ss_ad = mysql_fetch_row($query_resclient1); 

    $resclient_long = $row_ss_ad[0]; 
} 
?> 

我的形式如下

<form id="form1" name="form1" method="post" > 
    <label> 
<select name="selectrefuser" id="selectrefuser"> 

    <?php 
    $array1_refuser = array(); 
    while (list($key,$value) = each($array_facture_client_refuser)) { 

     $array1_refuser[$key] = $value; 
    ?> 
    <option value="0" selected="selected"></option> 
    <option value="<?php echo $value["client"];?>"> <?php echo $value["client"];?></option> 
     <?php 

    } 
    ?> 
</select> 

</label> 
<button id="btn">Send Data</button> 
</form> 

我的代码做这些操作：

• select client得到它的GPS坐标
  • 调理他们在PHP变量
  • 使用它们作为jQuery的变量
  • 显示marquer地图

所以，因为我的很多客户，我不这样做的步骤希望我的页面刷新。 当我添加return false或e.preventDefault marquer不显示，当我删除它的页面刷新我可以得到我marquer，但我会在选择另一个客户端时丢失它。 有没有办法做到这一点？

编辑 我试过使用这段代码，php_query.php是我当前页面，但页面仍然刷新。

$("#btn").click(function(){ 

var vname = $("#selectrefuser").val(); 
var data = 'start_date=' + vname; 
var update_div = $('#update_div'); 

$.ajax({ 
     type: 'GET', 
     url: 'php_query.php', 
     data: data, 
     success:function(html){ 
      update_div.html(html); 
     } 
    }); 

编辑

当添加e.preventDfault，这段代码似乎没有工作

$("#monbutton").click(function() { 

    php_lat = <?php echo $resclient_alt; ?>; 
    php_long = <?php echo $resclient_long; ?>; 


$('#myResults').html("je suis "+php_long); 

var chicago = new google.maps.LatLng(parseFloat(php_lat), parseFloat(php_long)); 

addMarker(chicago); 
}); 

此代码养病这个值var vname = $("#selectrefuser").val();得到SQL查询结果并返回给jQuery的。

Answer 1

这将刷新，因为你必须在脚本

$("#btn").click(function(e){ //pass event 
    e.preventDefault(); //this will prevent from refresh 

    var vname = $("#selectrefuser").val(); 
    var data = 'start_date=' + vname; 
    var update_div = $('#update_div'); 

    $.ajax({ 
     type: 'GET', 
     url: 'php_query.php', 
     data: data, 
     success:function(html){ 
      update_div.html(html); 
     } 
    }); 

更新

其实，我希望可以在同一页上写我的PHP代码的<button>不prvent默认操作一个包含html和jQuery代码

您可以检测到p上的ajax调用HP通过以下片断

/* AJAX check */ 
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { 
    /* special code here */ 

}