如何從PHP文件響應，使用Ajax的陣列？

Question

我試圖通過按在HTML表單中的搜索框中輸入郵政編碼一個按鈕來獲得一個完整的地址，我有兩個文件的第一個具有AJAX功能，第二個有PHP代碼。我不確定我的ajax代碼是否向PHP發送請求，任何人都可以幫助我嗎？

這裏是AJAX文件：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.addressbutton').click(function(){ 
    ss= document.getElementById("address").value; 
    alert(ss); 
    $.ajax({ 
     url: 'findaddress.php', 
     type: 'post', 
     data: ss, 
     success: function(response){ 
     var replay = response.postal_code; 
     alert(replay); 
     document.getElementById('address').innerHTML = response.postal_code; 
     document.getElementById('address2').innerHTML = response.route; 
     document.getElementById('address3').innerHTML = response.locality; 
     document.getElementById('address4').innerHTML = response.postal_town; 
     document.getElementById('address5').innerHTML = response.administrative_area_level_2; 
     } 
    }); 
    return false; 
    }); 
}); 
</script> 

這裏是PHP代碼（findaddress.php）

<?php 
header('Content-Type: application/json'); 
$ss=$_POST['address']; 
$postcode = urlencode($ss); 
$url = 'http://maps.googleapis.com/maps/api/geocode/xml? 
address='.$postcode.'&sensor=false'; 
$parsedXML = simplexml_load_file($url); 

if($parsedXML->status != "OK") { 
    echo "There has been a problem: " . $parsedXML->status; 
} 

$myAddress = array(); 
foreach($parsedXML->result->address_component as $component) { 
    if (is_array($component->type)) { 
    $type = (string)$component->type[0]; 
    } else { 
    $type = (string)$component->type; 
    } 

    $myAddress[$type] = (string)$component->long_name; 
} 
$f1 = $myAddress['postal_code']; 
$f2 = $myAddress['route']; 
$f3 = $myAddress['locality'] ; 
$f4 = $myAddress['postal_town'] ; 
$f5 = $myAddress['administrative_area_level_2'] ; 
$f6 = $myAddress['country']; 

//print_r($myAddress); 
$ORegisertation = array(
    'postal_code' => $f1, 
    'route' => $f2, 
    'locality' => $f3, 
    'postal_town' => $f4, 
    'administrative_area_level_2' => $f5, 
    'country' => $f6 
); 
$account_json = json_encode($ORegisertation); 
echo $account_json; 
?> 

Answer 1

HTML

<form name="frmRegistration" id="signup-form" method="post"> 
    <div> 
     <input type="text" name="address" id="address" class="findaddress" placeholder="Postal code"/> 
     <input type="button" name="addressbutton" class="addressbutton" value="Find" id="findaddress" /> 
     <input type="text" name="address2" id="address2" class="findaddress" placeholder="Line 1"/> 
     <input type="text" name="address3" id="address3" class="findaddress" placeholder="Line 2"/> 
     <input type="text" name="address4" id="address4" class="findaddress" placeholder="Line 3"/> 
     <input type="text" name="address5" id="address5" class="findaddress" placeholder="Line 4"/> 
    </div> 
</form> 

的Javascript

$(document).ready(function(){ 
    $('.addressbutton').click(function(){ 
     ss = document.getElementById("address").value; 
     $.ajax({ 
      url: 'findaddress.php', 
      type: 'post', 
      data: {address:ss}, //added an index address here 
      success: function(response){ 
       var replay = response.postal_code; 
       //innerHTML is not an attribute of text boxes, so changed it to value 
       document.getElementById('address').value = response.postal_code; 
       document.getElementById('address2').value = response.route; 
       document.getElementById('address3').value = response.locality; 
       document.getElementById('address4').value = response.postal_town; 
       document.getElementById('address5').value = response.administrative_area_level_2; 
      }, 
      error: function(response) { 
       alert("Error: "+response); 
      } 
     }); 
     return false; 
    }); //added closing brace and bracket 
}); 

約所做的更改腳本添加註釋。

PHP文件（findaddress.php）

<?php 
header('Content-Type: application/json'); 
$ss   = $_POST['address']; 
$postcode = urlencode($ss); 
$url  = 'http://maps.googleapis.com/maps/api/geocode/xml?address='.$postcode.'&sensor=false'; 
$parsedXML = simplexml_load_file($url); 

if($parsedXML->status != "OK") { 
    echo "There has been a problem: " . $parsedXML->status; 
} 

$myAddress = array(); 
foreach($parsedXML->result->address_component as $component) { 
    if(is_array($component->type)) $type = (string)$component->type[0]; 
    else $type = (string)$component->type; 
    $myAddress[$type] = (string)$component->long_name; 
} 

echo json_encode($myAddress); 
die(); 
?> 

取出再不相干的索引和不相關的報表。

Answer 2

您沒有正確發送數據.. 如果你想在PHP中地址的值，它是從阿賈克斯後做

data: { address: ss}, // ，要麼在你的Ajax添加dataType:'json'有或使用jsonParse(response)

你在你的響應得到一個字符串那裏，你不能直接使用response.postal_code;

Answer 3

沒有與HTML表單的Ajax代碼只是爲了有一個BETT呃想法

<form name="frmRegistration" id="signup-form" method="post"> 

    <div><input type="text" name="address" id="address" class="findaddress" placeholder="Postal code"/> 
     <input type="button" name="addressbutton" class="addressbutton" value="Find" id="findaddress" onclick="javascript:hello()"/> 
     <input type="text" name="address2" id="address2" class="findaddress" placeholder="Line 1"/> 
     <input type="text" name="address3" id="address3" class="findaddress" placeholder="Line 2"/> 
     <input type="text" name="address4" id="address4" class="findaddress" placeholder="Line 3"/> 
     <input type="text" name="address5" id="address5" class="findaddress" placeholder="Line 4"/> 
    </div> 


    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $('.addressbutton').click(function(){ 
      ss = document.getElementById("address").value; 
      //alert(ss); 
      $.ajax({ 
       url: 'findaddress.php', 
       type: 'post', 
       data: {address:ss}, 
       success: function(response){ 
        var replay = response.postal_code; 
        alert(replay); 
        document.getElementById('address').innerHTML = response.postal_code; 
        document.getElementById('address2').innerHTML = response.route; 
        document.getElementById('address3').innerHTML = response.locality; 
        document.getElementById('address4').innerHTML = response.postal_town; 
        document.getElementById('address5').innerHTML = response.administrative_area_level_2; 
       } 
      }); 
      return false; 
     }); //added closing brace and bracket 
    }); 
    </script> 
</form> 

Answer 4

在這種情況下，你想確保定義來自服務器的響應類型。我喜歡在我的$ .ajax調用中放置dataType：'json'。然後在你的PHP代碼中，確保添加一個類型爲application/json的頭文件。這會對一些瀏覽器產生影響。我喜歡使用Google Chrome閱讀Response Preview。它會自動解析響應;特別有助於調試。

header('Content-type: application/json'); 
echo json_encode($account_json); 
exit;