從提交ID進行阿賈克斯呼叫

Question

我有一個表單，其中當前發佈到一個硬編碼的PHP頁面的形式的行動，這工作正常，它張貼到數據庫沒有問題，但對我來說事情變得棘手的是我不想發佈到新頁面，所以我選擇使用ajax。所以我擺脫了表單中的行動領域，並把一些jquery做出一個ajax調用。我遇到的問題很好..它不起作用：D。有人可以看看我的js文件，並向我解釋我做錯了什麼或我該做什麼？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"> 

    <form> 
     <p>Comment</p> 
     <textarea name= "comment" rows="6" cols="50"></textarea><br /> 
     <input type="submit" name= "submit" value="submit" id = "submit"> 
    </form> 

$('#submit').on('click',function(){ 
 
     $.ajax({ 
 
      type  : 'POST', 
 
      url   : 'comment.php', 
 
      data  : formData, 
 
      dataType : 'json', 
 
     }) 
 
    });

Answer 1

你應該處理表單的 '提交' 事件在提交按鈕的 '點擊' 事件。您還應該在函數結束時使用return false;以防止表單發佈到新頁面。您正在處理自己提交的內容。另外，我會將action屬性重新放在表單元素上，以便在客戶端禁用JavaScript。給表單一個ID和目標。否則，你的代碼是正確的。

HTML

<form id="my-form" action="comment.php" method="post"> 
     <!-- input fields --> 
    </form> 

的JavaScript

$('#my-form').on('submit', function(){ 
     // code... 

     return false; 
    }); 

提供了action屬性，還有method屬性，在form元素將在您提交處理程序使這些提供給訪問以及爲任何JavaScript失敗提供適當的回退。這可能不是必需的，但可能對未來有所幫助。

你的處理函數目前可能是這個樣子：

的JavaScript

$('#my-form').on('submit', function(){ 

     // serialize the form 
     var formData = $(this).serialize(); 

     $.ajax({ 
      type  : this.method, 
      url   : this.action, 
      data  : formData, 
      dataType : 'json' 
     }) 
     .done(function (data) { 
      // do some stuff with 'data' 
     }) 
     .fail(function (error) { 
      // do some stuff with 'error' 
     }); 

     return false; 
    });