JQuery/AJAX - How To？よりよい結果は？

Question

DataPull.php：

CASE "CityList": 
     echo "<select style='width:132px;height:243px;' size='17' id='CityListA' name='CityListA' onChange='SubCityList(this.value);'>"; 
     $result = $db-> query("SELECT region_id,region_name FROM dwrel_region ORDER BY region_name"); 
     while ($row = $db-> fetch_assoc($result)){ 
      echo "<option value='".$row["region_id"]."'>".$row["region_name"]."</option> \n"; 
     } 
     echo "</select>"; 
     break; 

JavaScriptを：それは私のためだけで正常に動作

function CityList(){ 
    try{var xmlhttp=new XMLHttpRequest();}catch (e){try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}catch (e){try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}catch (e){return false;}}} 
    xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){getEl("CityList").innerHTML=xmlhttp.responseText;}} 
    eMsg = "DataPull.php?get=CityList"; 
    xmlhttp.open("GET",eMsg); 
    xmlhttp.send(); 
} 

。 JQuery/AJAXを読んでいて、$（function（）{}）を使って読めると驚きました。しかし、私は、上記のコードを「そのまま」、どこにどのように組み込むのか理解し始めていない、あるいは理解できません。誰かがAJAXを使って適切な方向へ私を誘導し、結果を引き出して出力するのに十分親切であることを願っています。

これを使用する方法を理解しようとしていましたが、JSONの使用についても説明しましたが、ああ、私は知らない...とにかく、誰かが私がこれをまとめるのを助けることができたら、私はそれをもっと良く理解することができた。

ありがとうございます！これは魔法のように取り組んできました

$.ajax({ 
    beforeSend: function(){ $('#SOMEID').addClass('LoaderIcon'); }, 
    url: "SOME PARAMETER", 
    success:function(data){ 
     $('#SOMEID').removeClass('LoaderIcon'); 
     $('#SOMEID').html(data) 
    } 

：

はEDIT：

.LoaderIcon {width:100%;height:100%;background:url('./images/Loading.gif') no-repeat center center;} 

はJQueryで：CSSで ：この記事から数週間後 は、これを行うための新しい方法を学びましたうまくいけば、それは他人に利益をもたらすでしょう:) }）;

Answer 1

この

function CityList(){ 
$("#YOUR_SPINNING_DIV_ID").html('<img src="PATH_TO_SPINNINGANIM_GIF"'); 
$.ajax({ 
url: "DataPull.php?get=CityList", 
success: function(data){ 
    $("#CityList").html(data); 
$("#YOUR_SPINNING_DIV_ID").html(""); 
} 
}); 
} 

、その後、あなたがボタンをクリックするか、ウィンドウのonloadのように観察されている任意のイベントで、この関数を呼び出してみてください。あなたはwindown上でそれをやっている場合はonloadイベント後、jQueryのequivalientは、あなたのjQuery(document).ready()

msgが与えられたPHPファイルから echoある

$.ajax({ 
    type:'GET', 
    url:'DataPull.php', 
    data:'get=CityList', 
    success:function(msg){ 
     alert('Success!\n\n+'+msg); 
    }, 
    error:function(msg){ 
     alert('Error!\n\n'+msg); 
    } 
}); 

でこのよう

$(document).ready(function() { 

$.ajax({ 
url: "DataPull.php?get=CityList", 
success: function(data){ 
    $("#CityList").html(data); 
} 
}); 
)}; 

Answer 2

何かになります。 Read more about it on the jQuery website。