Question

如何在我的项目上实现Prototype JS框架。我有这个简单的形式，它将用用户的邮政编码输入取代城市和州。我需要使用Ajax Prototype调用这个工作，我没有得到结果。这是我的js和php和html代码：

<!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 " , ";
?>

Answer 1

首先parameters需要是这样的对象。

parameters : {'zip': zip }

或者您可以快捷方式并将参数放在URL字符串中，但我们可以关注您将要遇到的其他问题。

您应该使用观察者而不是onblur属性。它允许您为元素添加尽可能多的事件处理程序，因为浏览器需要处理内存。它还允许您将JavaScript与HTML分开并组织观察者。

$()方法使用id而不是名称，因此您需要添加这些属性。这就是您收到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";
}

用于Ajax请求的原型JS框架

1 个答案: