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()"> 

我只是证实按下回车不会做一个提交，答案是我目前的基本代码一致。