Ajax front-end user registration form - not returning JSON

Question

I have a user registration form on the front-end of a site that is working well as a standard form, but when I try to use ajax submission, I'm getting an HTML response rather than JSON.

Here's the javascript I'm using

$('#register-form').submit(function(ev) {
    ev.preventDefault();

    var data = $(this).serialize();

    $.post('/', data, function(response) {

        console.log(response);

        if (response.success) {
            alert("success")
        } else {
            alert(response.error);
        }
    });
});

And this is my form code:

<form method="post" action="" id="register-form" accept-charset="UTF-8">
{{ getCsrfInput() }}
<input type="hidden" name="action" value="users/saveUser">

<h3>Create An Account</h3>
<p>By creating an account, you will be able to save your application progress. This is an optional step.</p>

<div class="row">
    <label for="email" class="col-sm-3 control-label">Email</label>
    <input type="text" class="form-control" id="email" name="email" {%- if account is defined %} value="{{ account.email }}"{% endif %}>
</div>

<div class="row">
    <div class="form-group col-6">
        <label for="password">Password</label>
        <input id="password" class="form-control" type="password" name="password">
    </div>

    <div class="form-group col-6">
        <label for="password2">Confirm Password</label>
        <input id="password2" class="form-control" type="password" name="password2">
    </div>
</div>

<div class="actions">
    <p><input type="submit" id="form-submit" value="Register" class="btn btn-grey"/></p>
</div>

<span class="center">Already have an account? <a href="#" id="sign-in-form-btn">Sign In</a></span>

The response var is returning the entire html page rather than JSON data.

Is there a way to trigger a JSON response for the registration form?

Note, I'm able to use similar code for a front-end login form and it's working well.

Answer 1

EDIT

Craft 2.4 is now available, and the users/saveUser action will now return a JSON response for AJAX requests.

The original answer is still valid for <2.4 builds:

No, there's no way to trigger a JSON response for the users/saveUser action.

Other UsersController actions (such as users/login do return JSON for AJAX requests, so it might be an idea to submit this as a feature request – as a consistency measure, if nothing else.

For now, here's a couple of ideas for workarounds:

1. Write a plugin with a controller that wraps the UsersController->actionSaveUser() method somehow, or implements its own action (you could basically just copy paste the whole actionSaveUser() from the core UsersController, changing it to return some JSON at the end).

2. You can set the redirect parameter (using a hidden input field in your form) to point to a template where you build the JSON yourself.

Form:

<form method="post" action="" id="register-form" accept-charset="UTF-8">
     <!-- Your form code -->
     <input type="hidden" name="redirect" value="{{ url( 'path/to/your/template/or/a/route' }}">
</form>

Template for the redirect (notice the JSON header):

{% header "Content-Type: application/json" %}
{
    "success" : {{ account is defined and account.id ? true : false }}
}