jQuery에서 JSON 사용하기

jQuery는 현재 널리 사용되는 스크립트 라이브러리입니다. 그렇다면 jQuery에서 JSON을 어떻게 사용할 수 있을까요?

JSON 구문 분석

JSON 구문 분석에 대한 기본 지원은 이미 jQuery에서 제공됩니다.

jQuery.parseJSON 함수는 구문 분석을 지원합니다. 자세한 지침은 여기를 참조하세요.

코드 복사 코드는 다음과 같습니다.

 
var obj = jQuery.parseJSON('{ "name" :"John"}'); 
alert( obj.name === "John" ); 

객체를 사용하여 JSON 형식 문자열 생성

jQuery에서는 사용할 수 없습니다. 다음 확장 라이브러리를 사용하여 일반 JavaScript 개체를 JSON 문자열로 직접 변환하는 방법을 제공합니다.

jquery-json 확장 라이브러리

이 라이브러리는 jQuery를 확장하는 데 사용되며 JSON 사용을 위한 두 가지 방법을 확장합니다.

toJSON 메서드는 일반 JavaScript 개체를 JSON 문자열로 직렬화하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

 
var thing = {plugin: 'jquery- json', 버전: 2.3}; 
var encode = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 

evalJSON 메소드 JSON 문자열을 일반 JavaScript 객체로 구문 분석합니다.

코드 복사 코드는 다음과 같습니다.

 
var thing = {plugin: 'jquery- json', 버전: 2.3}; 
var encode = $.toJSON( thing ); // '{"plugin":"jquery-json","version":2.3}' 
var name = $. evalJSON( encoded ).plugin; // "jquery-json" 
var version = $.evalJSON(encoded).version; // 2.3 

이 확장 프로그램의 다운로드 주소: http:/ /code.google.com/p/jquery-json/

WCF와 함께 jQuery 사용
클라이언트

$.post jQuery는 서버에 직접 요청하고 서버에서 반환된 데이터를 JSON 형식으로 구문 분석할 수 있습니다. 그러나 다음 사항에 주의해야 합니다.

요청된 콘텐츠 유형은 json 형식이어야 합니다. 위의 jQuery-json 확장 라이브러리를 통해 수행할 수 있습니다. 완료하려면 요청의 contentType에 특별한 주의를 기울여야 하며 text/json을 사용하여 설명해야 합니다. 기본 게시물은 요청에 일반 이름-값 쌍을 사용하므로 contentType은 $.ajaxSetup을 전달할 수 있는 application/x-www-form-urlencoded:

코드 복사 코드는 다음과 같습니다.

 
// Ajax 설정
 $.ajaxSetup({ contentType: 'text/json' }) 

이렇게 하면 요청된 콘텐츠 유형이 필수 유형으로 설정되었습니다.

두 번째로 실제 요청 콘텐츠는 확장 라이브러리의 $.toJSON을 통해 달성할 수 있는 JSON 모드여야 합니다. 예:

$.toJSON({ x: 2, y : 3 } )

이런 식으로 서버 측에서 서비스 메소드 Sum을 제공하면 다음과 같이 정의됩니다.

