Question

I am trying to use MySQL, Perl and JS to make a simple registration form for my website. The Perl script works fine when given parameters directly via cmdline or via the URL and the MySQL properly registers the user. The issue is with the JS; when I sent the data via a JSON post the Perl script receives the post and attempts to create a hash of the parameters given via the code:

%params = $cgh->Vars()

However, this doesn’t properly split the parameters and assign them to individual keys. Instead, the Perl script creates a hash that looks like this:

%params data

$VAR1 = 'POSTDATA';
$VAR2 = 'action=register&uname=d&pass=d&first=d&last=d&email=[e-mail]&phone=d';

I suspect that the JS needs to change how it is submitting the data and not the way the Perl script is accepting the data. In any case, here is the JS:

$(document).ready(function(){
    $("form#register-form").submit(function() { // register-form is submitted
        var username = $('#username').attr('value'); // get username
        var password = $('#password').attr('value'); // get password
        var repassword = $('#repassword').attr('value'); // get password
        var firstName = $('#firstName').attr('value'); // get password
        var lastName = $('#lastName').attr('value'); // get password
        var email = $('#email').attr('value'); // get password
        var phone = $('#phone').attr('value'); // get password

        if (username && password && repassword && firstName && lastName && email && phone) { // values are not empty
            $.ajax({
                type: "POST",
                url: "/cgi/login.pl", // URL of the Perl script
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                // send username and password as parameters to the Perl script
                data: "action=register" + "&uname=" + username + "&pass=" + password + "&first=" + firstName + "&last=" + lastName
                    + "&email=" + email + "&phone=" + phone,
                // script call was *not* successful
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    $('div#register-result').text("responseText: " + XMLHttpRequest.responseText
                        + ", textStatus: " + textStatus
                        + ", errorThrown: " + errorThrown);
                    $('div#register-result').addClass("error");
                }, // error 
                // script call was successful 
                // data contains the JSON values returned by the Perl script 
                success: function(data){
                    if (data.error) { // script returned error
                        $('div#register-result').text("data.error: " + data.error);
                        $('div#register-result').addClass("error");
                        } // if
                    else { // login was successful
                        $('form#register-form').hide();
//                        $('div#register-result').text("data.success: " + data.success + ", data.userid: " + data.userid);
//                        $('div#register-result').addClass("success");
                    } //else
                } // success
            }); // ajax
        } // if
        else {
            $('div#register-result').text("enter username and password");
            $('div#register-result').addClass("error");
        } // else
//    $('div#register-result').fadeIn();
    return false;
    });
});

Unless relevant to the issue, please ignore the fact that I do next to no checks on the info submitted by the form. Let me know if you require any more information. Thank you in advanced.

Answer 1

You are not sending JSON to server so using contentType: "application/json; charset=utf-8", will over ride default 'application/x-www-form-urlencoded; charset=UTF-8'

Using the default, server script deals with the key/value pairs as it would for any other form submission