화면전환 없이 데이터를 전송하기 위해 ajax를 사용하는 경우가 많다.


1. JSON 형태로 데이터 전송

1
2
3
4
5
6
7
8
9
$.ajax({
    url: '데이터를 보낼 곳 url',
    type: 'form 태그의 method 속성(post 또는 get)',
    data: {"변수1""변수1의 값",
        "변수2""변수2의 값"},
    success: function (data) {
            alert("데이터 전송이 성공적으로 끝났을 때 실행");
        }
});
cs


읽을 때에는 request.getParameter로 읽으면 된다.

1
2
String str1 = request.getParameter("변수1");
String str2 = request.getParameter("변수2");
cs




2. 폼 데이터를 한꺼번에 전송

1
2
3
4
5
6
7
8
9
var queryString = $('#폼id').serialize();
$.ajax({
    url: '데이터를 보낼 곳 url',
    type: 'form 태그의 method 속성(post 또는 get)',
    data: {"폼 데이터 변수 이름": queryString},
    success: function (data) {
            alert("데이터 전송이 성공적으로 끝났을 때 실행");
        }
});
cs


읽을 때에는 폼의 각 데이터 name값으로 꺼내 읽으면 된다.

예를들어,

- form

1
2
3
4
5
6
7
<form id="form1">
    <input type="text" name="user_name">
    <input type="text" name="user_phone">
    <input type="radio" value="Y" name="agree">
    <input type="radio" value="N" name="agree">
    <button type="button" onclick="sendFormUsingAjax()">보내기</button>
</form>
cs

이런 형태의 폼 데이터를 보낸다고 하자.

보내기 버튼을 클릭하면 sendFormUsingAjax()라는 javascript 함수를 실행하게 되고, 그 안에 ajax로 데이터를 보내는 코드를 작성해두었다고 하면, 그 코드가 실행될 것이다.


보내진 곳에서 데이터를 읽는 코드는

1
2
3
String user_name      = request.getParameter("user_name");
String user_phone = request.getParameter("user_phone ");
String agree    = request.getParameter("agree");
cs

form 안의 각 요소들의 name속성의 값으로 읽으면 된다.



3. 체크박스 데이터 등 배열 형태로 데이터 전송

배열 형태의 데이터를 전송할 때에는 배열데이터를 직렬화하는 코드를 작성해야 한다. ( jQuery.ajaxSettings.traditional = true )

1
2
3
4
5
6
7
8
9
10
var array = {1,2,3,4,5};
jQuery.ajaxSettings.traditional = true;
$.ajax({
    url: '데이터를 보낼 곳 url',
    type: 'form 태그의 method 속성(post 또는 get)',
    data: {"배열변수": array},
    success: function (data) {
            alert("데이터 전송이 성공적으로 끝났을 때 실행");
        }
});
cs

이런 형식으로 보내고, 데이터를 읽을 때에는 배열형태의 변수를 만들고 같은 방식으로 읽으면 된다.

http://conol.tistory.com/23


http://www.homejjang.com/05/meta.php

'' 카테고리의 다른 글

[java]client IP(접속자 IP) 가져오기  (0) 2018.08.07
[ajax]데이터 전송  (0) 2018.07.16
[html]input text에서 엔터누를 때 새로고침  (0) 2018.07.11
[commons-fileupload]파일 업로드  (0) 2018.07.02
[html]a태그 onclick 사용하기  (0) 2018.06.29

엔터 클릭 시 특정 함수가 실행되게 하고싶으면 input태그 안에 onkeypress속성을 추가하면 된다.

1
<input type="text" onkeypress="if(event.keyCode==13){자바스크립트 함수 이름();}">
cs

키보드를 눌렀을 때, 그 키의 코드가 13번(엔터)이면, '자바스크립트 함수 이름'을 실행하라는 코드이다.


하지만 form 태그 안에 input(type=text) 태그가 한 개 들어있을 때, 엔터를 누르면 자동으로 submit되는 현상이 발생해서 화면이 새로고침 된다.

저 경우에도 함수 실행 후에 submit이 한 번 더 되어서 페이지가 새로고침 되었다.

이를 막기 위해서는 form 태그에 아래 코드처럼 onsubmit속성을 추가하면 된다.

1
2
3
<form onsubmit="return false">
    <input type="text" onkeypress="if(event.keyCode==13){자바스크립트 함수 이름();}">
</form>
cs


이렇게 하면 엔터키를 눌러도 submit이 자동으로 되지 않는다.


** input태그가 여러개 있을 때에는 엔터키 눌렀을 때 자동submit이 동작하지 않는다!!!

'' 카테고리의 다른 글

[ajax]데이터 전송  (0) 2018.07.16
[html]head태그 안의 meta태그(링크첨부)  (0) 2018.07.11
[commons-fileupload]파일 업로드  (0) 2018.07.02
[html]a태그 onclick 사용하기  (0) 2018.06.29
[html]html 특수문자 표(펌글)  (0) 2018.06.28

+ Recent posts