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


99

単純なajaxチュートリアルまたは単純な入力フォームのケーススタディが必要です。入力フォームを介してユーザー名を投稿し、データベースに送信して結果を返信します。
Mootoolを使用しているチュートリアルは1つしかありませんが、jQueryを使用しているチュートリアルを探しているので、そのようなチュートリアルに対する推奨は大歓迎です。


回答:


167

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

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

このコードはtest.htmlファイルのコンテンツを#results要素に追加します

詳細については、jQuery Webサイトを参照してください

更新:

このコードを使用して、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 );
});

39

あなたがいくつかのような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);
  }
});

6
dataのようにパラメータ名を設定する必要があるかもしれません: "username =" + myusername
GrandMasterFlush

このライブラリgithub.com/Guseyn/EHTMLを使用して、HTMLのみを使用してajaxを実行することもできます
Guseyn Ismayylov
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.