Как Вы переопределяете существующую форму HTML для использования jQuery для регистрации формы?

У меня есть простая форма, которую я в настоящее время отправляю назад на сервер для обновления псевдонима. Какой код jQuery я добавляю (не изменяя форму) так, чтобы страница не обновлялась, но вместо этого jQuery отправит форму в фоновом режиме и затем откроется аварийное сообщение, содержащее ответ назад с сервера?

<form method="post" action="http://www.myserver.com/update_nickname" name="input">
    Quick form to test update_nickname:<br>
    New nickname:<input type="text" value="BigJoe" name="newNickname"><br>
    <input type="submit" value="Submit">
</form>

<script src="jquery-1.4.2.min.js" type="text/javascript"> </script>
13
задан Reigel 17 November 2014 в 07:31
поделиться

3 ответа

попробуйте прочитать это.

или

$("form").submit(function(e){
    var form = $(this);
    $.ajax({ 
         url   : form.attr('action'),
         type  : form.attr('method'),
         data  : form.serialize(), // data to be submitted
         success: function(response){
            alert(response); // do what you like with the response
         }
    });
    return false;
 });
26
ответ дан 1 December 2019 в 19:59
поделиться

Специально для этого есть плагин.

http://jquery.malsup.com/form/

1
ответ дан 1 December 2019 в 19:59
поделиться

Вам необходимо использовать jQuery для привязки к событию «submit» и предотвращения действия по умолчанию. Было бы немного эффективнее, если бы ваша форма и ввод псевдонима использовали id в дополнение к своим именам:

<script type="text/javascript">
    jQuery(function($){
      $("form[name=input]").submit(function(e){
        e.preventDefault(); // Keep the form from submitting
        var form = $(this);

        // Use the POST method to post to the same url as
        // the real form, passing in newNickname as the only 
        // data content
        $.post( form.attr('action'), { newNickname: form.find(':text').val() }, function(data){
          alert(data); // Alert the return from the server
        }, "text" );
      });
    });
</script>
5
ответ дан 1 December 2019 в 19:59
поделиться
Другие вопросы по тегам:

Похожие вопросы: