Oleh: awaludinfajari | November 25, 2011

Ajax-jquery:Metode Pengiriman data

Contoh program metode pengiriman data menggunakan ajax di jquery, kelebihanya tidak mereload.

<html>
<head>
	<script src="jquery-1.4.js"></script>
	<script>
		$(document).ready(function(){
			$("#submit").click(function(){
				var nama=$("#nama").val();
				$.ajax({
					type:"POST",
					url:"coba.php",
					data:"nama="+nama,
					success:function(data){
						$("#info").html(data);
					}
				});
			});
		});
	</script>
</head>
<body>

	Masukan nama anda :
	<input type="text" name="nama" id="nama" />
	<input type="submit" value="proses" id="submit" />
	<div id="info"></div>
</body>
</html>

Selanjutnya buat coba.php

<?php
$nama=$_POST['nama'];
echo"<div id=kolom>Selamat datang $nama</div>";
?>
<style>
		#kolom{
			border:1px solid #000;
			padding:5px;
			background-color:#dced8c;
			color:000;
			width:350px;
		}
	</style>

hasilnya :


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Kategori

%d blogger menyukai ini: