햄찌개

javascript - get post 방식 본문

UI설계 및 구현 -웹프로그래밍

javascript - get post 방식

햄찌개 2020. 10. 14. 12:40

전송해주는 html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">

//폼 submit post방식 호출
function fnSubmit() {
	var fm = document.getElementById("myForm");
	fm.method="post";
	fm.submit();
}

$(document).ready(function(){
	   $("#AjaxBtn").click(function(){
	      $.ajax({
	         url : "Ajax2.html"
	         , type : "GET"
	         , success:function(data){
	            $('span').html(data);
	         }
	         ,error : function(jqXHR, textStatus, errorThrown){
	            alert("에러\n" + textStatus + " : " + errorThrown);
	         }
	      });
	   });
	});

</script>
</head>
<body>
	<form action="Ajax2.html"method="get" id="myForm">
		이름 : <input type="text" name="name"><br> 
		나이 : <input type="number"name="age"><br><br>
		<input type="button" value="post전송" onclick="fnSubmit()"> 
		<input type="submit" value="get전송" id="getBtn">
		<hr>
		<input type="button" value="Ajax전송" id="AjaxBtn">
	</form>
	<span id="resultAjax"></span>
<div id="div1"></div>

</body>
</html>

 

전송받는 html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {
	var url = decodeURI(window.location.href);
	var url2 = url.split('?')[1];//name=전진원&age=25
	
	 var arrName = url2.split('&')[0].split('=')[1];
	 var arrNameTag = url2.split('&')[0].split('=')[0];
	 var arrAge = url2.split('&')[1].split('=')[1];
	 var arrAgeTag = url2.split('&')[1].split('=')[0];
	$("#nameSpan").html(arrNameTag +" : " +arrName +"<br>"+ arrAgeTag+" : "+arrAge);
});


</script>
</head>
<body>
	<h1>Hi~~....
	<br>
	<span id="nameSpan"></span></h1>
</body>
</html>

저작자표시

'UI설계 및 구현 -웹프로그래밍' 카테고리의 다른 글

UI -디자인 연습  (0) 2020.10.13
JQUERY - filter 예제  (0) 2020.10.08
JQUERY - parent().is 예제  (0) 2020.10.08
JQUERY - checkbox  (0) 2020.10.07
JQUERY - 애니메이션 연습 - animate  (0) 2020.10.06
'UI설계 및 구현 -웹프로그래밍' Related Articles more