Jquery Ajax 와 json 사용법
29463 단어 jQuery ajax
jQuery 라 이브 러 리 는 모든 jQuery 함 수 를 포함 하 는 JavaScript 파일 에 있 습 니 다.
아래 표 시 를 통 해 jQuery 를 웹 페이지 에 추가 할 수 있 습 니 다.
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>< script > 탭 은 페이지 의 < head > 부분 에 있어 야 합 니 다.
Jquery 다운로드 가 필요 합 니 다. 다운로드 하지 않 으 려 면 src 부분 을 네트워크 링크 로 변경 할 수 있 습 니 다.
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>jQuery 문법
jQuery 문법 은 HTML 요소 의 선택 을 위해 작 성 된 것 으로 요소 에 대해 일부 조작 을 수행 할 수 있 습 니 다.
jQuery 문법 은 HTML 요소 의 선택 을 위해 작 성 된 것 으로 요소 에 대해 일부 조작 을 수행 할 수 있 습 니 다.
기본 문법: $(selector). action ()
$(this). hide () - 현재 요소 숨 기기
$("p"). hide () - 모든 단락 숨 기기
$(". test"). hide () - 모든 class = "test" 의 모든 요 소 를 숨 깁 니 다.
$("\ # test"). hide () - 모든 id = "test" 요 소 를 숨 깁 니 다.
알림: jQuery 가 사용 하 는 문법 은 XPath 와 CSS 선택 기 문법 조합 입 니 다.본 튜 토리 얼 의 다음 장 에서 선택 기 에 관 한 문법 을 더 많이 배 울 것 입 니 다.
문서 준비 함수
우리 의 인 스 턴 스 에 있 는 모든 jQuery 함수 가 document ready 함수 에 있 음 을 알 수 있 습 니 다.
작은 예
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>jQuery 는 사건 처 리 를 위해 특별히 설계 되 었 습 니 다.
jQuery servlet 에 알 릴 수 있 습 니 다.
jQuery AJAX 인 스 턴 스
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test"> ， jQuery AJAX 。</h3>
<button id="btn1" type="button"> </button>
</body>
</html>jQuery $. get () 방법
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert(" ：" + data + "
：" + status);
});
});
});
</script>
</head>
<body>
<button> HTTP GET ， </button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert(" ：" + data + "
：" + status);
});
});
});
</script>
</head>
<body>
<button> HTTP POST ， </button>
</body>
</html>JQuery post 방법
$. post () 방법 은 HTTP POST 를 통 해 서버 에서 데 이 터 를 요청 합 니 다.
문법:
$.post(URL,data,callback);필수 적 URL 매개 변 수 는 요청 한 URL 을 규정 합 니 다.
선택 적 data 매개 변 수 는 요청 한 데 이 터 를 규정 합 니 다.
선택 적 callback 인 자 는 요청 이 성공 한 후에 실 행 된 함수 이름 입 니 다.
다음 예 는 $. post () 를 사용 하여 요청 과 함께 데 이 터 를 보 냅 니 다.
실례
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
});
});전달 과 수신 데 이 터 는 모두 제 이 슨 형식 이기 때문에 제 이 슨 을 배 울 필요 가 있다.
$. post () 의 첫 번 째 인 자 는 우리 가 요청 하고 자 하 는 URL ("demo test post. asp") 입 니 다.
그리고 우 리 는 요청 (name 과 city) 과 함께 데 이 터 를 보 냅 니 다.
"demo test post. asp" 의 ASP 스 크 립 트 는 이 매개 변 수 를 읽 고 처리 한 다음 결 과 를 되 돌려 줍 니 다.
세 번 째 매개 변 수 는 반전 함수 입 니 다.첫 번 째 리 셋 파 라 메 터 는 요청 한 페이지 의 내용 이 있 고 두 번 째 파 라 메 터 는 요청 한 상태 가 있 습 니 다.
새로운 HTML 내용 추가
우 리 는 새로운 내용 을 추가 하 는 네 가지 jQuery 방법 을 배 울 것 이다.
append () - 선 택 된 요소 의 끝 에 내용 삽입
절 차 는 대략:
1. 감청 함 수 를 써 서 실행 되 기 를 기다린다.
2. 감청 함수 에 인자 가 있 으 면 매개 변수 에 따라 해당 하 는 조작 을 할 수 있 습 니 다.
3. 구성 요 소 를 추가 할 위치 로 지정 합 니 다. (일반적으로 parent 단계 입 니 다. 예 를 들 어 li 에 대해 서 는 ul 일 수 있 습 니 다)
4. $(구성 요 소 를 추가 하려 면). append (추가 할 것)
demo
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1"> </button>
<button id="btn2"> </button>
</body>
</html>JSON 튜 토리 얼
JSON: JavaScript 대상 표시 법 (JavaScript) Object Notation）。
JSON 은 텍스트 정 보 를 저장 하고 교환 하 는 문법 입 니 다. XML 과 유사 합 니 다.
JSON 은 XML 보다 작고 빠 르 며 해석 하기 쉽다.
JSon 인 스 턴 스
{
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
]
}이 employee 대상 은 3 명의 직원 기록 (대상) 을 포함 하 는 배열 이다.
JSON - JavaScript 대상 으로 변환
JSON 텍스트 형식 은 문법 적 으로 자 바스 크 립 트 대상 을 만 드 는 코드 와 같 습 니 다.
이러한 유사 성 때문에 해석 기 가 필요 없 이 자바 스 크 립 트 프로그램 은 내 장 된 것 을 사용 할 수 있 습 니 다. eval () 함수 JSON 데이터 로 원생 의 자 바스 크 립 트 대상 을 생 성 합 니 다.
JSON 은 JavaScript 문법 을 사용 합 니 다.
JSON 은 자 바스 크 립 트 문법 을 사용 하기 때문에 별도의 소프트웨어 없 이 자 바스 크 립 트 의 JSON 을 처리 할 수 있 습 니 다.
JavaScript 를 통 해 대상 배열 을 만 들 고 이렇게 할당 할 수 있 습 니 다.
employees[1].firstName="Jobs";
parse 함수 로 데 이 터 를 처리 합 니 다.
<html>
<body>
<h2> JSON </h3>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"Bill","lastName":"Gates" },' +
'{"firstName":"George","lastName":"Bush" },' +
'{"firstName":"Thomas","lastName":"Carter" }]}';
obj = JSON.parse(txt);
//var obj = eval ("(" + txt + ")");//
document.getElementById("fname").innerHTML=obj.employees[1].firstName
document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>내 가 더 필요 한 것 은 배열 의 길 이 를 가 져 오 는 함수 이다.
var data = [{"id":"1","name":"a"},{"id":"2","name":"b"}];
alert(eval(data).length); 좋은 웹페이지 즐겨찾기
