jquery를 사용하여 양식을 게시하려면 기존 html 양식을 어떻게 재정의합니까?

jquery를 사용하여 양식을 게시하려면 기존 html 양식을 어떻게 재정의합니까?

현재 닉네임을 업데이트하기 위해 서버에 다시 올리는 간단한 양식이 있습니다.페이지가 새로 고쳐지지 않게 하려면 (양식을 변경하지 않고) 어떤 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>

한번 읽어보세요.

아니면

$("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;
 });

jQuery를 사용하여 "제출" 이벤트에 바인딩하고 기본 액션을 방지해야 합니다.양식과 닉네임 입력을 사용한다면 조금 더 효율적일 것입니다.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>

플러그인이 있어요.

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

언급URL : https://stackoverflow.com/questions/2967066/how-do-you-override-an-existing-html-form-to-use-jquery-to-post-the-form