Ajax請求的原型JS框架

我如何在我的項目上實現Prototype JS框架。我有這個簡單的表單，它將通過用戶的郵政編碼輸入取代城市和州。我需要使用Ajax Prototype調用進行這項工作，但我沒有得到結果。這是我的js和PHP和HTML代碼：Ajax請求的原型JS框架

<!DOCTYPE html> 
 
<!-- popcornA.html 
 
    This describes popcorn sales form page which uses 
 
    Ajax and the zip code to fill in the city and state 
 
    of the customer's address 
 
    --> 
 
<html lang = "en"> 
 
    <head> <title> Popcorn Sales Form (Ajax) </title> 
 
    <style type = "text/css"> 
 
     img {position: absolute; left: 400px; top: 50px;} 
 
    </style> 
 
     
 
    <script type = "text/JavaScript" src = "prototype.js" src = "popcornA.js"></script> 
 
    <script type = "text/JavaScript" src = "popcornA.js"></script> 
 
     
 
    <meta charset = "utf-8" /> 
 
    </head> 
 
    <body> 
 
    <h2> Welcome to Millenium Gynmastics Booster Club Popcorn 
 
     Sales 
 
    </h2> 
 

 
    <form action = ""> 
 

 
<!-- A borderless table of text widgets for name and address --> 
 

 
     <table> 
 
     <tr> 
 
      <td> Buyer's Name: </td> 
 
      <td> <input type = "text" name = "name" 
 
         size = "30" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> Street Address: </td> 
 
      <td> <input type = "text" name = "street" 
 
         size = "30" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> Zip code: </td> 
 
      <td> <input type = "text" name = "zip" 
 
         size = "10" 
 
         onblur = "getPlace(this.value)" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> City </td> 
 
      <td> <input type = "text" name = "city" 
 
         id = "city" size = "30" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> State </td> 
 
      <td> <input type = "text" name = "state" 
 
         id = "state" size = "30" /> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    
 
     <img src = "popcorn.png" 
 
      alt = "picture of popcorn" 
 
      width = "150" height = "150" /> 
 
     <p /> 
 
     
 
<!-- The submit and reset buttons --> 
 

 
     <p> 
 
     <input type = "submit" value = "Submit Order" /> 
 
     <input type = "reset" value = "Clear Order Form" /> 
 
     </p> 
 
    </form> 
 
    </body> 
 
</html>

new Ajax.Request("getCityState.php", { 
 
    method: "get", 
 
    parameters: "zip=" + zip, 
 
    onSuccess: function(request) { 
 
     var place = request.responseText.split(', '); 
 
     $("city").value = place[0]; 
 
     $("state").value = place[1]; 
 
    }, 
 
    onFailure: function(request) { 
 
     alert("Error - request failed"); 
 
    } 
 
});

<?php 
 
// getCityState.php 
 
// Gets the form value from the "zip" widget, looks up the 
 
// city and state for that zip code, and prints it for the 
 
// form 
 
     
 
    $cityState = array("81611" => "Aspen, Colorado", 
 
        "81411" => "Bedrock, Colorado", 
 
        "80908" => "Black Forest, Colorado", 
 
        "80301" => "Boulder, Colorado", 
 
        "81127" => "Chimney Rock, Colorado", 
 
        "80901" => "Colorado Springs, Colorado", 
 
        "81223" => "Cotopaxi, Colorado", 
 
        "80201" => "Denver, Colorado",      
 
        "81657" => "Vail, Colorado", 
 
        "80435" => "Keystone, Colorado", 
 
        "80536" => "Virginia Dale, Colorado" 
 
        ); 
 
    $zip = $_GET["zip"]; 
 
    if (array_key_exists($zip, $cityState)) 
 
    print $cityState[$zip]; 
 
    else 
 
    print " , "; 
 
?>

來源

2016-03-28 SQATube

我得到「未捕獲的參考E rror：zip未定義「線上的錯誤popcornA.js：37 – SQATube

首先parameters需要是這樣的對象。

parameters : {'zip': zip }

或者您可以快捷方式並將該參數放在URL字符串中，但讓我們關注您將要遇到的其他問題。

您應該使用觀察者而不是onblur屬性。它允許你添加儘可能多的事件處理程序到你的元素，因爲瀏覽器有內存可以處理。它還可以讓你從HTML中分離出JavaScript並將觀察者組織在一起。

$()方法使用ids而不是名稱，所以您需要添加這些屬性。這就是爲什麼你得到zip未定義的其他錯誤。

所以

...snip... 
<tr> 
     <td> Zip code: </td> 
     <td> <input type="text" name="zip" id="zip" size="10" /> 
     </td> 
</tr> 
<tr> 
     <td> City </td> 
     <td> <input type = "text" name = "city" id="city" 
        id = "city" size = "30" /> 
     </td> 
</tr> 
<tr> 
     <td> State </td> 
     <td> <input type = "text" name = "state" id="state" 
        id = "state" size = "30" /> 
     </td> 
</tr> 
...snip...

，我會用的，而不是做逗號分割爲JSON它容易當你需要添加它們，並不太容易怪異的分裂錯誤

function getPlace(){ 

    //getPlace() is an event handler so `this` points to the element being observed 

    new Ajax.Request("getCityState.php?zip="+this.getValue(), 
     onSuccess: function(request) { 
      var place = request.responseJSON; 
      $("city").value = place.city; 
      $("state").value = place.state; 
     }, 
     onFailure: function(request) { 
      alert("Error - request failed"); 
     } 
} 

document.observe('dom:loaded',function(){ 
    $('zip').observe('blur',getPlace); 
});

來處理更多的屬性JSON輸出需要稍微調整後端腳本

<?php 
// getCityState.php 
// Gets the form value from the "zip" widget, looks up the 
// city and state for that zip code, and prints it for the 
// form 

$cityState = array("81611" => array("city" => "Aspen" ,"state" => "Colorado"), 
       "81411" => array("city" => "Bedrock" ,"state" => ", Colorado"), 
       "80908" => array("city" => "Black Forest","state" => "Colorado"), 
       "80301" => array("city" => "Boulder", "state" => "Colorado"), 
       "81127" => array("city" => "Chimney Rock", "state" => "Colorado"), 
       "80901" => array("city" => "Colorado Springs", "state" => "Colorado"), 
       "81223" => array("city" => "Cotopaxi", "state" => "Colorado"), 
       "80201" => array("city" => "Denver", "state" => "Colorado"),      
       "81657" => array("city" => "Vail", "state" => "Colorado"), 
       "80435" => array("city" => "Keystone", "state" => "Colorado"), 
       "80536" => array("city" => "Virginia Dale", "state" => "Colorado") 
       ); 
header("Content-type: application/json"); 
//isset() is a faster test than array_key_exists() 
if(isset($cityState[$_GET['zip']]) 
{ 
    print json_encode($cityState[$_GET['zip']]); 
} 
else 
{ 
    print "false"; 
}

來源

2016-03-28 16:55:07

Ajax請求的原型JS框架

回答

相關問題