JQuery. AJAX размещения для себя вместо сценария

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 был взят дословно из ОЧЕНЬ похожего использования на другой из моих страниц, где он работает нормально.

(Когда я говорю «это ПОЗИЦИЯ» или «ПОЛУЧАЕТ», я использую firebug, чтобы увидеть эти вещи)

Answer 1

Вы ничего не делаете, чтобы отменить отправку стандартной формы.

В результате Ajax отправляет данные на указанный вами URI, затем форма отправляется как обычно (на URI текущей страницы, потому что вы забыли атрибут action).

1. Прекратить использование внутренних атрибутов событий (т. Е. Атрибута onsubmit)
2. Используйте JS привязку события вместо
3. запретить действие отправки по умолчанию
4. Убедитесь, что у вас есть атрибут действия, указывающий на разумное место, поэтому, если JS не работает по какой-либо причине, форма все еще работает. c.f. Ненавязчивый JavaScript .

Или как быстрый и грязный хак ... return false в конце атрибута onsubmit.

Answer 2

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

Я только что подтвердил, что нажатие клавиши ввода не выполняет отправку, и ответ соответствует моей текущей кодовой базе.

Answer 3

Вам необходимо вернуть 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;
}