修改結果表使用AJAX

我有一個PHP網站，允許用戶搜索圖書館目錄，然後選擇/添加書到購物車。這一切運作良好，但我們希望在搜索結果表中實現AJAX，以便與其單擊運行另一個php腳本的鏈接將選定記錄添加到其購物車中，而不是在同一頁面內嵌入。這將刪除搜索結果頁面，當他們「選擇」一條記錄時刷新，並且它會彈出回頁面頂部（如果您位於頁面底部則很煩人）。修改結果表使用AJAX

我發現了一個類似的例子，用鏈接實現AJAX - 這是我第一次使用AJAX--但是當用戶單擊鏈接時我沒有任何反應。

這裏是我的腳本：

function selectRecord() { 
    // Allocate an XMLHttpRequest object 
    if (window.XMLHttpRequest) { 
     // IE7+, Firefox, Chrome, Opera, Safari 
     var xmlhttp=new XMLHttpRequest(); 
    } else { 
     // IE6, IE5 
     var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    // Set up the readyState change event handler 
    xmlhttp.onreadystatechange = function() { 
     if ((this.readyState == 4) && (this.status == 200)) { 
     document.getElementById("selectRecord").innerHTML=xmlhttp.responseText; 
     } 
    } 
    // Open an asynchronous POST connection and send request 
    xmlhttp.open("POST", "selectRecord.php", true); 
    return false; // Do not follow hyperlink 
}

，並在這裏與鏈接的表格單元格：

<td class="hidden-narrow" id="selectRecord"> 
       <?php 
       if (in_array($bookID, $_SESSION['selectedBooks'])) { 
        echo "Selected"; 
       } else { 
       echo '<a href="select" onclick="return selectRecord()" class="center">Select</a>'; 
       } 
       ?> 
       </td>

如果目前還不清楚結果，我追求的是一個鏈接（「選擇」）在表單元格中 - 當用戶單擊此鏈接時，它將執行selectRecord.php腳本，該腳本將回顯「選定」或出現錯誤時顯示錯誤消息。目前用戶點擊Select鏈接時沒有任何反應。

我還需要弄清楚如何將$ bookID PHP變量傳遞給AJAX腳本，以便selectRecord.php知道要將哪個Book ID添加到購物車。

來源

2013-08-01 user982124

您可以將參數添加到您的selectRecord（）調用是這樣的：

echo '<a href="select" onclick="return selectRecord('.$bookID.')" class="center">Select</a>';

然後你selectRecord功能應該是這樣的：

function selectRecord(id) { 
    // Allocate an XMLHttpRequest object 
    if (window.XMLHttpRequest) { 
     // IE7+, Firefox, Chrome, Opera, Safari 
     var xmlhttp=new XMLHttpRequest(); 
    } else { 
     // IE6, IE5 
     var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    // Set up the readyState change event handler 
    xmlhttp.onreadystatechange = function() { 
     if ((this.readyState == 4) && (this.status == 200)) { 
     document.getElementById("selectRecord").innerHTML="Selected"; 
     } 
    } 
    // Open an asynchronous POST connection and send request 
    xmlhttp.open("POST", "selectRecord.php", true); 
    xmlhttp.send("id="+id); 
    return false; // Do not follow hyperlink 
}

這工作得很好，只要有只有一個元素在你的文檔中，id爲selectRecord。您可以隨時修改任何鏈接的ID，只需將BookId編號作爲後綴添加即可。請注意，您的代碼無法正常工作，因爲它缺少實際執行請求的xmlHttpRequest對象上的.open調用。

來源

2013-08-01 12:36:51 sangaran

這很好 - 我不得不在腳本中添加一行以處理我的服務器：xmlhttp.setRequestHeader（「Content-type」，「application/x-www-form-urlencoded」）; – user982124

修改結果表使用AJAX

回答

相關問題