๐Ÿ’ป

JavaScript ์˜ ์ดํ•ด - [jQuery] jQuery.ajax() ๋ณธ๋ฌธ

KITRI/JAVASCRIPT

JavaScript ์˜ ์ดํ•ด - [jQuery] jQuery.ajax()

๋˜ํšจ๋‹ˆ 2020. 7. 23. 16:45

 

01_menuAjax.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('#menu1').click(function(){
			$.ajax({
				url:"01_menu.html",
				type:"GET",
				dataType:"html",
				success:function(data){
					$('#message1').html(data);
				}
			});
		});
		
		$('#menu2').click(function(){
			$.ajax({
				url:"01_menu.html",
				type:"GET",
				dataType:"html",
				success:function(data){
					$('#message2').html($(data).children("ul > li"));
				}
			})
		});
	});
</script>
</head>
<body>
	<div>
		<a href="#" id="menu1">๋ฉ”๋‰ด๋ณด๊ธฐ 1</a>
		<span id="message1"></span>
	</div>
	<br/><br/>
	
	<div>
		<a href="#" id="menu2">๋ฉ”๋‰ด๋ณด๊ธฐ 2</a>
		<span id="message2" style="color:red"></span>
	</div>
</body>
</html>

01_menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Ajax</title>
</head>
<body>
	<p>์ค‘์‹</p>
	
	<ul>
		<li>์งœ์žฅ๋ฉด</li>
		<li>์งฌ๋ฝ•</li>
		<li>๊ธฐ์Šค๋ฉด</li>
		<li>ํƒ•์ˆ˜์œก</li>
	</ul>
	
	<p>๋ฉ”๋‰ด๋ฅผ ๊ณจ๋ผ์ฃผ์„ธ์š”. </p>
</body>
</html>

 

 

02_strAjax.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:"02_str.txt",
			type:"GET",
			dataType:"text",
			success: function(data, textStatus, jqXHR){
				//alert(textStatus + " " + jqXHR); //success [object Object]
				$('#resultDisplay').text(data);
			},
			error: function(jqXHR, textStatus, errorThrown){
				var arr = new Array();
				arr.push(jqXHR);
				arr.push(textStatus);
				arr.push(errorThrown);
				
				//alert(arr.join("\n")); //[object Object] error
			}
		});
	});
</script>
</head>
<body>
	<div id="resultDisplay"></div>
</body>
</html>

02_str.txt

์•ˆ๋…•ํ•˜์„ธ์š”. AJAX 1234

 

 

03_idCheck.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

${param.id}
${param.password}

03_idCheckGet.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			var id = $('#id').val();
			var password = $('#password').val();
			var sendData = "id=" + id + "&password=" + password;
			//alert(sendData);
			
			$.ajax({
				url     : "03_idCheck.jsp?" + sendData,
				type    : "GET",
				dataType: "text",
				success : function(data){
					$("#resultDisplay").text(data);
				}
			});
		});
	});
</script>
</head>
<body>
	<form  id="createForm">
		<label>์•„์ด๋””</label>
		<input type="text" name="id"  id="id"/><br/>
		
		<label>๋น„๋ฐ€๋ฒˆํ˜ธ</label>
		<input type="password" name="password" id="password"/><br/>
		
		<input type="button" id="btn" value="์š”์ฒญ"/>
	</form>
	
	<div id="resultDisplay"></div>
</body>
</html>

03_idCheckPost.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('#btn').click(function(){
			var id = $('#id').val();
			var password = $('#password').val();
			var sendData = "id=" + id + "&password=" + password;
			//alert(id + password+ sendData);
			$.ajax({
				url 	: "03_idCheck.jsp",
				type 	: "POST",
				//data 	: sendData, 
				data : {id:id, password:password},
				//data : {"id":id , "password":password},
				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				dataType: "text",
				success 	: function(data){
					$('#resultDisplay').text(data);
				}
			});
		});
	});
