버튼 클릭시 AJAX 코드가 작동하지 않습니다.

Question

안녕하십니까. 처음으로 AJAX를 사용하고 있습니다.이 웹 사이트에서 기능을 구현할 수 있도록이 튜토리얼을보고 있습니다. https://www.youtube.com/watch?v=PLOMd5Ib69Y. 내가하려는 일은 사용자가 메시지를 쓸 수있는 양식을 작성하는 것입니다. 버튼을 클릭하면 메시지가 내 이메일로 전송됩니다. AJAX를 사용하여 다시로드하지 않고 단추 내용을 변경하려고합니다. 내가 어떻게 버튼의 속삭임을 클릭하면

Name: <br> <input type="text" size="40" name="un"> 
        <br> 
        Email: <br> <input type="text" size="40" name="email"> 
        <br> 

        Write us a Message! 
        <br>  
        <textarea rows="4" cols="50" name="msg" id="content"></textarea> 
        <br/> 
        <input type="button" value="Send Message!" onClick="ajax.send()" /> 

어떤 이유 :

<script src="/js/jquery-1.4.3.min.js" type="text/javascript"></script> 

<script> 
    var ajax = 
    { 
     send: function() 
     { 
      var userName = $("input[name=un]").val(); 
      var userEmail = $("input[name=email]").val(); 
      var userMsg = $("input[name=msg]").val(); 


     if(userName == "" || userEmail == "" || userMsg == "") 
     { 
      alert("All fields are required!"); 
     } 
     else 
     { 
      ajax.SetText("Sending..."); 
      $.post("sendMSG.php", { 

       name : userName, email : userEmail, message : userMsg 
      }, function(data){ 

       ajax.SetText(data); 
      }); 

     } 

     }, 
     SetText: function(text) 
     { 
      $("input[type=button]").val(text); 
     } 


    } 


</script> 

하고 HTML 형태 :

나는이 AJAX 코드가 있습니다. 내가 AJAX를 처음 사용하는 중이며 AJAX 코드 사용법을 모르겠다 고 말했습니다. 당신은을 사용하는 것 난 당신이 jquery를 사용하는 생각 P

감사를

Answer 1

을, 그래서 당신은

$(document).ready(function(){}); 

Answer 2

각 코드를 삽입해야합니다 그래서 대답은 간단 경우에 저에 쉽게 걸릴하시기 바랍니다 오히려 오래된 버전의 jQuery. jQuery Website.

이 예제에서는 submit 이벤트 리스너를 사용합니다. 하지만 먼저 우리는 DOM 요소가로드 확인해야 (. 우리가 submit 이벤트를 사용할 것을 위에서 언급 한 바와 같이 를)

<form id="myform" method="post"> 
    Name: <br> <input type="text" size="40" name="un"> 
<br /> 
    Email: <br> <input type="text" size="40" name="email"> 
<br /> 
    Write us a Message! 
<br />  
    <textarea rows="4" cols="50" name="msg" id="content"></textarea> 
<br /> 
    <input type="submit" value="Send Message!"/> 
</form> 

을 이제 jQuery를 위해 : 먼저 올바르게 양식을 설정해야 우리의 jQuery를 실행하기 전에. 즉 사용하여 수행됩니다 다음을 실행하기 전에

$(document).ready(function(){ 

    $('#myform').submit(function(e){ 
     e.preventDefault(); 

     $.post('sendMSG.php',{name: userName, email: userEmail, message: userMsg}, function(data) { 
      console.log(data); 
     }); 

    }); 

}); 

분명히

하고 모든 필요한 proccessing :

$(document).ready(function(){}); 

우리 jQuery를 설정하는 것은 우리가 우리의 submit 이벤트 리스너에서 수행 할 작업을 쓰는 것만 큼 간단합니다 $.post 아약스 요청

몇 가지 참고 사항 :

• 당신이 일어나고있는 기본 동작을 중지 이벤트 내에서 e.preventDefault() 또는 return false;를 사용할 수 있습니다.

e.PreventDefault()

$('#myform').submit(function(e){ 
    e.preventDefault(); 
    // do ajax and processing stuff 
}); 

return false;

$('#myform').submit(function(e){ 
    // do ajax and processing stuff 
    return false; 
}); 

• 당신은 당신에게 더 많은 옵션을 제공으로 jQuery.post 대신 jQuery.ajax를 사용하여 조사한다 (는 아래 참조).