Отправка HTML-формы с использованием JQuery AJAX

Я пытаюсь отправить HTML-форму с помощью AJAX, используя этот пример.

Мой HTML-код:

<form id="formoid" action="studentFormInsert.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <label class="title">Name</label>
        <input type="text" id="name2" name="name2" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

Мой сценарий:

<script type="text/javascript">
    $(document).ready(function() { 
        $('#formoid').ajaxForm(function() { 
            alert("Thank you for your comment!"); 
        }); 
    });
</script>

Это не работает, я даже не получаю предупреждающее сообщение, и когда я отправляю, я не хочу перенаправлять на другую страницу, я просто хочу показать предупреждающее сообщение.

Есть простой способ сделать это?

PS: У меня есть несколько полей, я только что привел два в качестве примера.


jquery ajax form-submit
person Oliveira    schedule 01.05.2013    source источник
comment
Вы не можете покончить с HTML-компонентом формы? и используйте jquery для публикации обработчика нажатия кнопки перехода   -  person gawkface    schedule 19.09.2018

Ответы (3)


arrow_upward
191
arrow_downward

Краткое описание AJAX

AJAX - это просто асинхронный JSON или XML (в большинстве новых ситуаций JSON). Поскольку мы выполняем задачу ASYNC, мы, вероятно, предоставим нашим пользователям более приятный интерфейс. В этом конкретном случае мы отправляем ФОРМУ с помощью AJAX.

Действительно быстро есть 4 общих веб-действия GET, POST, PUT и DELETE; они напрямую соответствуют SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA и DELETING DATA. По умолчанию веб-форма HTML / ASP.Net / PHP / Python или любое другое действие form - это отправить, что является действием POST. Из-за этого ниже будет описано выполнение POST. Однако иногда с http вам может потребоваться другое действие и, вероятно, вы захотите использовать .ajax.

Мой код специально для вас (описан в комментариях к коду):

