jQuery：使用<a>鏈接提交ajax查詢

Question

我想發送一個php腳本的一些內容通過ajax存儲在數據庫中。我正在使用jQuery框架。我想使用頁面上的鏈接發送信息。我無法編寫將發送和接收信息的函數，我嘗試過的所有內容都是漸近的。

編輯

的想法是，用戶會點擊鏈接，和一列稱爲一個名爲「清單」將更新到餐桌「show_online」（一個小INT）1或0（* *一個基本的二進制切換！）成功時，被點擊的特定鏈接將被更新（如果它以前發送1，它將被設置爲0）。

編輯

將會有一個頁面上的這些鏈接20-30。我已經設置了每個包含div的唯一id（'onlineStatus'）。我寧願不爲每個實例都有單獨的js函數。

任何援助非常感謝。基本代碼如下。

<script type="text/javascript"> 
    function doAjaxPostOnline(shouldPost, bizID){ 
     load("ajaxPostOnline.php?b='+bizID+'&p='+shouldPost", jsonData, callbackFunction); 
function callbackFunction(responseText, textStatus, XMLHttpRequest) 
{ 
    // if you need more functionality than just replacing the contents, do it here 
} 

     } 
    } 
</script> 


<!-- the link that submits the info -->: 
<div id='onlineStatus<?php echo $b_id ?>'> 
<a href='#' onclick="doAjaxPostOnline(0, <?php echo $b_id ?>); return false;" >Post Online</a> 
</div> 

ajaxPostOnline.php

<!-- ajaxPostOnline.php ... the page that the form posts to --> 
<?php 
    $id = mysql_real_escape_string($_GET['b']); 
    $show = mysql_real_escape_string($_GET['p']); 

    if($id && ctype_digit($id) && ($show == 1 || $show == 0)) { 
     mysql_query("UPDATE listing SET show_online = $show 
     WHERE id = $id LIMIT 1"); 
    } 

    if($result) { 
     if($show == '0'){ 
      $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline(1, <?php echo $b_id ?>); return false;' >Post Online</a>"; 
     } 
     if($show == '1'){ 
      $return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline(0, $b_id); return false;' >Post Online</a>"; 
     } 
     print json_encode(array("id" => $id, "return" => $return)); 
    } 
?> 

Answer 1

jQuery中的load（）函數對於這類事情非常酷。

下面是一個例子。基本上，你有一個外部的div作爲一個容器。你調用一個腳本/服務返回html。你在那個html中有一個div，並且你會在後面的ajax調用中引用它。替換div替換容器div的內部html。將數據作爲json對象傳遞給load方法的第二個參數，並且可以將引用傳遞給回調函數作爲第三個參數。回調函數將從響應中接收所有可能的信息（用於進一步解析/處理的完整響應文本，http狀態代碼和與此ajax調用關聯的XMLHttpRequest對象）。

$("#id_of_some_outer_div").load("somepage.php #id_of_replacement_div", jsonData, callbackFunction); 

function callbackFunction(responseText, textStatus, XMLHttpRequest) 
{ 
    // if you need more functionality than just replacing the contents, do it here 
} 

因此，在你的情況下，你正在討論替換鏈接。將原始鏈接放在操作兩側的div內。

這裏是（）鏈接到jQuery的API文檔負載：

load

編輯：

在回答你關於在一個通進行多次置換評論：

你可以有回調函數爲你做所有的工作。

1. 爲所有需要更換的div添加一個獨特的css類。這將允許您一次全部選中它們。請記住，html元素可以有多個css類（這就是CSS中的「c」意思）。所以，他們都是<div id="[some unique id]" class="replace_me"...然後，如果你有一個變量設置爲$("div.replace_me")，這將是所有div的集合與replace_me風格。
2. 無論來自ajax調用的任何元素（無論它們是另一個div容器還是隻是一個「a」元素），都應該有一個與要插入的容器類似的唯一id。例如，div_replace1將容器的ID和div_replace1_insert將是元素的id被插入
3. 裏面的回調函數，使用$("div.replace_me").each(function(){ ...
4. 內每次迭代的關鍵字「this」指的是迭代的替代當前項目。你可以獲取這個項目的ID，有一個像var replacement_id = this.id + "_insert";這樣的變量（如上例），它現在是你想要插入的元素的唯一ID。 $("#" + replacement_id)現在會給你一個你想要插入的元素的引用。你可以做這樣的插入：this.html($("#" + replacement_id));

你可能需要編輯上面的代碼（它沒有測試），但這將是一般的想法。您可以使用命名約定將ajax返回數據中的元素與頁面上的元素相關聯，使用「each」迭代頁面上的元素，並將其替換爲this.html（）

Answer 2

你真的要申報你的Ajax成功返回功能

function(html) 

？ ..我想也許你的意思是參數是'數據'？

Answer 3

由於您的php腳本正在返回json你應該將dataType設置爲json。請注意，在您的發佈代碼示例中，success函數（）不在$ .ajax（）之內，它需要位於內部。

$.ajax({ 
    url: "ajaxPostOnline.php?b=" + bizID + "&p=" + shouldPost, 
    dataType: "json", 
    success: function(json){ 
    $("#onlineStatus" + bizID).html(json.return); 
    } 
}); 

您可能想查看getJSON方法，因爲它對於這種特殊情況更簡潔。

$.getJSON("ajaxPostOnline.php", {b:bizID, p:shouldPost}, function(json) { 
    $("#onlineStatus" + bizID).html(json.return); 
}); 

編輯：原來的問題被編輯和提供的示例顯着改變。我仍然會推薦$ .getJSON方法。

Answer 4

除非我誤會，看起來你有一個混合AJAX和服務器端腳本的錯誤。

這取決於$ return是否在ajaxPostOnline.php中的賦值片段之後的任何位置解析（很難，如果它是從AJAX調用的！）。

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline(1, <?php echo $b_id ?>); return false;' >Post Online</a>"; 

當然這應該是：

$return = "<a class='onlineStatus' href='#' onchange='doAjaxPostOnline(1, ".$id."); return false;' >Post Online</a>";