2011-12-04 92 views
1

嗨,我需要以下代碼的幫助。我搜查了一些帖子和其他網站,但無濟於事。將動態jQuery帖子傳遞給PHP

這是一個從我正在建立的網站上剝離下來的版本,它有許多使用CKeditor可編輯的div的管理頁面,所以序列化對我來說不是一種選擇(我不認爲)。當我硬編碼$.post索引併爲內容使用變量時,我可以將該數組傳遞給PHP。

這對一個頁面沒問題,但我有很多。所以當我嘗試將數組字符串構造爲變量並將其作爲第二個參數傳遞給$.post時,它會失敗。 Firebug顯示json被傳遞,儘管值爲紅色(硬編碼版本未被標識爲json!只是索引值)。我認爲這只是一個語法問題,但我已經遇到了困難。任何人都可以向我展示光明。

PHP處理程序嘗試讀取POST的各種方法。

動態HTML與JS:

<html> 
<head> 
<title>jQuery POST Test</title> 

<script type="text/javascript" src="jQuery.min.js"></script> 
<script type="text/javascript"> 
function getElementsByClass(searchClass) { 
    var classElements = new Array(); 
    var node = document; 
    var tag = 'div'; 
    var els = node.getElementsByTagName(tag); 
    var elsLen = els.length; 
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); 
    for (i = 0, j = 0; i < elsLen; i++) { 
     if (pattern.test(els[i].className)) { 
      classElements[j] = els[i]; 
      j++; 
     } 
    } 
    return classElements; 
} 

function getDivs(){ 
var divArry = getElementsByClass('editable') 
var postElmnts = ''; 
    for(i=0; i<divArry.length; i++){ 
     pageName = divArry[i].id; 
     pageContent = document.getElementById(pageName).innerHTML; 
     //alert(pageName + ': ' + pageContent);//Test if divs are identified properley 
     postElmnts= postElmnts + pageName + ': ' + pageContent + ', '; 
    }; 
    postElmnts = postElmnts.slice(0, -2); 
    postArry = '{' + postElmnts + '}'; 
    $.post("process_jQuery_test.php",postArry, function(data){alert(data + 'Original: ' + postArry);}); 

} 

function grabText(){ 
    var one = document.getElementById('block1').innerHTML; 
    var two = document.getElementById('block2').innerHTML; 
    var three = document.getElementById('block3').innerHTML; 
    $.post("process_jQuery_test.php", { block1: one, block2: two, block3: three}, function(data){alert(data);}); 

} 

</script> 
</head> 

<body> 
    <button onClick="getDivs();">Get Divs dynamically</button> 
    <button onClick="grabText();">Grab Text to hard coded index</button> 


    <div id="block1" class="editable"><p>This is Block 1 content</p></div> 
    <div id="block2" class="editable"><p>This is Block 2 content</p></div> 
    <div id="block3" class="editable"><p>This is Block 3 content</p></div> 
</body> 
</html> 

這是PHP的測試操作:

<?php 
$data = json_decode($_POST, true); 
$decode = json_decode($_POST,true); 
$decodeNstrip = json_decode(stripslashes($_POST),true); 

echo "Post 0: ".$_POST[0]."\n\r"; 

echo "\n\rPost block1: ".$_POST['block1']."\n\r"; 

echo "\n\rPost loop\n\r"; 
foreach($_POST as $key => $value){ 
    echo $key.': ' .$value."\n\r"; 
} 

echo "\n\rPost decode: "; 
print_r($decode)."\n\r"; 

echo "\n\rPost decode and strip: "; 
print_r($decodeNstrip)."\n\r"; 

echo "\n\rPost Array: "; 
print_r($_POST)."\n\r"; 

?> 
+0

什麼反應是郵政進入螢火蟲? – Rooster

+1

您需要開始使用'var' ...它缺少例如爲你的循環變量。除此之外,你正在使用jQuery。所以你沒有理由使用諸如'getElementsByClass'或'getElementById'這樣的函數。 – ThiefMaster

+0

@ThiefMaster是對的,你絕對需要在你的for循環中使用var。最近我遇到了這個問題,它引發了一些錯誤,直到有一位同事指出這一點。 –

回答

1

在grabText你傳遞一個數組/對象,但在getDivs你想發送文本。文本可以格式化爲query string,但我更喜歡這種方法。

function getDivs(){ 
var divArry = getElementsByClass('editable') 
var postElmnts = ''; 
var msg = {} 
    for(i=0; i<divArry.length; i++){ 
     pageName = divArry[i].id; 
     pageContent = document.getElementById(pageName).innerHTML; 
     msg[pageName] = pageContent 
    }; 
    $.post("handle.php",msg, function(data){alert(data);}); 
} 

這是jQuery的方式。我仍然更喜歡更傳統的方法(加上它快一點)。

function getDivs(){ 
    var msg = {} 
    $('.editable').each(function(e){ 
      msg[$(this).attr('id')] = $(this).html(); 
    }); 

    $.post("handle.php",msg, function(data){alert(data);}); 
} 
+0

這工作完美。我曾嘗試過一些我認爲非常相似的東西,但我必須有語法錯誤。還要感謝ThiefMaster,我對javascript和jQuery有一點小菜,而且我需要刷新自己的知識。什麼會取代jQuery中的getElementsByClass? – Bluebox

+0

@Bluebox,我添加了jQuery版本。 – FakeRainBrigand

+0

對不起FakeRainBrigand,我很早就錯過了,這種方式也是一種享受。感謝大家的幫助。 – Bluebox

3

在將數據傳遞到.POST只接受StringObject

String在查詢字符串,例如year=2000&month=11

Object在鍵值/配對,例如{"year":2000,"month":11}

+0

謝謝@WT。關於查詢字符串的說明。我糾正了我的答案。 – FakeRainBrigand