Ajax調用和返回結果

Question

我不知道我在ajax調用中做了什麼錯誤。我想將數據返回到我的腳本並使用它，但它不返回結果。以下是我想澄清的一些事情，以及我對ajax編程的新東西。如果ajax調用成功並將結果返回給腳本。結果將在腳本中的哪裏出現。我將創建一個保存結果或數組... 下面是HTML

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform"> 
    <div id="response"></div> 
     <div> 
     <label>Name</label><input type="text" name="name" id="nameid"> 
    </div> 
    <div> 
     <label>Phone Number</label><input type="text" name="phone" id="phoneid"> 
    </div> 
     <div> 
     <button type="submit" class="btn" id="btnsubmit">Submit</button> 
    </div> 
    </form> 
     <div id="success"></div> 


//my script 

$('#btnsubmit').click(function(e){ 
    e.preventDefault(); 
     var nameid = $('#nameid').val(); 
    var phoneid = $('#phoneid').val(); 
     var validate_msg = ''; 
     if (nameid == ''){ 
     validate_msg = '<p> Name is Required. </p>';  
    } 
    if (phoneid == '' || ($.isNumeric(phoneid) == false)){ 
     validate_msg += '<p> Phone field is either empty or non numeric. </p>'; 
    } 

    if (validate_msg != ''){ 
    $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' + validate_msg); 
    } else { 
     var formData = $('form #reserveForm').serialize(); 
     submitForm(formData); 
    } 
}); 


    function submitForm(formData){ 
     $.ajax({ 
      type: 'POST', 
      url: 'reservation.php', 
      data:formData, 
      dataType:'json', 
      success: function(data){ 
       $("#success").html(data); 
      }, 
      error: function(XMLHttpResponse, textStatus, errorThrown){ 
        $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition'); 
      } 
     }); 

    } 

Answer 1

如果你想ajax form submission和需要填充的結果在成功DIV without refresh，則需要return false

不要使用

<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" id="reserveform"> 

這裏不需要形式的行動，嘗試像

<form id="reserveform" onsubmit="return submitForm();"> 

在功能使用form serialize所以在所有形式的輸入元件值將可用

function submitForm(){ 
     var formData = $("#reserveform").serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'reservation.php', 
      data:formData, 
      dataType:'json', 
      success: function(data){ 
       $("#success").html(data); 
      }, 
      error: function(XMLHttpResponse, textStatus, errorThrown){ 
        $('#success').removeClass().addClass('error').html('<p>There was an ' + errorThrown + ' due to ' + textStatus + 'condition'); 
      } 
     }); 
     return false; // use this otherwise the form will be submitted and results an entire page refresh 
    } 

Answer 2

請儘量將

你要的onload把btnSubmit按鈕單擊事件中或文檔準備

$(document).ready(function() 
    { 

    $('#btnsubmit').click(function(e){ 
     e.preventDefault(); 
      var nameid = $('#nameid').val(); 
     var phoneid = $('#phoneid').val(); 
      var validate_msg = ''; 
      if (nameid == ''){ 
      validate_msg = '<p> Name is Required. </p>';  
     } 
     if (phoneid == '' || ($.isNumeric(phoneid) == false)){ 
      validate_msg += '<p> Phone field is either empty or non numeric. </p>'; 
     } 

     if (validate_msg != ''){ 
     $('#response').addClass('error').html('<strong>Please correct the errors below </strong>' + validate_msg); 
     } else { 
      var formData = $('form #reserveForm').serialize(); 
      submitForm(formData); 
     } 
    }); 

    } 

    ); 

Answer 3

，因爲數據是JSON格式你不能這樣使用$("#success").html(data);。在這裏，數據是一個對象。你需要解析它並分配給標籤。

Answer 4

我看到您配置了表單以提交到您已在的同一文檔。這很好，我們一直這樣做。

但是，您也停止提交表單，然後使用AJAX提交值。您指定reservation.php作爲您的ajax處理器。這是你已經在同一個PHP頁面嗎？如果是這樣，那麼我知道問題是什麼：你不能那樣做。

通過設計，AJAX必須使用外部PHP文件來處理AJAX。如果您嘗試在同一文檔中執行此操作，那麼AJAX只會回顯文檔本身的完整HTML。

簡答：使用外部PHP文件。這是設計。

有關此問題的更多信息，請參閱this other answer。

看到這些其他職位有關AJAX和進一步的信息獲取方式進入PHP處理腳本，並從PHP處理腳本返回信息回：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1