AJAX和Javascript：程序在表單提交時留下主頁

我剛剛學習AJAX，請耐心等待。我正在使用AJAX編寫一個小程序，它使用HTML/Javascript文件和PHP文件向數據庫添加和檢索信息。我嘗試了幾次渲染，但沒有任何運氣讓頁面停留在主頁面上，只是用表明錯誤或成功的消息重新設置了窗體。 PHP文件使用mysqli來設置，以處理文本字段和文件的提交，然後回顯該消息。我使用JQuery Cookbook作爲我最新版本的指南，但仍然是主頁面在瀏覽器中保留並打開PHP文件，當然這是空白的。但是，它正在向數據庫添加一個新行，所以至少這是行得通的。AJAX和Javascript：程序在表單提交時留下主頁

我正在使用PHPStorm和Firebug。任何想法爲什麼我的代碼不工作？

<!DOCTYPE html> 
<html> 
<head> 
    <script src="jquery.min.js"></script> 
    <script src="jquery.validate.js"></script> 
    <script> 
     $('addForm').validate(); 
     $('addForm').submit(function(event){ 
      event.preventDefault(); 

      $('input[name="usingAJAX"]', this).val('true'); 
      var $this=$(this); 
      var url=$this.prop('action'); 
      var dataToSend = $this.serialize(); 
      var callback = function(dataReceived) { 
       $this.hide(); 
       //result message 
       $('body').append(dataReceived) 
      }; 
      var typeOfDataToReceive = 'html'; 
      $.get(url, dataToSend, callback, typeOfDataToReceive) 
     }); 
    </script> 
</head> 
<body> 
    <form id="addForm" action="addActorInfo.php" enctype="multipart/form-data"> 
     <input type="hidden" name="usingAJAX" value="false"/> 
     <label for="aname">Actor Name: </label> 
     <input type="text" name="aname" id="aname" class=required/> 
     <br> 
     <br> 
     <label for="aimage">Actor Photo: </label> 
     <input id="aimage" type="file" name="aimage" class="required"> 
     <br> 
     <br> 
     <input type="submit" value="ADD"/> 
    </form> 
</body> 
</html>

來源

2013-02-19 user1852050

不應該是'$（'＃addForm'）'？（哈希表示它正在尋找一個ID） – 2013-02-19 20:58:32

我不認爲你可以通過這種方式執行一個帶有「文件」的文件「」。 – Pointy 2013-02-19 21:02:50

嘗試在.submit（）方法的末尾添加返回false，這會停止提交表單 – tobspr 2013-02-19 21:02:53

有幾個問題。

表單的選擇，$('addForm')，缺少#因爲每個人都指出。
由於您的form在調用JavaScript時尚不存在，所以您需要這樣做，因爲您缺少$(document).ready()函數。
你並不需要另一個submit處理程序，因爲jQuery驗證插件具有內置的。As per docs，一個submitHandler callback function「的正確的地方通過Ajax提交表單驗證它之後。」

事情是這樣的：

（假設OP的.ajax功能已經是正確的）

<script src="jquery.min.js"></script> 
<script src="jquery.validate.js"></script> 
<script> 
$(document).ready(function() { 
    $('#addForm').validate({ 
     //other options, 
     submitHandler: function (form) { 

      // your ajax code 

      return false; // <-- stop form redirection since you used ajax 
     } 
    }); 
}); 
</script>

來源

2013-02-19 21:41:02 Sparky

謝謝你的幫助:)。我嘗試了你的建議，但返回了一串錯誤。它看起來沒有任何東西被傳遞給php文件，因爲那裏的代碼是空的。錯誤包括aname和aimage的未定義索引，fopen（）錯誤，因爲文件名爲空，而fread（）和fclose（）。 – user1852050 2013-02-19 21:50:17

我的回答只顯示瞭如何在Validate插件中使用'ajax'，並假設你的'ajax'函數是正確的並且正常工作。 – Sparky 2013-02-19 21:55:59

感謝您的回覆。在我發佈這個問題之前，ajax部分工作。它成功插入了兩條記錄，但是離開了頁面。我不確定爲什麼它不再。你看到任何具體問題嗎？ – user1852050 2013-02-19 22:05:32

有幾個問題，大多數評論已經討論：

當您設置「提交」手時，您的選擇器勒爾錯了。它應該是$('#addForm')
您試圖使用$.get()來處理包含「文件」<input>元素的表單。這是不能做到的。

要上傳文件，您可以：

發表您的形式（必須是POST，而不是GET），並給它一個隱藏元件在「目標」屬性頁。來自服務器的響應應該包含JavaScript，以根據需要更新父頁面（包含表單的頁面）。
使用HTML5文件API獲取文件內容，然後通過XHR上傳。我從來沒有試過這樣做，但here is an older SO question about it。

來源

2013-02-19 21:47:55 Pointy

啊，我看到我需要將$ .get（）更改爲$ .post。爲目標屬性添加一些html很容易。我將如何在Javascript中編碼？ – user1852050 2013-02-19 21:55:29

編輯。我剛剛在PHPStorm中檢查了用$ .post（）替換$ .get（），但沒有定義它。我有jquery和jquery.validate包括在內。 $ .post（）是否在另一個庫中可用？如果沒有，我還可以如何編碼？ – user1852050 2013-02-19 22:00:37

@ user1852050在修復選擇器（「addForm」問題）之前，表單通過瀏覽器使用其普通的本機發布機制發佈到服務器。這就是頁面被覆蓋的原因。你的'.get（）'沒有任何關係:-) – Pointy 2013-02-19 22:07:36

AJAX和Javascript：程序在表單提交時留下主頁

回答

相關問題