+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] jQuery/AJAX Tutorial for Beginners (/showthread.php?tid=5933396)
jQuery/AJAX Tutorial for Beginners - phlex - Jan 24, 2019
Hey folks, I made a video tutorial on how to submit data from one file to another, and evaluate the returned data. This can be used for checking user logins (with proper encryption), sending/retrieving data to a database or file, and be really helpful with creating a beautiful website with limited page refreshes/loads! :)
I hope this helps some of you understand AJAX/jQuery a little bit better!
Let's go over the code...
index.php (the file sending data from user input)
Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box">
<input type="text" name="user-input" id="user-input" class="input-box" /> <br />
<a id="submit-button" class="submit-button" href="#">Submit</a>
</div>
</body>
[b]<!--[/b] https://code.jquery.com -->
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#submit-button").on("click", function(e){
e.preventDefault() // don't let href='#' do anything
var value = $("#user-input").val() // get the value from input box
$.ajax({
url: "data.php", // file to send to
method: "GET", // GET or POST
dataType: "text", // expected data type returned from data.php
data: { // data being sent
val:value // send our value as $_GET['val'] or $_POST['val']
}
}).done(function(returneddata){
console.log(returneddata) // show the data echo'd by data.php
if(returneddata == 'success'){ // evaluate data returned
alert('Congratulations!') // i do not use alerts much, i use modals instead -- but for this tutorial we'll alert!
} else {
alert(returneddata); // return an error message
}
})
})
})
</script>
</html>data.php (the file receiving data & evaluating it)
PHP Code
<?php
if(isset($_GET['val'])){
// $val = trim($_POST['val']);
// $desired = 'hello';
if(trim($_GET['val']) == 'hello'){
echo "success";
} else {
echo "The value $val is incorrect and does not match!";
}
} else {
echo "I do not have the neccessary \$_GET value to proceed!";
}
?>style.css - make it look nice :)
Code
.box{
background-color:#f2f2f2;
padding:25px;
max-width:100%;
margin-left:50px;
margin-right:50px;
border-radius:5px;
text-align:center;
}
.input-box{
border-radius:3px;
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
padding-right:5px;
}
.submit-button{
display:inline-block;
position:relative;
margin-top:10px;
border-radius:3px;
background-color:green;
color:white;
border:1px solid black;
text-decoration:none;
padding:10px;
}
.submit-button:hover{
background-color:white;
color:green;
border:1px solid green;
}RE: jQuery/AJAX Tutorial for Beginners - .Ecstasy - Jan 26, 2019
Great tutorial this will help a lot of people get an understanding of how jquery works. Although it might be better to use a live environment on your pc instead of your cpanel hosting.