왜 e.preventDefault가 필요합니까?

아래의 코드를 사용하여 이메일을 보내고 있습니다. e.preventDefault();를 제거하면 작동하지 않습니다. 양식의 기본 제출 동작을 비활성화해야하는 이유는 무엇입니까? e.preventDefault();없이 그것을 어떻게 얻을 수 있습니까?왜 e.preventDefault가 필요합니까?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#divLoading').hide(); 
      $('#appointment').submit(function (e) { 
       e.preventDefault(); 



       var serviceURL = 'WebService.asmx/SendMail'; 
       var Name = $("#fname").val(); 
       var Email = $("#email").val(); 
       var Telephone = $("#phone").val(); 
       var Comment = $("#comment").val(); 

       if ($("#fname").val().length == 0) { 
        alert("Please Enter Name"); 
        $("#fname").focus(); 
        return false; 
       } 

       if ($("#email").val().length == 0) { 
        alert("Please Enter Your Email Address."); 
        $("#email").focus(); 
        return false; 
       } 

       if (Email.indexOf("@") == -1) { 
        alert("Please Enter Your Email Address."); 
        $("#email").focus(); 
        return false; 
       } 
       if (Email.indexOf(".") == -1) { 
        alert("Please Enter Your Email Address."); 
        $("#email").focus(); 
        return false; 
       } 

       $('#divLoading').show(); 

       $.ajax({ 
        type: "POST", 
        url: serviceURL, 
        data: '{"name":"' + Name + '","address":"' + Email + '","telephone":"' + Telephone + '","comment":"' + Comment + '"}', 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: successFunc, 
        error: errorFunc 
       }); 

       function successFunc(data, status) { 

        // alert("Mail Sent!"); 
        $('#divLoading').hide(); 
        window.location = "contat-submit.php"; 

       } 

       function errorFunc() { 
        // alert('error'); 
       } 

      }); 

     }); 

</script> 
</head> 
<body> 
    <form name="appointment" id="appointment" method="post" action="About.aspx"> 
    <div> 
    </div><div id="leftcolumn4"><div class="h2">Contact Form</div> 
     <form name="appointment" id="Form1" method="post" action="send_contact.php"> 
Full Name: 
<br /> 
<label> 
    <input name="fname" type="text" class="form-input" id="fname" size="30" /> 
</label> 
<br /><br /> 

Email Address:<br /> 
<label> 
    <input name="email" type="text" class="form-input" id="email" size="30" /> 
</label><br /><br /> 
Telephone: 
<br /> 
<label> 
    <input name="phone" type="text" class="form-input" id="phone" size="30" /> 
</label> 
<br /><br /> 
Your Comment:<br /> 
<label> 
<textarea name="comment" cols="28" rows="4" class="form-input-box" id="comment"></textarea><br /> 

     <br /> 
&nbsp;</label><input name="submit" type="submit" class="form-input-submit" value="Submit" id="btnMail"/> 
    </div> 
    </form> 
</body> 
</html>

출처

2013-04-30 chamara

양식이'$ .ajax (...) '와 함께 제출 되었기 때문에. 'e.preventDefault()'가 없으면 양식은 두 번 제출되고 페이지는'about.aspx'로 리디렉션됩니다. – Andreas

이 코드는 양식 데이터가 GET 또는 POST 요청 대신 ajax와 함께 전송되므로 브라우저가 About.aspx으로 이동하도록하므로 양식의 기본 제출 동작을 사용하지 않도록 설정해야합니다.

e.preventDefault(); 없이는 false을 반환 할 수 있습니다.
아니면 사용하여 서버 측에서 POST 데이터를 얻을 것이라고하는 경우에 아약스를 사용하지 않음으로써 : 당신은 당신이 전혀 제출 양식을 필요가 없습니다 의미 아약스를 사용하는 Page.Request.QueryString["htmlElementName"]

출처

2013-04-30 06:21:56 GitaarLAB

event.preventDefault()있어서 발생 element에서의 기본 동작을 정지한다.

대신 return false을 사용할 수 있습니다.

예를 들어, 클릭 된 앵커는 브라우저를 새 URL로 가져 가지 않습니다. event.isDefaultPrevented()를 사용하면이 이벤트에 의해 트리거 된 event handler에 의해이 메서드가 호출되었는지 확인할 수 있습니다.

출처

2013-04-30 06:12:42

e.preventDefault()을 사용하지 않으면 양식 전송의 기본 동작이 실행됩니다. 브라우저가 양식의 action 속성으로 보내고 브라우저가 사라질 것입니다.

출처

2013-04-30 06:17:52

. 여전히 페이지와 같은 이메일을 보낸 후 about.aspx로 리디렉션하려는 경우로 당신의 성공의 기능을 변경 : 양식의 기본 포스트 동작을 허용하는 경우

function successFunc(data, status) { 
    $('#divLoading').hide(); 
    window.location = "about.aspx"; 
}

양식이 아약스 요청하기 전에 게시 할 예정입니다 귀하의 이메일이 전송되는 것을 방해합니다.

부수적으로, 당신은 혼란을 일으킬 수있는 이름이 약속 인 2 개의 양식이 있습니다. 코드가 두 번째가 아닌 첫 번째 코드를 참조합니다.

출처

2013-04-30 06:31:52 Sav

왜 e.preventDefault가 필요합니까?

답변

관련 문제