웹 API에서 JSON 데이터를 추출하고 읽습니다.

제가 작업하고있는 것은 한 줄의 용어에 대한 즉석 정의를 제공하고 논리적 인 질문에 대해 한 줄 만 대답하는 것입니다. 사용자가 "JavaScript"를 입력하고 JavaScript가 url https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1을 방문하고 항목 "정의"를 가져와 (API 링크를 보면 정의가 첫 번째 줄에 있음) 항목을 가져 와서 그 정의 값을 표시하고 사용자에게 필요한 사항을 경고한다고 가정합니다 데이터.웹 API에서 JSON 데이터를 추출하고 읽습니다.

어쨌든 내 코드 현재 :

<html> 
<head> 
<title>Hi</title></head> 
<body> 
<input id="ddgAPI"><button>Search</button> 
<div id="output"></div> 
</body> 
</html>

나는이와 혼란 스러워요로 내가 필요한 자바 스크립트/jQuery 코드에 넣지 적이 있습니다. 고맙습니다.

출처

2013-09-02 Mission Coding

Yiu는 다른 사람에게 요청하기 전에 시도한 것의 jsfiddle을 넣어야합니다. – DevZer0

좋아, 평범한 대답도 인정 될 것이다. –

당신이 묻는 유일한 질문은 다음과 같습니다. _ 사용자가 "JavaScript"를 입력하고 JavaScript가 URL을 방문합니다 (https://api.duckduckgo.com/?_). 이는별로 문제가되지 않습니다. 그냥 선생님. –

을이 만 프록시 또는 JSONP이 할 수있는 크로스 도메인 요청이기 때문에. 다행히 DuckDuckGo supports JSONP, 당신은 당신이 좋아하는 URL 요청에 콜백 매개 변수를 추가하도록해야하므로 :

https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1&callback=jsonp

... 또는 jQuery의 아약스 방법으로 적절한 JSONP 매개 변수를 사용, 뭔가 같은 :

$('#ddgAPI').on('keyup', function(e) { 

    if (e.which === '13') { 
    $.ajax({ 
     type: 'GET', 
     url: 'https://api.duckduckgo.com/', 
     data: { q: $(this).val(), format: 'json', pretty: 1 }, 
     jsonpCallback: 'jsonp', 
     dataType: 'jsonp' 
    }).then(function (data) { 
     console.log(data); 
    }); 
    } 

});

출처

2013-09-02 14:00:12 Andy

이것이 작동하므로 CORS 토론을 삭제했습니다. http://jsfiddle.net/eCAN6/ – Paul

좋아요, q 매개 변수의 JavaScript를 예로 들었습니다. q 매개 변수의 값을 입력하려면 사용자가 입력해야하는 내용을 입력해야합니다. –

내 대답을 업데이트했습니다. 사용자가 입력 상자에서 return 버튼을 클릭하면 ajax가 입력 상자 값과 함께 q 매개 변수로 실행됩니다. 나는 그것을 테스트하지 않았지만 잘 작동 할 것이다. – Andy

원격 서비스에 문의 하시려면 jQuery.ajax()을 사용하십시오. url은 https://api.duckduckgo.com이어야합니다. type은 GET이어야합니다. data은 다음과 같아야합니다

var data = { q:'JavaScript', format:'json', pretty:1 };

jQuery를 다음, Ajax 요청에 모든 것을 컴파일 서버로 보내드립니다. 그래서 당신은 결과와 함께 뭔가를 할 수 success 등의 기능을 전달합니다

$.ajax({ 
    url: "https://api.duckduckgo.com", 
    type: "GET", 
    data: { q:'JavaScript', format:'json', pretty:1 }, 
    success: function(data) { $('#output').html(data); } 
});

출처

2013-09-02 13:29:32

'wget -S'를 시도했으며 CORS 헤더가 설정되지 않았다는 것을 지적했습니다. – Paul

[JSFIDDLE] (http://jsfiddle.net/Y9DCm/)이 (가) 의심스러운 것으로 실패했습니다. XMLHttpRequest에서 https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1을 (를)로드 할 수 없습니다. Origin http://fiddle.jshell.net은 Access-Control-Allow-Origin이 허용하지 않습니다. fiddle.jshell.net/_display/:1 – Paul

웹 API에서 JSON 데이터를 추출하고 읽습니다.

답변

관련 문제