AJAX入門 - 通過PHP更新表單

我有一個簡單的HTML表單，它以選擇菜單開始，用戶可以從項目列表中進行選擇。我創建了一個簡單的jsfiddle與HTML表單的位置：AJAX入門 - 通過PHP更新表單

http://jsfiddle.net/AZ4PM/

我想什麼發生的是，當用戶從列表中選擇它觸發要執行的PHP腳本從取值他們選擇的ProjectNumber並將其作爲參數傳遞，例如如果我選擇項目A的網址是：

getProjectPhases.php projectNumber = 10000

然後，這個PHP腳本將返回一個新的表格單元格，我會再像出現在表單中的第二小區？它包含一個新的選擇菜單，其值根據第一個選擇菜單中的選擇而變化。這個php頁面手動運行的很好，但是現在我需要在用戶從項目編號菜單中進行選擇時觸發它。

我是AJAX新手，想從一個簡單的例子開始，一步一步學習。如果能讓事情變得更簡單，我很樂意使用jQuery。

欣賞任何指向我需要包含的基本元素（假設至少有一個js文件等）的指針。

來源

2012-05-29 user982124

我有非常相似的，我使用的東西：

<select name="selectProject" id="selectID" onChange="showUser(this.options[selectedIndex].value)"> 

    <?php 
     // Loop through and list each project 
     foreach ($var as $row) { 
      echo '<option value="'.$row['projectNumber'].'">'.$row['projectName'].'</option>'; 
     } 
    ?> 

</select> 

<label>Project Name</label> 
<input id="projectName" type="text" class="span3" name="projectName">

以上只是調用與是projectNumber

參數的showUser函數，那麼下面我有：

<SCRIPT TYPE="text/javascript"> 

    // Function to fill in form fields 
    function showUser(str) 
    { 
    if (str=="") 
     { 
     document.getElementById("").innerHTML=""; 
     return; 
     } 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      var obj = eval('(' + this.responseText + ')'); 


      document.getElementById("projectName").value=obj.projectname; 
     } 
     } 
    xmlhttp.open("GET","http://url.com/ajax/"+str,true); 
    xmlhttp.send(); 
    } 
</SCRIPT>

此腳本將調用url url.com/ajax/whateverIdIsSelected

從該頁面開始，您想做任何與您的查詢有關的事情。

至於什麼回來，我有這樣的設置爲使用JSON，這是我爲什麼我行

var obj = eval('(' + this.responseText + ')');

this.reponseText就是從AJAX頁面返回。我的回電看起來像這樣

$projectData = json_encode($project); 

echo $projectData;

其中$ project是一個包含項目屬性的數組。

我對ajax或js不太好，但是我按照我喜歡的方式工作。如果您有任何問題，請告知我

來源

2012-05-29 14:43:58

通行證ID的選項選擇列表

<select name="ProjectNumber" id="ProjectNumber">

然後調用一個方法有這些，然後通過Ajax調用解析它。

var pvalue = document.getElementById('ProjectNumber').value; 
var url = 'getProjectPhases.php?projectNumber='+pvalue;

來源

2012-05-29 14:28:56 swapnesh

首先，你需要JQuery的change()處理程序綁定到你的下拉菜單中，調用啓動Ajax請求的功能，看看jQuery的get function你需要做的是這樣的：

$.get("getProjectPhases.php", { projectNumber: this.val() }, function(data){ 
    //Update your output using the data var 
);

其中data是getProjectPhases的輸出，所以它可能是一個好主意，只是輸出純文本和沒有html標籤或什麼。

來源

2012-05-29 14:30:56

AJAX入門 - 通過PHP更新表單

回答

相關問題