/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $(this),
    url = $form.attr('action');

  /* Send the data using post with element id name and name2*/
  var posting = $.post(url, {
    name: $('#name').val(),
    name2: $('#name2').val()
  });

  /* Alerts the results */
  posting.done(function(data) {
    $('#result').text('success');
  });
  posting.fail(function() {
    $('#result').text('failed');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="formoid" action="studentFormInsert.php" title="" method="post">
  <div>
    <label class="title">First Name</label>
    <input type="text" id="name" name="name">
  </div>
  <div>
    <label class="title">Last Name</label>
    <input type="text" id="name2" name="name2">
  </div>
  <div>
    <input type="submit" id="submitButton" name="submitButton" value="Submit">
  </div>
</form>

<div id="result"></div>

Документация

С веб-сайта jQuery $.post документация.

Пример: отправка данных формы с помощью запросов ajax

$.post("test.php", $("#testform").serialize());

Пример: опубликуйте форму с помощью ajax и поместите результаты в div

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <form action="/" id="searchForm">
            <input type="text" name="s" placeholder="Search..." />
            <input type="submit" value="Search" />
        </form>
        <!-- the result of the search will be rendered inside this div -->
        <div id="result"></div>
        <script>
            /* attach a submit handler to the form */
            $("#searchForm").submit(function(event) {

                /* stop form from submitting normally */
                event.preventDefault();

                /* get some values from elements on the page: */
                var $form = $(this),
                    term = $form.find('input[name="s"]').val(),
                    url = $form.attr('action');

                /* Send the data using post */
                var posting = $.post(url, {
                    s: term
                });

                /* Put the results in a div */
                posting.done(function(data) {
                    var content = $(data).find('#content');
                    $("#result").empty().append(content);
                });
            });
        </script>
    </body>
</html>

Важная заметка

Без использования OAuth или как минимум HTTPS (TLS / SSL), пожалуйста, не используйте этот метод для защиты данных (номера кредитных карт, SSN, все, что связано с PCI, HIPAA или входом в систему).

person abc123    schedule 01.05.2013
comment
@ abc123 как мне установить в этом заголовок запроса авторизации? Я пробовал beforeSend: function (xhr) { xhr.setRequestHeader("Authorization", "*****"); xhr.setRequestHeader("contentType", "application/json;charset=UTF-8"); }, Но это не устанавливает никакого заголовка - person mahendra kawde; 05.10.2015
comment
@mahendrakawde, вам нужно будет использовать $.ajax, который я могу написать пример, если хотите, но это действительно отдельный вопрос - person abc123; 06.10.2015
comment
@ abc123 у меня есть поток, инициированный для этого. позвольте мне поделиться этим с вами. - person mahendra kawde; 06.10.2015
comment
@ abc123 см. этот stackoverflow.com/questions/32943042/ - person mahendra kawde; 06.10.2015
comment
Что делать, если URL-адрес запроса POST - другой URL-адрес? Я заметил, что они используют studentFormInsert.php в действии .. Поэтому, если я хочу использовать localhost: 3000, я предполагаю, что мы должны использовать localhost: 3000 в действии, но это не работает .. Пожалуйста, помогите! - person munmunbb; 15.03.2017
comment
@WendyMunmunWang, вам нужно указать его на вашу фактическую конечную точку службы (страницу, на которой есть метод, который вы вызываете). Обычно localhost: 3000 не будет конечной точкой, это домен ... вам понадобится localhost:3000/myEndpoint, поэтому: <form id="formoid" action="endpoint.php" title="" method="post"> Также вам не нужен localhost: 3000, если это не домен, на котором обслуживается javascript. Поскольку это кажется более подходящим для чата ... чат-комната - это chat.stackoverflow.com/rooms/138238/wendymunmunmunwang - person abc123; 16.03.2017
comment
Можем ли мы вообще избежать использования публикации формы и просто сделать публикацию jquery на обработчике кликов кнопки (которая является кнопкой html, не являющейся частью какой-либо формы div). Таким образом, event.preventdefault тоже не понадобится? - person gawkface; 19.09.2018
comment
@harshvchawla, конечно, но тогда ваш запрос выбора для переменных, извлеченных из элемента html, отличается - person abc123; 25.09.2018

arrow_upward
3
arrow_downward

Если вы добавите:

jquery.form.min.js

Вы можете просто сделать это:

<script>
$('#myform').ajaxForm(function(response) {
  alert(response);
});

// this will register the AJAX for <form id="myform" action="some_url">
// and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response
</script>

ЗАМЕТКА:

Вы можете использовать простой $ ('FORM'). Serialize (), как предложено в сообщении выше, но это не будет работать для ВВОДА ФАЙЛОВ ... ajaxForm () будет.

person Martin Zvarík    schedule 07.09.2017

arrow_upward

arrow_downward

person    schedule
comment
Успешная / завершенная функция произойдет, когда вызов будет завершен и он получит от сервера 200 OK - person Varun S; 01.05.2013
comment
привет, я положил: $ (документ) .ready (function () {$ ('# formoid'). submit (function () {var postData = text; $ .ajax ({type: post, url: url, data: postData , contentType: studentFormInsert.php, success: function (responseData, textStatus, jqXHR) {alert (данные сохранены)}, error: function (jqXHR, textStatus, errorThrown) {console.log (errorThrown);}})}); на самом деле не работает .. требуется какая-либо модификация на стороне php? - person Oliveira; 01.05.2013
comment
хороший пример и хорошо написанный, пожалуйста, опубликуйте ответ с ним, но не просто пример кода без объяснения. - person abc123; 01.05.2013
comment
Я не понимаю, как связать это с формой, которую хочу опубликовать - person Piotr Kamoda; 30.03.2017
comment
Почему нет объяснения? - person Rich; 02.02.2018
comment
Такое использование успеха не является устаревшим stackoverflow.com/questions/15821141/ - person drooh; 05.12.2018