</script>
</head>
<body>
	<form  id="createForm">
		<label>์•„์ด๋””</label>
		<input type="text" name="id" id="id"/><br/>
		
		<label>๋น„๋ฐ€๋ฒˆํ˜ธ</label>
		<input type="password" name="password" id="password"/><br/>
		
		<input type="button" id="btn" value="์š”์ฒญ"/>
	</form>
	
	<div id="resultDisplay"></div>
</body>
</html>

 

 

 

 

04_JSON.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url: "04_JSON.txt",
			type: "GET",
			dataType: "json",
			success : function(data){
				var memberList = data.member;
				//alert(memberList.length);

				$(memberList).each(function (i){
					var member = memberList[i];
			
					var html = "<span>" + member.stdNumber + "</span> &nbsp;&nbsp;";
					html += "<span>" + member.stdName +"</span> &nbsp;&nbsp;";
					html += "<span>" + member.score +"</span><br/>";
					
					$('#resultDisp').append(html);
				});	
			}
		});
	});
</script>
</head>
<body>
	<div id="resultDisp"></div>
</body>
</html>

04_JSON.txt

{"member" : [{"stdNumber":1, "stdName":"ํ™๊ธธ๋™", "score":95},
             {"stdNumber":2, "stdName":"๊น€๊ธธ๋™", "score":90},
             {"stdNumber":3, "stdName":"๋ฐ•๊ธธ๋™", "score":85}]
}

 

 

05_XML.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery AJAX</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url: "05_XML.xml",
			type: "GET",
			dataType: "xml",
			success : function(data){
				var studentList = $(data).find('student');
				alert(studentList.length);
				
				$(studentList).each(function (i){
					var student = studentList.eq(i);
					var html = "<span>" + student.children("stdNumber").text() + "</span>&nbsp;&nbsp;";
					html += "<span>" + student.children("stdName").text() + "</span>&nbsp;&nbsp;";
					html += "<span>" + student.children("score").text() + "</span><br/>";
					
					$('#resultDisp').append(html);
				});
			}
		});
	});
</script>
</head>
<body>
	<div id="resultDisp"></div>
</body>
</body>
</html>

05_XML.xml

<?xml version="1.0" encoding="UTF-8"?>
<member xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
			 xsi:schemaLocation="http://www.example.org/05_XML 05_XML.xsd"
			 xmlns="http://www.example.org/05_XML">
	<student>
		<stdNumber>1001</stdNumber>
		<stdName>ํ™๊ธธ๋™</stdName>
		<score>95</score>
	</student>

	<student>
		<stdNumber>1002</stdNumber>
		<stdName>๊น€๊ธธ๋™</stdName>
		<score>90</score>
	</student>
	
	<student>
		<stdNumber>1003</stdNumber>
		<stdName>๋ฐ•๊ธธ๋™</stdName>
		<score>80</score>
	</student>
</member>
๋ฐ˜์‘ํ˜•

'KITRI > JAVASCRIPT' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

JavaScript ์˜ ์ดํ•ด - [jQuery] JSON ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‹ค์šด/ ํ•œ์ค„ ๋Œ“๊ธ€ ๋‹ฌ๊ธฐ ์ˆ˜์ •(ajax๋กœ ๋ฐ”๊พธ๊ธฐ)  (0) 2020.07.23
JavaScript ์˜ ์ดํ•ด - [jQuery] Animate  (0) 2020.07.23
JavaScript ์˜ ์ดํ•ด - [jQuery] Effects : Hide, Toggle, Slide, Fade  (0) 2020.07.22
JavaScript ์˜ ์ดํ•ด - [jQuery] Theme  (0) 2020.07.22
JavaScript ์˜ ์ดํ•ด - [jQuery] DOM ํ•จ์ˆ˜(2)  (0) 2020.07.22
'KITRI/JAVASCRIPT' Related Articles more
Comments