HOWTO · jQuery
jQuery AJAX 데이터
이 튜토리얼은 jQuery AJAX에서 데이터를 사용하는 방법을 보여줍니다.
AJAX 데이터는 서버로 전송되어 서버에서 사용되는 데이터입니다. 이 튜토리얼은 jQuery에서 AJAX를 사용하여 서버에 데이터를 보내는 방법을 보여줍니다.
jQuery AJAX 데이터
AJAX를 사용하여 서버로 보내는 데이터는 JSON 객체, 문자열 또는 배열일 수 있습니다. 이 데이터는 어떤 목적으로든 서버 페이지에서 추가로 사용됩니다.
배열 또는 JSON 개체를 사용하여 단일 또는 여러 데이터를 보낼 수 있습니다. 아래 구문을 사용하여 배열과 함께 여러 데이터 필드를 보냅니다.
data: {username: username, password: password}
이 방법은 여러 데이터 필드를 서버로 보낼 수 있으며 추가 프로세스에 사용할 수 있습니다. 이 경우 직렬화된 JSON 개체의 모든 데이터 필드를 보낼 수 있는 JSON 개체가 더 편리합니다.
JSON 개체를 사용하여 여러 데이터 필드를 보내는 예제를 시도해 보겠습니다. 예를 참조하십시오.
index.html:
<!doctype html>
<html>
<head>
<title>jQuery Ajax Data</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Login_Form" method="post">
<div>
Enter the Username:
<input type="text" name="username" id="User_Name" />
Enter the Password:
<input type="password" name="password" id="Password" />
<input type="submit" name="loginBtn" id="Login_Button" value="Login" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#Login_Form').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'demo.php',
data: $(this).serialize(),
success: function(response) {
var JSON_Data = JSON.parse(response);
// user login check
if (JSON_Data.success == "1" && JSON_Data.username == "admin" && JSON_Data.password == "password" )
{
document.write('Login Success');
alert(response);
}
else
{
alert('Invalid User Name and Password!');
}
}
});
});
});
</script>
</body>
</html>
위의 코드는 $.ajax 및 post 메소드를 사용하여 양식 데이터를 서버에 보내고 서버는 로그인 목적으로 데이터를 사용합니다. 데이터는 data: $(this).serialize(), 구문을 사용하여 직렬화된 객체로 전송됩니다. 여기 demo.php 서버 페이지가 있습니다.
<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
//Here we can also perform authentication
echo json_encode(array('success' => 1, 'username' => $_POST['username'], 'password' => $_POST['password'] ));
} else {
echo json_encode(array('success' => 0));
}
?>
서버 코드는 사용자 이름과 암호가 설정되었는지 확인한 다음 AJAX로 다시 보낼 JSON 객체를 생성합니다. index.html 페이지에서 jQuery의 로그인을 인증했습니다.
아래 애니메이션의 코드 출력을 참조하세요.
