CODEWITHSUNDEEP
jquery
user1907343
user1907343

Reputation: 73

sending a GET request in Jquery

I have the following piece of code

$("#autocomplete").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
    close: function (event, ui) {
        alert($(this).val());
    }
});



<label for="autocomplete">Select a programming language:</label>
<input id="autocomplete">

how do I send the values I get as a GET function ? I read the Ajax GET function but I am not sure how to encode the data I get from the form element

Upvotes: 2

Views: 72

Answers (4)

Nono
Nono

Reputation: 7302

jQuery $.ajax default contentType is application/x-www-form-urlencoded which mean jQuery will encode the content. However, since you have specify different contentType, the data is not encoded thus you have to do your own encoding. (Jquery ajax encoding data)

Try encodeURIComponent. (URL Encode a string in jQuery for an AJAX request)

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

Example:

var encoded = encodeURIComponent(str);

Complete Solution:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"/>
<script>
  $(document).ready(function() {
    $("#autocomplete").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
    close: function (event, ui) {
        $.ajax({
            url: 'yourAjaxRequestHandleFile.php',
            data: 'q=' + encodeURIComponent($('#autocomplete').val()),
            type: 'get',
            success: function (ajxResponse) {
                alert(ajxResponse);
            }
        });
    }
});
  });
  </script>
</head>
<body>
<label for="autocomplete">Select a programming language:</label>
<input id="autocomplete">
</body>
</html>

// Here is PHP Code

<?php 
// Get Send Ajax Data
$q = $_GET['q'];
// Show Ajax Data and return to Ajax
echo "You submitted $q ";
?>

Upvotes: 0

user166560
user166560

Reputation:

It depends on what the script you're sending it to expects, but $.get() accepts more than one format for the data. It can be a simple string or an object.

For example, if your script expects a programminglanguage variable in the request, your close handler might look like this

$("#autocomplete").autocomplete({
    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
    close: function (event, ui) {
        var jqxhr = $.get("/my/script.php", "programminglanguage=" + $(this).val());
        // Alternatively:
        //var jqxhr = $(.get("/my/script.php", {"programminglanguage": $(this).val()});
    }
});

The $.get() function has a success handler argument that you might want to use and the properties of the jqxhr object that's returned is documented on the jQuery.ajax() page here.

Upvotes: 0

Netorica
Netorica

Reputation: 19327

you can use Serialize

it will encode a set of form elements as a string for submission.

http://api.jquery.com/serialize/

and this how you can make it

<form id="myform">
    <label for="autocomplete">Select a programming language:</label>
    <input id="autocomplete" name="autocomplete">
    <input type="button" id="btnSubmit" value="send">
</form>

<script>
$(document).ready(function(){

    $("btnSubmit").click(function(){
         $.ajax({'url':'myurlforajaxrequest',
                 'data': $("#myform").serialize(),
                 'type':'get'
               });
    });

});
</script>

Upvotes: 1

Rishabh
Rishabh

Reputation: 2021

This is the documentation to $.get. The data you pass to it can either be a JS object or a string. The string is basically encoded key=val representation of the form elements. Use the serialize method on the jquery form element to get such a string. Hope that helps!

Upvotes: 0

Related Questions