Ajax กวดวิชาสำหรับการโพสต์และรับ [ปิด]

ฉันต้องการแบบฝึกหัด ajax แบบง่ายหรือกรณีศึกษาสำหรับแบบฟอร์มการป้อนข้อมูลแบบง่ายซึ่งฉันต้องการโพสต์ชื่อผู้ใช้ผ่านแบบฟอร์มป้อนข้อมูลซึ่งจะส่งไปยังฐานข้อมูลและตอบกลับพร้อมผลลัพธ์
ยินดีต้อนรับคำแนะนำใด ๆ สำหรับบทช่วยสอนดังกล่าวเพราะฉันมีเพียงหนึ่งเดียวที่ใช้ Mootool แต่ฉันกำลังค้นหาโดยใช้ jQuery!

คุณสามารถลองสิ่งนี้:

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

รหัสนี้จะผนวกเนื้อหาของtest.htmlไฟล์เข้ากับ#resultsองค์ประกอบ

คุณสามารถค้นหาข้อมูลเพิ่มเติมได้ที่เว็บไซต์ของ jQuery

อัปเดต:

ใช้รหัสนี้เพื่อส่งข้อมูล POST และผลลัพธ์ผลลัพธ์

var menuId = $("ul.nav").first().attr("id");
var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
});

request.fail(function(jqXHR, textStatus) {
  alert( "Request failed: " + textStatus );
});

สมมติว่าคุณมี html บางอย่างเช่น:

<input type="text" name="username" id="username">
<div id="resultarea"></div>

คุณจะใช้สิ่งที่<script>ชอบ:

var myusername = $("#username").val();
$.ajax({
  type: "GET",
  url: "serverscript.xxx",
  data: myusername,
  cache: false,
  success: function(data){
     $("#resultarea").text(data);
  }
});