如何从json编码数组中获取特定值？

Question

这是我的JavaScript和我的PHP动态Ajax搜索。我试图从数据库中获取数据并将其作为字符串显示在我的DOM中。

的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"}] 

对于我的搜索工作有效，我需要它只显示产品名称的字符串，而不是整个对象。

Answer 1

使用延迟而不是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); 
    } 
}