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의 로그인을 인증했습니다.
아래 애니메이션의 코드 출력을 참조하세요.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook