텍스트 상자에서 GET & POST 요청에 대한 응답 표시

Question

jquery를 사용하여 웹 페이지의 텍스트 필드에 GET 요청의 응답을 보내려고합니다. 현재 콘솔에서 응답을받을 수있는 다음 코드가 있습니다.

$(document).on('click', '#get-button', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: $("#url").val(), 
     data: '', 
     success: function(response, textStatus, XMLHttpRequest) { 

      console.log(response); 
     } 
    }); 
    return false; 
}); 

$(document).on('click', '#post-button', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: $("#url").val(), 
     data: $("#json-data").serialize(), 
     success: function(response, textStatus, XMLHttpRequest) { 

      console.log(response); 
     } 
    }); 
    return false; 
}); 

다음은 응답 형식 (JSON 형식)에 적합한 HTML 코드의 일부입니다.

<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 
    <div class="panel panel-danger"> 
     <div class="panel-heading">JSON Response</div> 
     <div class="panel-body text-danger"> 
     <textarea class="form-control" rows="8" placeholder="server response"></textarea> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

1. 놓습니다 준비 기능의 코드 또는 스크립트 정의에 deffer를 추가합니다. 그렇게하면 DOM이로드 된 후 스크립트가 실행됩니다.
2. 이와 같은 문서에 이벤트를 추가하지 마십시오. 너무 큽니다. 당신은 id를 사용하고 있습니다, 멋지다. 그래서 사용하십시오 :) 그것은 당신의 DOM 크기에 달려 있지만, 대부분의 경우 id로 요소를 찾은 다음 그것에 이벤트를 추가하십시오.
3. 텍스트 상자에 ID를 추가하면 더 유용하고 빠릅니다.

.

$(document).ready(function(){ 

    $('#get-button').on('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "GET", 
     url: $("#url").val(), 
     success: function(response) { 
     console.log(response); 
     $('.form-control').val(response); // personally I would give your textbox an ID 
     } 
    }); 
    return false; 
    }); 

    $('#post-button').on('click', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: $("#url").val(), 
     data: $("#json-data").serialize(), 
     success: function(response) { 
     console.log(response); 
     $('.form-control').val(response); 
     } 
    }); 
    return false; 
    }); 
}) 

URL이 맞으면 올바르게 작동합니다.

응답을받은 후에 JSON 개체를 얻게되면 JSON.stringify()를 사용하여 JSON 개체를 String으로 변환해야한다는 것을 기억하십시오.

나는 설명하려고 노력할 것이다. Javascript에는 객체와 간단한 유형 (부울, 문자열, 부동 등)이 있습니다. 단순한 타입을 인쇄하고자 할 때, 우리는 단지 그것이 값이라는 것을 보았습니다. 그러나 객체를 표시하려면 JS 엔진에 문제가 있습니다. 각 객체는 매우 복잡하고 복잡 할 수 있기 때문입니다. 그게 왜 개체 또는 JSON (마녀가 개체)를 인쇄 할 때 우리는 [Object]를 얻습니다. Luckilly JSON은 너무 유명하여 JS에 JSON (JSON.parse (someString)) 및 JSON.stringify (JSONObject)와 다른 방식으로 String을 serialize하는 기본 메서드가 있습니다.