當使用提交按鈕提交表單時，無法獲得jQuery響應

-1

我正在將狀態，城市，郵政編碼發送到ajax.php文件。使用jquery。我無法得到響應這些值當使用提交按鈕提交表單時，無法獲得jQuery響應

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="utf-8"> 
     <title>Jquery Ajax</title> 
    </head> 
    <body> 
    <!------------------------Jquery-------POST DATA-----------------------------------------> 
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    --> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 



     $('#id-submit').click(function() { 


      var reg_state = $('#reg_state').val(); 
      var reg_city = $('#reg_city').val(); 
      var reg_zip = $('#reg_zip').val(); 

      var dataString = 'reg_state='+ reg_state; 

      //alert(dataString); 

      $.ajax 
      ({ 
       type: "POST", 
       url: "ajax.php", 
       data: dataString, 
       cache: false, 
       success: function(data) 
       { 
       //$("#state").html(data); 
       alert(data); 
       } 
      }); 

     }); 

    }); 


    </script> 
    <!------------------------Jquery-----------POST DATA END-------------------------------------> 

    <form id="registration_form" action="" method="post"> 

     <div id="state"></div> 


     <div class="reg-id"> 
      <label> 
       <input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value=""> 
      </label> 

     </div> 

     <div class="reg-id"> 
      <label> 
       <input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value=""> 
      </label> 
     </div> 

     <div class="reg-id-last"> 
      <label> 
       <input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value=""> 
      </label> 
     </div> 
      <input type="submit" value="submit" tabindex="3" name="reg_btn" id="id-submit"> 
     </div> 

    </form> 



    </body> 
    </html>

這是ajax.php文件，從那裏我需要發送響應，並使其在DIV ID =「狀態中可見

<?php 
if($_POST['reg_state']) 
{ 
    echo $_POST['reg_state']; 
} 
else{ 

    echo 'nothing'; 
} 
?>

來源

2015-06-30 Chaitanya Koripella

因爲您提交了表單，所以在您從服務器獲取AJAX響應之前，頁面正在刷新。要麼不提交表單提交按鈕，要麼綁定到提交事件，並告訴表單不要提交。 – crush

當以往我們使用的輸入[ '型'] =形式「提交」

，我們必須使用

$('#id-submit').click(function(e) { 

e.preventDefault(); 
}

以下是完整的工作代碼

<!DOCTYPE html> 
     <html lang="en"> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
      <title>Jquery Ajax</title> 
     </head> 
     <body> 
     <!------------------------Jquery-------POST DATA-----------------------------------------> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 

     <script type="text/javascript"> 
     $(document).ready(function() { 

       $('#id-submit').click(function(e) { 

       e.preventDefault(); 

       var reg_state = $('#reg_state').val(); 
       var reg_city = $('#reg_city').val(); 
       var reg_zip = $('#reg_zip').val(); 

       var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip } 


       //alert(dataString); 

       $.ajax 
       ({ 
        type: "POST", 
        url: "ajax_city.php", 
        data: dataString, 
        cache: false, 
        success: function(data) 
        { 
        $("#state").html(data); 
        // alert('hi'); 
        } 
       }); 

      }); 

     }); 


     </script> 
     <!------------------------Jquery-----------POST DATA END-------------------------------------> 

     <form id="registration_form" action="" method="post"> 

      <div id="state"></div> 


      <div class="reg-id"> 
       <label> 
        <input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value=""> 
       </label> 

      </div> 

      <div class="reg-id"> 
       <label> 
        <input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value=""> 
       </label> 
      </div> 

      <div class="reg-id-last"> 
       <label> 
        <input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value=""> 
       </label> 
      </div> 
       <input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit"> 
      </div> 

     </form> 



     </body> 
     </html>

ajax_city.php

<?php 
if($_POST['reg_state']) 
{ 
    echo 'STATE: '.$_POST['reg_state'].'<br/>'; 
    echo 'CITY: '.$_POST['reg_city'].'<br/>'; 
    echo 'ZIP: '.$_POST['reg_zip'].'<br/>'; 

} 
else{ 

    echo 'nothing to respond'; 
} 
?>

來源

2015-06-30 18:17:51

嘗試創建一個對象

var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip }

來源

2015-06-30 17:49:06 Elvin

我沒有得到來自ajax.php文件的回覆 –

我檢查了你的腳本，你需要更新18行'$（'＃id-submit'）。click（function（e）{e.preventDefault（）;' – Elvin

yes你這麼多 –

我相信你的問題就出在type=submit。與type=button更換這給你你想要的結果。

我不確定這是爲什麼，但我猜測它type=submit爲input提供了額外的功能。該頁面似乎在點擊提交按鈕後重新加載。

ps。不要忘記你實際上需要點擊按鈕才能觸發該功能。填寫輸入字段後進入回車將不會執行任何操作。

來源

2015-06-30 18:05:39 Rednax

這是因爲它將表單提交到表單動作url，如果沒有指定，它會提交到頁面，導致頁面刷新，因此，AJAX調用在頁面刷新之前沒有完成，他應該綁定到可能是提交事件而不是點擊事件。 – crush

你爲什麼「猜測」？ –

當使用提交按鈕提交表單時，無法獲得jQuery響應

回答

相關問題