[PHP] ajax를 활용하여 post값 전송하는 예제

php

by 2hansoul 2021. 11. 11. 22:57

<html>
<body>

<form action="" method="post">
<input type ="text" name ="mail" id="mail">
<input type="button" id="button" value="click">
</from>
<p id="result"></p>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>

      $("#button").click(function(){  //button id 값을 설정하고 누르면 클릭이벤트 발생
  var bar = $('#mail');       //변수로 input name값을 정해준다

         $.ajax({
type :"POST",                //post타입으로 데이터 보냄
url : "ajaxreturn.php",      //값을 전달할 url
async : true,                //동기식or비동기식으로 바꿀수 있다고 하는데 뭔지 잘모르겠다
dataType : 'html',           //<p id="result"></p> 여기에 값을 받기 위해 type을 html로 지정
data : bar,                  //변수 설정해놓은 data 값 사용
success : function(data){    //데이터값이 제대로 전달 됐으면 result에 출력 해준다
$('#result').html(data);
   console.log(data);
}
 });
});
</script>
</body>
</html>

비동기식으로 처리 하면 데이터를 받고 다음 페이지로 넘어가지 않고 현재 페이지에서 값을 출력 할 수 있다

'php' 카테고리의 다른 글

[PHP] javascript keyup 숫자만 입력 가능 하게 숫자 정규식 (0)	2021.11.23
[PHP] 회원가입 아이디 중복검사/유효성 체크 html형식으로 출력 (0)	2021.11.17
[PHP] JQuery 버튼 누르면 select 비 활성화 (0)	2021.11.10
[PHP] 로그인 select email (0)	2021.10.29
[PHP] 간단한 회원가입 중복처리 비밀번호 암호화 (0)	2021.10.21