Load Ajax PHP dengan JQuery
ajax yakni kepanjangan dari Asynchronous JavaScript and XMLHTT, ajax ini yakni tekhnologi di laman yang gunanya bagi bertukar data, mengirm data, dan berkomunikasi data dari client ke server tanpa mereload halamannya. tentu ajax ini bukan bahasa pemrogramman yah teman teman, ajax ini hanya cara dan pengembangan dari javascript,jquery dan PHP tersebut. nah bagi belajar ajax saya asumsikan teman teman telah belajar javascript, jquery, PHP dan pun database yah teman teman. karena kita akan mempraktekannya dengan JQuery, berarti teman teman mesti unduh jquery nya terlebih dahulu yah. kita akan belajar menggunakan load ajax bagi memanggil data php dari luar file php tersebut dengan JQuery. seketika saja kita praktekan yah teman teman belajar Load Ajax PHP dengan JQuery.
disini kita buah file index.php dan bikin struktur berikut
index. php
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1>
<meta name=description content=Demo project with jQuery>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css integrity=sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy crossorigin=anonymous>
</head>
<body>
<div class=container>
<div class=row>
<div class=col>
<header class=lead text-white bg-info mb-2 p-2> Header </header>
<div id=box></div>
<footer class=lead text-white bg-info mt-2 p-2> Footer </footer>
</div>
</div>
</div>
</body>
</html>
struktur nya sederhana sebetulnya, kita merancang header, id box dan footer, nah ide nya sendiri id box ini akan kita isi dari file data.php. dan di pada data .php ketikan kode berikut.
<p class=lead>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure incidunt modi labore explicabo ducimus esse consequatur, iste sequi enim neque numquam, quibusdam adipisci dolorem architecto eveniet, delectus facere. Necessitatibus delectus tempore beatae numquam vero voluptates cum quo magnam, ducimus iure molestias obcaecati aperiam explicabo dignissimos ut cumque, sapiente hic alias odio ipsum labore quibusdam architecto! Nemo distinctio ipsum aperiam nostrum minima fugit veritatis debitis cumque eveniet rerum dignissimos iste, dolores laborum odio blanditiis, odit ex? Dolorem vero fugit aspernatur eaque ipsum dolores ut, perferendis corrupti magni deleniti vel necessitatibus repudiandae iste repellendus, qui excepturi minima, omnis assumenda porro autem blanditiis?</p>
<p class=lead>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure incidunt modi labore explicabo ducimus esse consequatur, iste sequi enim neque numquam, quibusdam adipisci dolorem architecto eveniet, delectus facere. Necessitatibus delectus tempore beatae numquam vero voluptates cum quo magnam, ducimus iure molestias obcaecati aperiam explicabo dignissimos ut cumque, sapiente hic alias odio ipsum labore quibusdam architecto! Nemo distinctio ipsum aperiam nostrum minima fugit veritatis debitis cumque eveniet rerum dignissimos iste, dolores laborum odio blanditiis, odit ex? Dolorem vero fugit aspernatur eaque ipsum dolores ut, perferendis corrupti magni deleniti vel necessitatibus repudiandae iste repellendus, qui excepturi minima, omnis assumenda porro autem blanditiis?</p>
hanya dua paragraf saja yng akan kita tampilkan. sebelum itu kita lihat dulu di localhost hasilnya yah teman teman.
seperti yang saya bilang hanya ada header, id box dan footer dimana id box akan kita isi dengan load ajax.
oke kita kembali ke index.php kita panggil jquery nya yah teman teman dan tuliskan manfaat load ajax nya dengan jquery. ketikan kode berikut sebelum penutup body.
dan setelah itu kita dapat ke localhost dan lihat hasilnya.
dimana hasilnya yakni kita berhasil memanggil data dari data.php menggunakan load ajax ini.
demikian panduan Load Ajax PHP dengan JQuery, semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
