Archive

Archive for the ‘jQuery’ Category

A mistake to avoid when calling jQuery.ajax

November 4, 2011 Leave a comment

I can’t think of a reason why jQuery.ajax accepts both object and query string as the valid format the data parameter, for example,

$.ajax( {
    url:'/someurl',
    type:'POST',
    data: { key1: val1, key2: val2 },
    // alternatively, the following format is also accepted
    // data: 'key1='+val1+'&key2='+val2,
    success: function() {
        alert(d);
    }
} );

In the above example, the query string format is also accepted but should be discouraged to use, reason of which will be demonstrated with the following example. We need to submit data in the text fields as is to the server. When query string format is used, data is passed to the server without being encoded properly, as you can see from the first screenshot. For demonstration purpose, password field uses “text” as its input type.

index.html

<html>
<head>
<title>Rico's Appbox Demos | A mistake to avoid when using jQuery.ajax() function</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
	function do_post( data ) {
		var io='Sent from client:\nusername: '+$('#username').val()+'\npassword='+$('#password').val();
		$.ajax( {
			url: '/demos/jpost',
			type:'POST',
			data: data,
			success: function(d) {
				io+='\n\nReceived by server:\n'+d
				alert(io);
			}
		});
		return false;
	}

        function post_qs() {
		do_post('username='+$('#username').val()+'&password='+$('#password').val());
	}

	function post_json() {
		do_post({
			username: $('#username').val(),
			password: $('#password').val()
		});
	}
</script>

</head>
<body>

<p>
	Username: <input id="username" type="text" value="This?is+ok">
</p>
<p>
	Password: <input id="password" type="text" value="asdf%20test">
</p>
<p>
	<a href="#" onclick="post_qs()">Post via query string format (BAD)</a><br />
	<a href="#" onclick="post_json()">Post via json format (GOOD)</a> 
</p>

</body>
</html>

Live demo is available at http://ricosappbox.appspot.com/demos/jpost.
The screenshots below are slightly different to the live demo result because they were created when I used php as the back-end to print the post data.

Screenshots:
When first link (using query string format) is clicked:

When the second link (using json format) is clicked:

Advertisements
Categories: javascript, jQuery

Passing array of checkbox values to php through jQuery (example)

August 2, 2011 7 comments

input.html

<!DOCTYPE html> 
<html> 
<head> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
                function doit() {
                        var p=[];
                        $('input.cb').each( function() {
                                if($(this).attr('checked')) {
                                        p.push($(this).attr('rel'));
                                }
                        } );
                        $.ajax( {
                                url:'/process.php',
                                type:'POST',
                                data: {list:p},
                                success: function(res) {
                                        alert(res);
                                }
                        });
                }
        </script>
</head>
<body>
        <input type="checkbox" class="cb" rel="1"></input>This is 1<br />
        <input type="checkbox" class="cb" rel="abc"></input>This is abc<br />
        <input type="checkbox" class="cb" rel="999"></input>This is 999<br />
        <a href="javascript:void(0)" onclick="doit()">Click</a>
</body>
</html>

process.php

<?php
        print_r(@$_POST['list']);

Test-run screenshot:

Live demo (Using google app engine therefore output is slightly different to the screenshot above. The relevant code that deals with the post request is as follow:

class Chkbox(webapp.RequestHandler):
    def get(self):
        ...

    def post(self):
        d=self.request.get_all( 'list[]' )
        self.response.out.write(d)

)

Categories: html, jQuery, php