'Jquery ajax get request

I am new to jquery and php, I have two input fields, zip and city, the city shall output a value based from the zip that the user input. The jquery script shall call a URL: http://domain.com/city?zip.php="zip; so that zip.php will return an echo value that will output to the city input field.

I tried using ajax getXMLHTTP. some times it works but sometimes not

Please Refer to the following code snippet below:

 <input type="text" id="zip_code" name="zip_code" /> 

 <input type="text" id="city" name="city" />

 <script type="text/javascript">

 // Some Jquery code here for ajax get request to http://domain.com/city?zip.php

 </script>
phpjqueryajax


Solution 1:[1]

Use jQuery.get, documented here. In the success handler, use the data argument to populate the city input.

Sample:

$.get('http://domain.com/city.php?zip='+$('#IdOfZipInput').val(), function (data){
    $('#IdOfCityInput').val(data);
});

Solution 2:[2]

if you are using jquery the use $.ajax option instead of getXMLHTTP

function passzipvalue(zip)
$.ajax({
                type: "GET",
                url : 'http://domain.com/city.php='
                data:"zip="+zip,
                success: function(msg){
                    $("#formsData").html(msg);

                }
            });
}

something like this or

$.get('http://domain.com/city.php?zip='+zip,function (msg){
    $('#formsData').html(msg);
});

if you want to populate it in some input fields use .val instead of .html

Solution 3:[3]

Use jQuery AJAX. For example:

var zip = $('#zip').val();
$.get('http://domain.com/city.php?zip='+zip,function (data){
    $('#city').val(data);
});

Solution 4:[4]

$.ajax({
  url: 'http://domain.com/city.php?zip='+zip,
  type: get,
  success: function(data){
    $("div").html(data);
  }
});

use this data will be displayed

Solution 5:[5]

If its a constantly updating element then use jquery.post as ie caches the "get" results.

jQuery.post('call.php',{ action: "get"}, function (data) {

        jQuery('#content').append(data);

    });

FInd the tutorial here http://vavumi.com/?p=257

Solution 6:[6]

try to use the jquery ajax 

$.ajax({
       type: "POST",
       url: 'sample/test.php',//your url
       data: data,//data to be post
       cache: false,
       success: function(html) { 
         alert(html);//response from the server
  }

      });

Solution 7:[7]

            $.ajax({
                url: 'url',
                beforeSend: function (xhr) {
                    //show loading
                }
            }).done(function (data, xhr) {
                //hide loading
                
                //success

            }).fail(function (xhr) {
                //hide loading

                //error

            });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 C?lin Darie
Solution 2
Solution 3 Timur
Solution 4
Solution 5 Lee Mark Smith
Solution 6 Poonam
Solution 7 Diako Hasani

Related Questions