단계별 주소

버튼을 클릭합니다 src 속성이 있는 script 태그가 생성되어 문서에 배치됩니다. PHP 파일은 매개변수로 JSON 객체를 가지고 있는함수를 호출합니다. Click me! var obj = { name: “John”, age: 30, city: “New York” }; var myJSON = JSON.stringify(obj); document.getElementById(“demo2”).innerHTML = myJSON; var gData; function processData(data) { gData = data; console.table(data); document.getElementById(“demo3”).innerHTML = gData[0].cd; }

Dynamic JSONP Result

출처: Dynamic JSONP Result Click the Button. A script tag with a src attribute is created and placed in the document. The PHP file returns a call to a function with the JSON object as a parameter. Click me! Try changing the table property from “customers” to “products”. function clickButton() { var obj, s obj = { “table”:”customers”, “limit”:10 }; s = document.createElement(“script”); s.src = “https://www.w3schools.com/js/jsonp_demo_db.php?x=” + JSON.stringify(obj); document.body.appendChild(s); } function myFunc(myObj) { var x, txt = “”; for (x in myObj) { txt += myObj[x].name + “”; } document.getElementById(“demo”).innerHTML = txt; } Click the Button. A script tag with a src attribute is created and placed in the document. […]

JSON 요약

JSON Objects Nested JSON Objects Values in a JSON object can be another JSON object. myObj = { “name”:”John”, “age”:30, “cars”: { “car1″:”Ford”, “car2″:”BMW”, “car3″:”Fiat” } } You can access nested JSON objects by using the dot notation or bracket notation: x = myObj.cars.car2; //or: x = myObj.cars[“car2”]; Modify Values You can use the dot notation to modify any value in a JSON object: myObj.cars.car2 = “Mercedes”; You can also use the bracket notation to modify a value in a JSON object: myObj.cars[“car2”] = “Mercedes”; Delete Object Properties Use the delete keyword to delete properties from a JSON object: delete myObj.cars.car2; JSON Arrays Arrays as JSON Objects [ “Ford”, “BMW”, […]

동적 JSONP 결과 – 데이터베이스

JavaScript Example “myFunc” 함수는 php 파일에서 호출됩니다: 버튼을 클릭합니다. src 속성이 있는 script 태그가 만들어져 문서에 저장됩니다. PHP 파일은 JSON 객체를 매개 변수로 사용하여, 함수에 호출된 내용을 반환합니다. Click me! table 속성 “customers”를 “products”로 바꿔서 테스트해 보십시오. function clickButton() { var obj, s obj = { “table”:”customers”, “limit”:10 }; s = document.createElement(“script”); s.src = “https://www.w3schools.com/js/jsonp_demo_db.php?x=” + JSON.stringify(obj); document.body.appendChild(s); } function myFunc(myObj) { var x, txt = “”; for (x in myObj) { txt += myObj[x].name + “”; } document.getElementById(“demo”).innerHTML = txt; } Click the Button. A script tag with a src attribute is created and placed in the document. The PHP file returns a call to a function with the […]

JSONP

JSONP는 도메인 간 문제(cross-domain issues)에 대한 걱정없이, JSON 데이터를 전송하는 방법입니다. JSONP는 XMLHttpRequest 객체를 사용하지 않습니다. JSONP는 대신 <script> 태그를 사용합니다. JSONP 소개 JSONP은 JSON과 Padding의 약자입니다. 다른 도메인에 파일을 요청하면, 도메인 간 정책(cross-domain policy)으로 인해, 문제가 발생할 수 있습니다. 다른 도메인에서 외부(external) script를 요청하는 것은, 이 문제가 없습니다. JSONP는 이 장점을 사용하고, XMLHttpRequest 객체 대신 script 태그를 사용하여 파일을 요청합니다. Server 파일 서버의 파일은 함수 호출(function call) 안에 결과를 래핑합니다(wraps): Example myFunc({ “name”:”John”, “age”:30, “city”:”New York” }); 결과는 JSON 데이터를 매개 변수로 사용하여 “myFunc”으로 명명된 함수에 호출된 내용을 반환합니다. 함수는 클라이언트에 있어야 합니다. 자바스크립트 함수 “myFunc”이라고 명명된 함수는 클라이언트에 있으며, JSON 데이터를 처리할 준비가 되어 있습니다: Example script 태그를 […]

JSON HTML

JSON은 자바스크립트로 쉽게 변환될 수 있습니다. 자바스크립트는 웹페이지에 HTML을 만드는데 사용됩니다. HTML 표(Table) JSON으로 수신된 데이트를 HTML 표로 만듭니다: Example JSON 데이터를 가지고 표를 만듭니다. var obj, dbParam, xmlhttp, myObj, x, txt = “”; obj = { “table”:”customers”, “limit”:20 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); txt += “” for (x in myObj) { txt += “” + myObj[x].name + “”; } txt += “” document.getElementById(“demo”).innerHTML = txt; } }; xmlhttp.open(“POST”, “json_demo_db_post.php”, true); xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xmlhttp.send(“x=” + dbParam); 동적인 HTML 표 Make the HTML table based on the value of a drop down […]