코드 복사 코드는 다음과 같습니다.

 
public int Sum(int x, int y) 
{ 
return x y; 🎜> 다음과 같이 호출할 수 있습니다. WCF에서 반환된 데이터는 속성 d에 있습니다. 

코드 복사

코드는 다음과 같습니다. // Ajax 설정$. ajaxSetup({ contentType: 'text/json' });

$("#wcfBtn").click(function () {

$.post("Service1.svc/Sum", $.toJSON({ x: 2 , y: 3 }), 함수(데이터) { 
alert(data.d); 
}) 

서버 -측 구성
 
먼저 서비스에 레이블을 추가합니다: [System.ServiceModel.Activation.AspNetCompatibilityRequirements(

RequirementsMode = System.ServiceModel.Activation.AspNetCompatibilityRequirementsMode.Allowed)]

코드 복사

코드는 다음과 같습니다.

 
// #1 
// 스크립트에서 사용하려면 이 태그를 추가해야 합니다. 
[System.ServiceModel.Activation.AspNetCompatibilityRequirements( 
RequirementsMode = System.ServiceModel. Activation.AspNetCompatibilityRequirementsMode.] 
// #2 
// 또한 웹 사이트 구성 파일 
public class Service1 : IService1 
{ 
public int Sum(int)에서 설정해야 합니다. x, int y ) 
{ 
return x y; 
} 
} 

그런 다음 웹사이트의 구성 파일에서 다음과 같이 구성합니다.

코드 복사 코드는 다음과 같습니다.

 
 <--브라우저 측에서 WCF 서비스 호출의 특정 구성을 지원하기 위해--> 
 
 -relativeAddress 
서비스의 주소는 서비스 유형, 네임스페이스를 포함한 전체 이름, 심지어 어셈블리 
팩토리도 WCF 시스템에서 제공하므로 직접 사용합니다
--> ;relativeAddress="Service1.svc" service="MServer.Service1" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" 
/> 
 
 🎜> 
  
serviceDebug includeExceptionDetailInFaults="false" /> 
 
 코드 복사

 코드는 다음과 같습니다.

///////////1, HTML에는 다음과 같은 형식이 있습니다.

//////// ////물론 HTML에서 Js 함수를 사용하려면 "/style/js/ajax에
//////////////2. 그런 다음 ajax.js 파일

function userSearch( ){ 에 다음 코드를 추가합니다. var query = $("#searchform input[@name='query']").val(); $.post("/userSearch.htm", { query: query } ,function callback(json){ var userlist = $.parseJSON(json); userList(userlist) }) }

/*******************************************

설명은 다음과 같습니다. 
 1), "#searchform input[@name='query']"; 의미: ID가 
2), $("" )인 searchform(이름 속성 값은 'query') 아래에서 입력 태그를 선택합니다. val()은 선택한 속성의 값을 가져오는 것("")을 의미합니다. 
3) $.post()에서 첫 번째 매개변수는 대상 서블릿을 지정하는 것, 즉 이 게시물 요청을 That으로 보내는 것입니다. 서블릿. 
두 번째 항목은 이 게시물 요청에 의해 전달되는 데이터입니다. ":" 앞의 항목은 키 또는 이름이고 마지막 항목은 값입니다. 
세 번째 항목은 형식적인 콜백 함수입니다. 여기에 있는 매개변수는 서블릿이 반환한 값의 요청이 처리된다는 의미입니다. 여기서 콜백의 기능은 JSON 개체 json을 JS 개체 userlist로 변환한 다음 JS 개체를 userList  3. post 요청은 query라는 매개변수를 백그라운드로 전달합니다. 서블릿의 프로세스: 
//"query"라는 매개변수에서 post로 가져온 데이터 가져오기 
String query = request.getParameter("query" ); 
if (query != null && !query.isEmpty() 
&& !query.trim().equalsIgnoreCase("")) { 
//"query" 값이 아닌 경우 비어 있으면 'query'를 매개변수로 사용하여 HQL 문을 작성합니다
String hql = "from TUser as user where user.userName like '" query "%'" 
//라이브러리 테이블 TUser에서 쿼리 및 가져오기 테이블 구조
List list = weilav3TUserDAO .getListByHQL(hql); 
if (list != null && !list.isEmpty()) { 
//목록이 비어 있지 않으면 JSON 객체를 jsonArray에 저장합니다
JSONArray jsonArray = JSONArray.fromObject(list); 
//다음은 쿼리 결과가 포함된 JSON 객체를 페이지에 반환하는 것입니다
response.setContentType("text/ html;charset=utf-8"); 
PrintWriter out = response.getWriter(); 
out.println(jsonArray); 
…… 
}else {……} 
* *********** **/ 
 