如何從json編碼數組中獲取特定值？

-1

這是我的JavaScript和我的PHP動態Ajax搜索。我試圖從數據庫中獲取數據並將其作爲字符串顯示在我的DOM中。如何從json編碼數組中獲取特定值？

的JavaScript

var searchBox = document.getElementById("searchBox"); 
var searchButton = document.getElementById("searchButton"); 
var search = getXmlHttpRequestObject(); 

searchBox.addEventListener("keyup", ajaxSearch); 

function getXmlHttpRequestObject(){ 
    if(window.XMLHttpRequest){ 
    return new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject){ 
    return new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else{ 
    alert("Your browser does not support our dynamic search"); 
    } 
} 

function ajaxSearch(){ 
    var str = escape(document.getElementById('searchBox').value); 
    search.open("GET", '../searchSuggest.php?search=' + str, true); 
    search.send(null); 
    delay(displaySuggestions); 
} 

function displaySuggestions(){ 
    var ss = document.getElementById("searchSuggestion"); 
    ss.innerHTML = ''; 
    string = search.responseText; 
    ss.innerHTML = string; 
} 


function delay(functionName){ 
setTimeout(functionName, 100); 
} 

function setSearch(x){ 
    document.getElementById("searchBox").value = x; 
    document.getElementById("searchSuggestion").innerHTML = ""; 
} 

searchBox.addEventListener('click', ajaxSearch); 
window.addEventListener('click', function(){ 
    document.getElementById('searchSuggestion').innerHTML = ''; 
    });

PHP

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = "root"; 
$dbname = "Products"; 

try { 
    $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); 
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

    $searchValue = $_GET['search']; 

    if(isset($searchValue) && $searchValue != ''){ 
    $search = addslashes($searchValue); 
    $statement = $conn->prepare("SELECT Name FROM Product WHERE Name LIKE('%" . $search . "%') ORDER BY 
    CASE WHEN Name like '" . $search . " %' THEN 0 
    WHEN Name like '" . $search . "%' THEN 1 
    WHEN Name like '% " . $search . "%' THEN 2 
    ELSE 3 
    END, Name"); 
    $statement->execute(); 


    $result = $statement->fetchAll(PDO::FETCH_ASSOC); 
    $json = json_encode($result); 
    echo $json; 

    } 
} 
catch(PDOException $e) 
{ 
    echo "Error: " . $e->getMessage(); 
} 

$conn = null; 
?>

我想知道我如何從我的迴應得到具體的值是什麼。

[{"Name":"iMac"},{"Name":"iPad 2"},{"Name":"iPhone 5"},{"Name":"iPhone 6"},{"Name":"iPod Touch"},{"Name":"iWatch"}]

對於我的搜索工作有效，我需要它只顯示產品名稱的字符串，而不是整個對象。

來源

2015-01-08 Adam Piper

你不從JSON字符串中提取。你將字符串解碼爲一個本地結構（例如'JSON.parse'），那麼它就是一個普通的javascript數組/對象，你可以像訪問任何其他數組/對象一樣訪問任何你想要的東西。 –

這段代碼是*** BAD BAD BAD ***，您應該不要使用超時等待Ajax請求返回。它已經建立了機制來做到這一點！ – epascarello

'作爲字符串顯示在我的DOM中是什麼意思？當然，你想爲它生成html，通過在響應數組上循環來相對簡單 – charlietfl

使用延遲而不是ajax回調只是令人震驚地容易失敗。假設你的ajax調用需要超過100ms？它可以完全發生。同樣，如果你的服務器不錯而且速度很快，並且它在25分鐘內完成，爲什麼要等待100ms？

溝全局search對象，並且改變這一：

function ajaxSearch(){ 
    var str = escape(document.getElementById('searchBox').value); 
    search.open("GET", '../searchSuggest.php?search=' + str, true); 
    search.send(null); 
    delay(displaySuggestions); 
}

到

function ajaxSearch(){ 
    var str = escape(document.getElementById('searchBox').value); 
    var search = getXmlHttpRequestObject(); 
    if (search) { 
    search.onreadystatechange = function() { 
     if (search.readyState == 4 && search.status == 200) { 
      displaySuggestions(JSON.parse(search.responseText)); 
     } 
    }; 
    search.open("GET", '../searchSuggest.php?search=' + str, true); 
    search.send(null); 
    } 
}

然後displaySuggestions接收的數組：

function displaySuggestions(results) { 
    // Use standard array techniques on `results`, e.g., `results[0]` is the first, 
    // maybe loop while `index < results.length`, maybe use `results.forEach(...)`... 
}

或服用它˚F urther，讓我們添加的方便程度存在：

var failed = false; 
function getXmlHttpRequestObject(done, failed){ 
    var xhr; 

    if(window.XMLHttpRequest){ 
    xhr = new XMLHttpRequest(); 
    } 
    else if (window.ActiveXObject){ 
    xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else { 
    if (!failed) { 
     alert("Your browser does not support our dynamic search"); 
     failed = true; 
    } 
    return null; 
    } 

    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200 { 
     if (done) { 
      done(xhr); 
     } 
     } else { 
     if (failed) { 
      failed(xhr); 
     } 
     } 
    } 
    }; 

    return xhr; 
}

然後：

function ajaxSearch(){ 
    var str = escape(document.getElementById('searchBox').value); 
    var search = getXmlHttpRequestObject(function(xhr) { 
    displaySuggestions(JSON.parse(xhr.responseText)); 
    }); 
    if (search) { 
    search.open("GET", '../searchSuggest.php?search=' + str, true); 
    search.send(null); 
    } 
}

來源

2015-01-08 18:23:16

如何從json編碼數組中獲取特定值？

回答

相關問題