JSON PHP

JSON의 일반적인 용도는, 웹 서버에서 데이터를 읽고, 웹 페이지에 데이터를 표시하는 것입니다. 이 장에서는 클라이언트와 PHP 서버간에 JSON 데이터를 교환하는 방법을 설명합니다. PHP 파일 PHP에는 JSON을 처리하는 내장함수가 있습니다. PHP 함수 json_encode()를 사용하여, PHP의 객체는 JSON으로 변환될 수 있습니다: PHP 파일 클라이언트 자바스크립트 다음은, 위의 예제로부터 AJAX call을 사용하여 PHP 파일을 요청하는, 클라이언트의 자바스크립트입니다: Example 서버의 PHP 파일에서 JSON으로 데이터를 가져옵니다. John var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById(“demo”).innerHTML = myObj.name; } }; xmlhttp.open(“GET”, “demo_file.php”, true); xmlhttp.send(); PHP Array PHP 함수 json_encode()를 사용하여, PHP의 배열도 JSON으로 변환될 수 있습니다: PHP 파일 클라이언트 자바스크립트 다음은, 위의 […]

JSON.stringify()

JSON은 웹 서버와 데이터를 상호 교환하기 위해 주로 사용됩니다. 데이터를 웹서버로 보낼 때 데이터는 문자열이어야 합니다. JSON.stringify()로 자바스크립트 객체를 문자열로 변환합니다. 자바스크립트 객체 문자열화(Stringify) 이 객체를 자바스크립트에서 상상해 보십시오: var obj = { “name”:”John”, “age”:30, “city”:”New York”}; 자바스크립트 함수 JSON.stringify()로 이것을 문자열로 변환합니다. var myJSON = JSON.stringify(obj); 결과는 JSON 표기법을 따르는 문자열이 됩니다. myJSON은 문자열이 되고, 서버로 보낼 준비가 됩니다: Example 자바스크립트 객체에서 JSON 문자열 생성 {“name”:”John”,”age”:30,”city”:”New York”} var obj = { “name”:”John”, “age”:30, “city”:”New York”}; var myJSON = JSON.stringify(obj); document.getElementById(“demo”).innerHTML = myJSON; 다음 장에서 JSON을 서버로 보내는 방법을 배웁니다. 자바스크립트 배열 문자열화(Stringify) 자바스크립트 배열을 문자열로 변환하는(stringify) 것도 가능합니다: 자바스크립트에서 이 배열을 상상해 보십시오: var arr = [ “John”, “Peter”, […]

JSON.parse()

JSON은 웹 서버와 데이터를 상호 교환하는데 주로 사용됩니다. 웹 서버에서 데이터를 수신 할 때, 데이터는 항상 문자열입니다. JSON.parse()로 데이터를 파싱하면, 그 데이터는 자바스크립트 객체가 됩니다. 예제 – JSON 파싱 웹 서버에 이 데이터를 수신했다고 상상합니다: ‘{ “name”:”John”, “age”:30, “city”:”New York”}’ JSON.parse() 자바스크립트 함수를 사용하여, 텍스트를 자바스크립트 객체로 변환합니다: var obj = JSON.parse(‘{ “name”:”John”, “age”:30, “city”:”New York”}’); 텍스트가 JSON 형식으로 작성되었는지 확인하십시오. 그렇지 않으면 구문 오류가 발생합니다. 페이지에 자바스크립트 객체를 사용합니다: Example JSON 문자열에서 객체 생성 John, 30 var obj = JSON.parse(‘{ “name”:”John”, “age”:30, “city”:”New York”}’); document.getElementById(“demo”).innerHTML = obj.name + “, ” + obj.age; 서버에서 JSON AJAX request를 사용하여, 서버에서 JSON을 요청할 수 있습니다. 서버의 응답이 JSON 형식으로 작성된 경우, 문자열을 […]

JSON 배열

JSON 객체로 배열 Example [ “Ford”, “BMW”, “Fiat” ] JSON의 배열은 자바스크립트의 배열과 거의 같습니다. JSON에서 배열 값은 string, number, object, array, boolean 또는 null 유형이어야 합니다. 자바 스크립트에서 배열 값은, 위의 모든 것 외에도, 함수, 날짜 및 undefined를 포함한 다른 유효한 자바스크립트 표현식이 될 수 있습니다. JSON 객체의 배열 배열은 객체 속성의 값이 될 수 있습니다: Example { “name”:”John”, “age”:30, “cars”:[ “Ford”, “BMW”, “Fiat” ] } 배열 값 액세스 인덱스 번호를 사용하여 배열 값에 액세스합니다: Example JSON 객체의 배열 값을 액세스 Ford var myObj, x; myObj = { “name”:”John”, “age”:30, “cars”:[ “Ford”, “BMW”, “Fiat” ] }; x = myObj.cars[0]; document.getElementById(“demo”).innerHTML = x; 배열 반복(Looping Through) for-in 루프를 사용하여 배열 […]