2017-09-26 1 views
0

데이터베이스에서 UPDATE 문을 수행하기 위해 "변경"버튼을 클릭하고 다른 JSP 페이지로 양식 데이터를 보내려고합니다. 어떤 이유로 나는 "햄"경고가 팝업되지 않기 때문에 AJAX 호출과 함께 click() 함수를 실행하는 "업데이트"id 버튼을 얻을 수 없습니다. 죄송합니다. 여러 가지를 시도했기 때문에 스크립트 태그에서 여러 가지 주석 처리 방법을 주석 처리했습니다. 누군가가 나를 도와 줄 수 있습니까?내 AJAX 게시물 요청이 어떻게 작동하지 않습니까?

<!DOCTYPE html> 

<head> 
    <script src="/.jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://code.jquery.com/jquery=latest.min.js" type="text/javascript"> 
    var getUrlParameter = function getUrlParameter(sParam) { 
     var sPageURL = decodeURIComponent(window.location.search.substring(1)), 
     sURLVariables = sPageURL.split('&'), 
     sParameterName, 
     i; 
     for (i = 0; i < sURLVariables.length; i++) { 
     sParameterName = sURLVariables[i].split('='); 
     if (sParameterName[0] == sParam) { 
      return sParameterName[1] == undefined ? true : sParameterName[1]; 
     } 
     } 
    }; 

    $(document).ready(function() { 
     var key = getUrlParameter("key"); 

    }); 
    $(form).submit(function() { 
      if (-1 == this.action.indexOf('register')) { 
      var jForm = $(this); 
      $.post(this.action, $(this).serialize(), function(data) { 
       if (data.status == 'SUCCESS') { 
        jForm[0].action = data.redirectUrl; 
        jForm.submit(); 
       } 
       return false; 
       } 
      } 
      }); 

     window.onload = function() { 
      document.getElementById("submit").onclick = function() { 
      location.href = "/View.jsp"; 
      } 
     } 

     window.onload = function() { 
      document.getElementById("update").onclick = function() { 
      location.href = "/View.jsp"; 
      } 
     } 
     $(document).ready(function() { 
      $('#update').on('click', function(e) { 
        alert('ham'); 
        $.ajax({ 
        type: "post", 
        url: "change.jsp", 
        data: $("#form").serialize(), 
        success: function(msg) { 
         alert(msg.data); 
        }, 
        error: function(xhr, ajaxOptions, thrownError) { 
         alert(xhr.status); 
         alert(thrownError); 
        } 
        }); 


        $(document).ready(function() { 
        function click() { 
         alert('ham'); 
         $.ajax({ 
         type: "post", 
         url: "change.jsp", 
         data: $("#form").serialize(), 
         success: function(msg) { 
          alert(msg.data); 
         }, 
         error: function(xhr, ajaxOptions, thrownError) { 
          alert(xhr.status); 
          alert(thrownError); 
         } 
         }); 

         window.location.href = "change.jsp"; 
         return false; 
        } 
        }); 



        /*function validateForm(){ 
        var x=document.forms["insert"]["ID"].value; 
        alert(x.len()); 
        if(x==null||x==""){ 
        alert("ID must be filled out"); 
        return false; 
        } 
        }*/ 

    </script> 
</head> 

<body> 
    ... 
    <form id="myForm" action="register" method="post" name="insert"> 
    ID: 
    <input type="text" name="ID" required value="<%=id%>" /> 
    <br/> RHINO: 
    <input type="text" name="rhino" required value="<%=rhino%>" /> 
    <br/> OX: 
    <input type="text" name="ox" required value="<%=ox%>" /> 
    <br/> HORSE: 
    <input type="text" name="horse" required value="<%=horse%>" /> 
    <br/> 

    <input type="submit" value="Submit" id="submit" /> 
    <!--<input type="submit" value="Update" id="change"/>--> 
    <button id="update" onclick="return click()">Change</button> 
    </form> 
    ... 
</body> 

</html> 
+1

약간 엉망입니다. 다중 docment.ready 및 window onload 함수. 때로는 서로 보입니다. document.ready 내에 있어야하는 일부 항목 (예 : 제출자 핸들러)이 아닙니다. 또한 꽤 다른 비트의 복제본 인 것으로 보이는 코드입니다. 아래 답변에서 알 수 있듯이 거의 확실하게 범위 지정 문제를 제시합니다. 모든 것을 하나의 document.ready로 통합하여 시작할 수 있습니다. 중복을 제거한 다음 다시 시도하십시오. 마치 당신이하고있는 일을 실제로 이해하지 않고서도 기분이 좋아지면 document.ready 등을 추가하는 것처럼 보입니다. – ADyson

+0

@ sundance91 : 질문을 훼손하거나 기존 응답을 무효화하지 마십시오. 새로운 질문이 있으면 새로운 질문으로 게시하십시오. 또한 이것을 변경 한 질문은 본질적으로 스택 오버플로 형식에서 확인할 수 없음을 유의하십시오. 그것은 너무 광범위했고 인터넷에서 사용 가능한 자습서의 끝없는 수에 의해 대답 될 것입니다. – David

답변

3

당신은 폐쇄 된 범위에서 함수를 정의하고 있습니다 : 익명 functionready 핸들러로 사용되는 내

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

그래서 그것은 단지 존재는 다음과 같이 현재 JSP 페이지가 보인다. 일단 그 함수가 종료되면, 아무것도 참조하지 않으면 그 범위에 정의 된 것이 더 이상 사용되지 않습니다.

은 그럼 당신은 전역 범위에서 함수를 호출하려고 :

<button id="update" onclick="return click()">Change</button> 

그래서 함수를 찾을 수 없습니다.

$(document).ready(function() { 
    $('#update').click(function() { 
     // the code in your click() function goes here 
    } 
}); 

그리고 인라인 처리기를 제거 : 대신, HTML에서 인라인 코드에서 호출이 이미 사용하고있는 jQuery 라이브러리를 사용하여 클릭 이벤트에 핸들러를 연결하는 시도의

<button id="update">Change</button> 

(참고 : 매우 잘이 코드에서 다른 문제가있을 수 있습니다 전혀 들여 쓰기없이 따라 실제로는 매우 어려운 그러나 적어도이 문제가 클릭시 가장 즉각적인 보인다.. 그 버튼. 함수를 찾아서 실행할 수 있어야합니다.

업데이트 : 다른 사용자가 질문에 형식을 지정했으며 다른 문제가있는 것으로 보입니다. 특히, 해당 단추를 클릭 할 때 매우 다른 동작을 여러 번 시도하려고합니다. 이러한 이벤트 중 하나는 페이지가 다시로드되어 다른 작업을 취소하기 만하는 리디렉션 인 것처럼 보입니다. 코드를 단순화하십시오. 해당 버튼을 클릭 할 때 원하는 작업 만 정확하게 수행하십시오.

+0

답변에 아약스는 어디에 있습니까? – Shubham

+0

@Shubham : 아무 것도 없습니다. 왜냐하면 그것은 원래의 질문에서 문제가 아니었기 때문입니다. 그 질문은 이전에 명백히 파손되어 이전 응답을 무효로 만들었습니다. 나는 그것을 고쳤다. – David

+0

Ooops, 방금 전에 봤던 것에 따라 대답을했습니다. – Shubham

관련 문제