Использование AJAX для отправки формы

Я разработал API Python и теперь интегрирую его с шаблоном HTML, который я загрузил. Это простой HTML-шаблон на одной странице с формой, чтобы принять имя альбома и имя исполнителя. Я ищу для обработки формы с помощью AJAX. Поэтому, как только форма была успешно отправлена, она заменяется сообщением, возвращенным API.Использование AJAX для отправки формы

The (упрощенный) фрагмент кода HTML является:

<div class="form"> 
    <form role="form" action="form.php" id="signup"> 
     <div class="form-group"> 
      <label>Artist Name</label> 
      <input type="text" name="artist" id="artist"> 
     </div> 
     <div class="form-group"> 
      <label>Tracking Number</label> 
      <input type="text" name="album" class="album"> 
     </div> 
     <button type="submit" class="btn">Submit!</button> 
    </form> 
</div>

Тогда у меня есть JS файл я импортировать в начале HTML файла. Ниже приведен JS-файл.

$(function() { 
    var form = $('#signup'); 

    var formMessages = $('#form-messages'); 

    $(form).submit(function(e) { 
     e.preventDefault(); 
     var formData = { 
      'artist' : $('input[name=artist]').val(), 
      'album'    : $('input[name=album]').val(), 
     }; 

     // process the form 
     $.ajax({ 
      type  : 'POST', 
      url   : 'form.php', 
      data  : formData, 
      dataType : 'json' 
    }) 
     .done(function(data) { 
       var content = $(data).find('#content'); 
       $("#result").empty().append(content); 
      }); 
});

Я думаю, что проблема с .done(function(data)) однако, на сайте я нашел код на не было ясно.

form.php возвращает строку JSON. В тот момент, когда я использую форму, она отправляет информацию в API Python, а API Python возвращает сообщение JSON. Но я не могу получить доступ к сообщению JSON. Он содержится в

'code': X, 'message':'returned messaged...'

В идеале я хотел бы сделать оператор if/else. Таким образом,

if code = 1: 
    display: Success

и т. Д., Но я понятия не имею, с чего начать с него в PHP/JS.

источник

2016-10-03 Anonymous

удалить тег формы и оставить теги ввода и кнопки, форма отправляет себя, когда вы нажимаете на кнопку. Если вы не хотите удалять форму, просто добавьте это 'onsubmit = return false;' в тег формы. – 11thdimension

Что вы хотите, чтобы произошло? Я не верю, что вы изложили свои ожидания в своем посте. Кроме того, вы не разбираете возвращаемые данные в любой момент. – Santi

@ 11thdimension Форма не отправляется, когда он нажимает кнопку. Он вызывает форму отправки действия, но заблокирован 'e.preventDefault', нет? – Santi

Я смог заставить его работать в конце концов, увидев несколько других ответов переполнения стека и другого веб-сайта.

Я добавил один DIV в HTML файл под кнопкой до конца формы, чтобы сделать:

<form> 
    ... 
    ... 
    <button type="submit" class="btn">Submit!</button> 
    <div id="thanks" style="display:none;"></div> 
</form>

Затем в файле JS I поправками .done (функция (данные)), чтобы быть:

.done(function(data) { 
      if (data.result == '1') { 
       $('#thanks').show().text("Success!"); 
       $('input[type="text"],text').val(''); 
      } else if (data.result == '2') { 
       $('#thanks').show().text("Album and Artist already exists"); 
      } else { 
       $('#thanks').show().text("Uh Oh. Something has gone wrong. Please try again later or contact me for more help"); 
      } 
     });

источник

2016-10-03 22:15:59

Использование AJAX для отправки формы

ответ

Смежные вопросы