[Js] ajax post로 데이터 보내기

script

by 2hansoul 2022. 10. 5. 17:57

//클라이언트 화면
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function data_post(){  
  $.ajax({
    type :"post",                //데이터 전송 타입
    url : "b2b_info_action.php", //데이터를 보낼 경로
    data : {
        b_id : $('#b_id').val(), // 입력한 데이터 갑
        b_sms : $('#b_sms').val(),
        b_lms : $('#b_lms').val(),
        b_mms : $('#b_mms').val(),
        b_alarm : $('#b_alarm').val(),
        }
    }).done(function(result){ //완료시 
        alert(result);
    });
}
</script>
<html>
<body>
</body>
 <div>
    <form id='b_form'>
        <table border="1">
            <tr>
                <th>아이디</th>
                <th>비밀번호</th>
                <th>이름</th>
                <th>나이</th>
                <th>sex</th>
            </tr>
            <tr>
                <td><input type='text' id='b_id' name=''></td>
                <td><input type='text' id='b_sms' name=''></td>
                <td><input type='text' id='b_lms' name=''></td>
                <td><input type='text' id='b_mms' name=''></td>
                <td><input type='text' id='b_alarm' name=''></td>
            </tr>
            <tr>
                <td colspan="5" align="center"><button onclick="data_post()">등록하기</button></td>
            </tr>
        </table>
    </form>  
 </div>

<?php
include "/var/www/html/googlefile/tsd/lib/lib.php";
aws_db();
//한글 입력 하게
//mysqli_set_charset($connect,"euc-kr");

$b_id=$_POST['b_id'];
$b_sms=$_POST['b_sms'];
$b_lms=$_POST['b_lms'];
$b_mms=$_POST['b_mms'];
$b_alarm=$_POST['b_alarm'];


$sql= "insert into b2b_info(id,sms,lms,mms,alarm,input_date) values('$b_id',$b_sms,$b_lms,$b_mms,$b_alarm,NOW())";
$row=mysqli_query($connect,$sql);
$result=mysqli_affected_rows($connect);
if ( $result > 0 ){
    echo "등록 성공하였습니다";
}else{
    echo "등록 실패하였습니다";
    
}

/*
mysqli_affected_rows($link)는 

select, insert, update, replace, delete 쿼리 실행 결과가 반영된 레코드의 수를 반환합니다.

< 반환 값 >

  1) 0보다 큰 수 : 퀴리 실행 결과 영향을 받은 레코드 수

  2) 0  : 영향을 받은 레코드가 없음

  3) -1 : 오류
*/

?>

평소 폼에서 submit 방식으로 넘기게 되면

클라이언트->페이지정지->서버에서 판단 후 등록 ->페이지 새로고침 -> 클라이언트 진행된다

ajax를 사용하게 되면 클라이언트->서버에서 판단 후 등록 -> 클라이언트로 페이지를 새로고침 하지않는다

'script' 카테고리의 다른 글

JS innerHTML textContent 차이는? (0)	2023.06.15
[Js] 시간지나면 설정한 링크로 이동 (0)	2022.10.24
[Js] 입력 값 그대로 출력 하기 다양한 값 구하기 document.getElementById Math.round (0)	2022.09.13
[js] jscript 랜덤 한 번호 출력(feat 로또번호) (0)	2022.06.30
[js] javascript setInterval 타이머 설정해서 링크 이동 (0)	2022.06.09