投稿と取得のためのAjaxチュートリアル

Question

シンプルな入力フォームのためのシンプルなAjaxチュートリアルやケーススタディが必要です。入力フォームからユーザー名を投稿して、データベースに送信し、結果を返信します。
このチュートリアルの推奨事項は歓迎です.Mootoolを使用しているのですが、jQueryを使用して検索しています。

Answer 1

あなたはこれを試すことができます。

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

このコードは、あなたがjQuery websiteでより多くの情報を見つけることができます#results要素

にtest.htmlファイルの内容を追加します。

更新：

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); 
}); 

Answer 2

あなたのような一部の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); 
    } 
});