Belajar ajax
1 load
<!DOCTYPE
html>
<html>
<head><title>
</title>
</head>
<body>
<button
id="clickme">click to see the magic </button>
<div
id="print"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
==================================================================================
<h1>load
function is working</h1>
==================================================================================
$(document).ready(function(){
$('#clickme').click(function(){
alert('masuk');
$('#print').load('ajax.php');
});
});
=================================================================================
2
get http request
<!DOCTYPE
html>
<html>
<head><title>
</title>
</head>
<body>
<h1>Get
http request</h1>
<form
action="ajax.php" method="get">
<input type="text"
name="nama" id="nama">
<input
type="submit" name="submit" id="submit">
</form>
<div
id="div"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
==================================================================================
<?PHP
if(isset($_GET['nama'])){
$nama =
$_GET['nama'];
echo
strrev($nama);
}
?>
==================================================================================
$(document).ready(function(){
$('#submit').click(function(){
var str =
$('#nama').val();
//alert(str);
$.get('ajax.php',{nama:str},
function(nama){
$('#div').text(nama);
});
return false;
});
});
=================================================================================
3 post http request
<!DOCTYPE
html>
<html>
<head><title>
</title>
</head>
<body>
<h1>POST
http request</h1>
<form
action="ajax.php" method="post">
<input
type="password" name="pass" id="pass">
<input
type="submit" name="submit" id="submit">
</form>
<div
id="div"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
==================================================================================
<?PHP
if(isset($_POST['pass'])){
$lenght =
strlen($_POST['pass']);
if($lenght >=
5){
echo"success";
}else{
echo"pass
at least 5";
}
}
?>
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var str =
$('#pass').val();
$.post('ajax.php', {pass:str},
function(pass){
$('#div').text(pass);
});
});
});
========================================================================
4 post function error, complete, success
========================================================================
<!DOCTYPE
html>
<html>
<head><title>
</title>
</head>
<body>
<h1>POST
http request</h1>
<form
action="ajax.php" method="post">
<input
type="password" name="pass" id="pass">
<input
type="submit" name="submit" id="submit">
</form>
<div
id="div"></div>
<div
id="msg"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
========================================================================
<?PHP
if(isset($_POST['pass'])){
$lenght =
strlen($_POST['pass']);
if($lenght >=
5){
echo"success";
}else{
echo"pass
at least 5";
}
}
?>
========================================================================
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var str =
$('#pass').val();
$.post('ajax.php', {pass:str},
function(pass){
$('#div').text(pass);
}).error(function(){
$('#msg').append('Error');
}).complete(function(){
$('#msg').append('complete');
}).success(function(){
$('#msg').append('success');
});
});
});
========================================================================
5. $.ajax() function
========================================================================
<!DOCTYPE html>
<html>
<head><title>
</title>
</head>
<body>
<h1>POST http
request</h1>
<form
action="ajax.php" method="post">
<p>Name
: <input type="text" name="nama"
id="nama"></p>
<p>Feedback
: <textarea
name="feedback"id="feedback"></textarea></p>
<input
type="submit" name="submit" id="submit">
</form>
<div
id="msg"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
========================================================================
<?PHP
if(isset($_POST['nama'])){
$nama
= $_POST['nama'];
$feedback
= $_POST['feedback'];
echo
$nama.'<br>'.$feedback;
}
?>
========================================================================
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var
nama1 = $('#nama').val();
var
feedback1 = $('#feedback').val();
//
url, type, DATA
$.ajax({
url:'ajax.php',
type:'POST',
data:{nama:nama1,
feedback:feedback1},
complete:function(data){
//console.log(data.responseText);
$('#msg').html(data.responseText)
}
});
});
});
========================================================================
6. $.ajax()
function callback
========================================================================
<!DOCTYPE
html>
<html>
<head><title>
</title>
</head>
<body>
<h1>POST
http request</h1>
<form
action="ajax.php" method="post">
<p>Name : <input
type="text" name="nama" id="nama"></p>
<p>Feedback : <textarea
name="feedback"id="feedback"></textarea></p>
<input
type="submit" name="submit" id="submit">
</form>
<div
id="msg"></div>
<div
id="1"></div>
<script
src="../../jquery/external/jquery/jquery.js"></script>
<script
src="main.js"></script>
</body>
</html>
========================================================================
<?PHP
if(isset($_POST['nama'])){
sleep(1);
$nama =
$_POST['nama'];
$feedback =
$_POST['feedback'];
echo
$nama.'<br>'.$feedback;
}
?>
========================================================================
$(document).ready(function(){
$('#submit').click(function(e){
e.preventDefault();
var nama1 =
$('#nama').val();
var feedback1 =
$('#feedback').val();
// url, type,
DATA
$.ajax({
url:'ajaxs.php',
type:'POST',
data:{nama:nama1,
feedback:feedback1},
beforeSend:function(){
$('#msg').text('Loading.......');
},
complete:function(data){
//console.log(data.responseText);
$('#msg').html(data.responseText);
}
}).done(function(){
$('#1').append('done');
}).always(function(){
$('#1').append('always');
}).fail(function(){
$('#1').append('fail');
});
});
});
0 Response to "belajar jquery ajax"
Posting Komentar