Cara Menggunakan Jquery Ajax Post

Hallo sahabat Dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini kita akan belajar tentang Cara Menggunakan Jquery Ajax Post.Â Jquery ajax post ini sangat berguna sekali bagi kita. Contoh ini mengambil cuplikan HTML yang diminta dan memasukkannya ke halaman. Halaman yang diambil dengan POST tidak pernah di-cache, jadi opsi cache dan ifModified di jQuery.ajaxSetup () tidak berpengaruh pada permintaan ini.

Oke langsung saja kita bikin file index.html yang akan menjadi file utama dari jquery post. Di mana kita nanti akan me-load file result.html yang sudah saya bikin di bawahnya. silahkan buat file index.html di bawah ini dulu.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file </p>
		
      <div id = "stage" >
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Oke kalau sudah silahkan buat file result.html di bawah ini karena file ini yang akan kita load melalui

 $('#stage').load('result.html');

Oke langsung saja buat filenya di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<style type="text/css">
			body
{
    font-family: arial, sans-serif;
    font-size: 100%;
    margin: 10px;
    color: #222;
    background-color: #dfd;
}
 
#page
{
    min-width: 200px;
  height: 100%;
    padding: 20px 30px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #999;
}
 
section
{
    width: 100%;
    margin-bottom: 3em;
}
 
div.element
{
    text-align: center;
    padding: 10px 0;
    margin: 4px;
    background-color: #dfd;
    border: 2px solid #666;
}
 
h1
{
    font-weight: normal;
    margin: 0 0 1em 0;
}
 
strong
{
    color: #c00;
}
 
@media all and (min-width: 500px) {
  body
{
    background-color: #ddf;
}
 
#page
{
    max-width: 600px;
}
  
section:after {
  content: "";
  display: table;
  clear: both;
}
 
div.element
{
    float: left;
    width: 30%;
    padding: 30px 0;
    background-color: #ddf;
}
}
	</style>
</head>
<body>
<script type="text/javascript">
	
	/* JavaScript Media Queries */
if (matchMedia) {
    const mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
 
// media query change
function WidthChange(mq) {
 
    const msg = (mq.matches ? "more" : "less") + " than 500 pixels";
    document.getElementById("current").firstChild.nodeValue = msg;
 
}
</script>
	<div id="page">
		<h1>JavaScript Media Queries</h1>
 
		<p>Current design: <strong id="current">unknown</strong></p>
 
		<section>
		  <div class="element">element one</div>
		  <div class="element">element two</div>
		  <div class="element">element three</div>
		</section>
 
	</div>



</body>
</html>

Dari script di atas dimana ketika user mengklik tombol button load data maka otomatis file result.html akan terpanggil dan tampil ke dalam file index.html. Oke itulah tadi pembahasan saya tentang Cara Menggunakan Jquery Ajax Post semoga bermanfaat.

Kategori