ASP.NET Javascript Поиск почтового индекса для CIty и State с Mootools, jQuery или Ajax

Question

Я пытаюсь написать утилиту поиска Javascript Zip Code.

1) Пользователь выберет состояние из выпадающего списка.

2) Город утонет будет заполнен в зависимости от выбранного штата

3) Текстовое поле ниже заполнится соответствующими почтовыми индексами на основе выбранного штата и почтового индексана странице ASP.NET.

Проблема: я получаю сообщение об ошибке Запрос () не определен, что приводит к тому, что приложение выбирается при выборе состояния.

Что я должен изменить в следующем коде?

  <script language="javascript">
   var request = new Request();
   var url = "";

   function getZipCode()
   {    
request.GetNoCache(url + "getZipCode.aspx?City=" +document.getElementById("drpCity").options[document.getElementById("drpCity").selectedIndex].value+ "&State=" +document.getElementById("drpStateSearch").options[document.getElementById("drpStateSearch").selectedIndex].value,      
function(result)
{
    if (result.readyState!=ReadyState.Complete)
        return;             
    if (result.status==HttpStatus.OK && result.responseText != "")
    {
        var zip = result.responseText;
        document.getElementById("txtZip").value = zip;
    }
    else
    {
        document.getElementById("txtZip").value = "No Zip Found";
    }
}
)
  }



   function selectCity()
   {    
request.GetNoCache(url + "getCities.aspx?State=" +document.getElementById("drpStateSearch").options[document.getElementById("drpStateSearch").selectedIndex].value,         

function(result)
{

    if (result.readyState!=ReadyState.Complete)
        return;             
    if (result.status==HttpStatus.OK && result.responseText != "")
    {
        var cities = result.responseText;
        var city_array=cities.split(",");
        var len = document.getElementById("drpCity").options.length;

        for( var j=len; j>=0;j--)
        {
            document.getElementById("drpCity").options[j]=null;
        }

        var option_i = new Option("--Select--","--Select--");
        document.getElementById("drpCity").options[0] = option_i;

        for(var i=1; i<=city_array.length-1;i++)
        {
            var option_c = new Option(city_array[i-1],city_array[i-1]);
            document.getElementById("drpCity").options[i] = option_c;
        }
    }
    else
    {
        var option_c = new Option("No City","");
        document.getElementById("drpCity").options[0] = option_c;
    }
}
)
   }

            </script>
   <script language="javascript" type="text/javascript">
   <!--
function __doPostBack(eventTarget, eventArgument) {
    var theform;
    if (window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) {
        theform = document.Form2;
    }
    else {
        theform = document.forms["Form2"];
    }
    theform.__EVENTTARGET.value = eventTarget.split("$").join(":");
    theform.__EVENTARGUMENT.value = eventArgument;
    theform.submit();
}
   // -->
   </script>

            City: <select id="drpStateSearch" name="drpStateSearch" 
                onchange="Javascript:selectCity();" style="width: 120px;">
                <option value="">---Select---</option>
                <option value="AK">Alaska</option>
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="AZ">Arizona</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DC">District of Columbia</option>
                <option value="DE">Delaware</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="IA">Iowa</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="MA">Massachusetts</option>
                <option value="MD">Maryland</option>
                <option value="ME">Maine</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MO">Missouri</option>
                <option value="MS">Mississippi</option>
                <option value="MT">Montana</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="NE">Nebraska</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NV">Nevada</option>
                <option value="NY">New York</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VA">Virginia</option>
                <option value="VT">Vermont</option>
                <option value="WA">Washington</option>
                <option value="WI">Wisconsin</option>
                <option value="WV">West Virginia</option>
                <option value="WY">Wyoming</option>
            </select> <br />
            State: <select id="drpCity" name="drpCity" onchange="javascript:getZipCode()">
                <option selected="">Select State to Populate</option>
            </select>
            <br />
            <table id="Table6" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td height="28" width="38%">
                        Zipcode:</td>
                    <td height="28" width="62%">
                        <input id="txtZip" name="txtZip" type="text" /></td>

Спасибо!

Answer 1

Вы используете MooTools? Если это так, вы должны убедиться, что библиотека mootools загружена, прежде чем пытаться создать новый объект Request. Если нет, Request не является подходящим объектом для создания ajax-запроса.

if(window.XMLHttpRequest){
   request = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
   request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET", url, true);
request.onreadystatechange = callback;
request.send(null);
function callback()
{
   if(request.readyState == 4)
   {
       if(request.status == 200)
       {
             /* do your call back stuff here */
       }
    }
 }

Примечание - это действительно базовая и довольно трудная задача, и я бы предложил использовать библиотеку фреймворков, такую ​​как jQuery или Mootools, для выполнения ajax-вызовов кода вашего сервера.

/ ****** ОБНОВЛЕНИЕ ******************* / Вот код для базового Ajax-запроса Jquery:

$.ajax({ url: "test.html", 
         context: document.body, 
         data:{"info":"I'm sending this back to the server"}, 
         success: function(data){ 
              /* do your callback stuff here */ 
         },
         error(jqXHR, textStatus, errorThrown){
              /* let's you know where you went wrong */
         }
});

Значение API здесь .