반응형
function submitGet() {
console.log("submitGet");
// url + get으로 보낼 데이터
var url = "/api/user/list/"+$("#input_id").val();
$.ajax({
type: "GET",
url: url,
success: function(result) {
// 성공시 http status code 200
console.log(result);
},
error: function(xhr, status, error) {
// 실패시 http status code 200 이 아닌 경우
console.log(xhr);
}
});
}
function submitPost() {
console.log("submitPost");
// url
var url = "/api/user";
// Post Data 만드는법
// 1.
// var post_data = "id="+$("#input_id").val()+"&name="+$("#input_name").val();
// 2. data obj
// var post_data = {
// "id":$("#input_id").val(),
// "name":$("#input_name").val()
// };
// 3. form 이용
var form = $('#post_form')[0];
var post_data = new FormData(form);
console.log(post_data);
$.ajax({
type: "POST",
url: url,
data: post_data,
processData: false,
contentType: false,
success: function(result) {
// 성공시 http status code 200
console.log(result);
},
error: function(xhr, status, error) {
// 실패시 http status code 200 이 아닌 경우
console.log(xhr);
}
});
}
function submitPostMultipart() {
console.log("submitPostMultipart");
var url = "/api/user/image";
// 1. form
// var form = $('#post_multipart_form')[0];
// var post_data = new FormData(form);
// 2. Create FormData
var post_data = new FormData();
post_data.append("input_id", $("#input_file_id").val());
post_data.append("input_image", $("#input_image")[0].files[0]);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: url,
data: post_data,
processData: false,
contentType: false,
success: function(result) {
// 성공시 http status code 200
console.log(result);
},
error: function(xhr, status, error) {
// 실패시 http status code 200 이 아닌 경우
console.log(xhr);
}
});
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<title>StartUp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="/css/comm.css" />
</head>
<body>
<div class="container">
<form>
<h3>GET</h3>
<div class="form-group">
<label for="exampleInputEmail1">GET Parameter</label>
<input type="text" class="form-control" id="input_id" placeholder="Input Id">
</div>
<button type="button" class="btn btn-primary" onclick="submitGet()">Submit</button>
</form>
<form id="post_form">
<h3>POST</h3>
<div class="form-group">
<label for="exampleInputEmail1">POST Parameter</label>
<input type="text" class="form-control" name="input_id" id="input_id" placeholder="Input Id">
<input type="text" class="form-control" name="input_name" id="input_name" placeholder="Input Name">
</div>
<button type="button" class="btn btn-primary" onclick="submitPost();">Submit</button>
</form>
<form id="post_multipart_form">
<h3>POST Multipart</h3>
<div class="form-group">
<label for="exampleInputEmail1">POST Multipart Parameter</label>
<input type="text" class="form-control" id="input_file_id" name="input_file_id" placeholder="Input Id">
<input type="file" class="form-control-file" id="input_image" name="input_image" />
</div>
<button type="button" class="btn btn-primary" onclick="submitPostMultipart();">Submit</button>
</form>
</div>
<script src="/js/jquery.min.3.2.1.js"></script>
<script type="text/javascript" src="/js/mustache.js"></script>
<script type="text/javascript" src="/js/comm.js"></script>
<script type="text/javascript" src="/js/ajax.js"></script>
</body>
</html>
반응형
'개발 > HTML, CSS, Script' 카테고리의 다른 글
| Laravel Vue Spa 기본 구조 (0) | 2020.09.26 |
|---|---|
| [최종] Jquery 다중 파일 업로드 미리보기 제공하기, 삭제, 순서변경, POST업로드 (6) | 2020.09.26 |
| FACEBOOK SDK - 로그인, 정보 가져오기 SCRIPT (0) | 2017.10.23 |
| 드랍다운 메뉴 (0) | 2017.09.30 |
| 슬라이드 메뉴, 슬라이딩 메뉴 (0) | 2017.09.30 |
