提交表单php没有刷新页面

时间:2015-03-02 11:21:25

标签: php jquery html ajax forms

我正在开发一个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>

我的代码执行以下操作:

  • 选择客户端获取其GPS坐标
    • 在php变量中恢复它们
    • 将它们用作jquery变量
    • 在地图上展示marquer

因此,我为许多客户执行此步骤,我不希望我的页面刷新。 当我添加return falsee.preventDefault没有显示结婚时,当我删除它时页面刷新我可以得到我的结婚但我会在选择另一个客户端时丢失它。 有没有办法做到这一点 ?

修改 我尝试过使用这段代码,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。

1 个答案:

答案 0 :(得分:1)

它会刷新,因为你没有在脚本

中修改<button>的默认操作
 $("#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代码与包含html和jquery代码的页面编写在同一页面上

您可以使用以下代码段

检测php上的ajax调用
/* AJAX check  */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    /* special code here */

}