jQuery的阿賈克斯張貼到自身，而不是腳本

Question

我有一個表格：

<form name="emailform" id="emailform" onsubmit="emailSubmit()" method="post"><div> 
     <input type="text" id="email" name="email" value=""> 
     <input class="btn" type=submit value="Submit"></div> 
      </form> 

這裏的emailSubmit（）：

function emailSubmit(){ 
     $.ajax({ 
         type: "POST", 
         url: "mysitesip/addemail.php", 
         data: { 
          email: $("#email").val() 
         }, 
         success: function (data) { 
          $('#success').html(data); 

         } 
        }); // end Ajax  
    } 

當我點擊提交布通，它的帖子，用電子郵件地址作爲參數，自己，而不是addemail.php，並刷新頁面？這是爲什麼發生？如果我擺脫了method =「post」，那麼表單會向自己發出一個GET請求，但會以正確的電子郵件作爲參數。這對我來說非常混亂，因爲.ajax方法明確指出類型是POST。爲什麼要改變表單的「方法」來改變emailSubmit（）的發佈？

.ajax調用是從另一個我的頁面上非常相似的用法逐字採取的，它工作正常。

（當我說「這是投稿」或「這是歌廳」，我使用螢火看到這些東西）

Answer 1

你什麼都不做，取消標準形式提交。最終的結果是Ajax的東西提交給您指定的URI，然後表單作爲正常提交（因爲您忘記了action屬性，因此當前頁面的URI）。

1. 停止使用內部事件屬性（即onsubmit屬性）
2. 使用JS event binding代替
3. prevent the default submit action
4. 請確保您有一個動作屬性以合理的地方指着因此，如果JS失敗了任何理由，該表格仍然有效。 C.F. Unobtrusive JavaScript。

或者，作爲一個快速和骯髒的黑客... return false在onsubmit屬性的末尾。

Answer 2

您需要返回false，這樣的形式不提交，並在處理程序返回值：

onsubmit="return emailSubmit()" 

和：

function emailSubmit(){ 
    $.ajax({ 
        type: "POST", 
        url: "mysitesip/addemail.php", 
        data: { 
         email: $("#email").val() 
        }, 
        success: function (data) { 
         $('#success').html(data); 

        } 
       }); // end Ajax  
    return false; 
} 

Answer 3

http://www.w3schools.com/html/html_forms.asp - 「一個提交按鈕用於發送表單數據到服務器。「

我要做的就是以下 -

<form name="emailform" id="emailform" method="post"><div> 
    <input type="text" id="email" name="email" value=""> 
    <input class="btn" type=button onclick="emailSubmit()"></div> 
</form> 

---

編輯，如指出我原來的帖子將無法正常工作。我應該發的帖子 -

<form name="emailform" id="emailform" ><div> 
    <input type="text" id="email" name="email" value=""> 
     </div> 
</form> 
<input class="btn" type=button onclick="emailSubmit()"> 

我只是證實按下回車不會做一個提交，答案是我目前的基本代碼一致。