0

プロジェクトに 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 " , ";
?>

4

1 に答える 1

0

まず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";
}
于 2016-03-28T16:55:07.463 に答える