Can't create ajax request in Laravel

Question

I am studying Laravel now and I am creating an Ajax Registration form. But it can't access the URL in my ajax process. I have an error like this:

XMLHttpRequest cannot load file:///C:/wampwwwlaravelblogpublic. Cross origin requests are only supported for HTTP. jquery-1.10.2.js:8706

Here's my sample codes:

Controller

public function index()
{   

    /*Login*/
    $title = Lang::get('login.panel_title');
    $username = Lang::get('login.username');
    $password = Lang::get('login.password');

    /*Registration*/
    $reg_username = Lang::get('register.username');
    $reg_lastname = Lang::get('register.lastname');
    $reg_firstname = Lang::get('register.firstname');
    $reg_gender = Lang::get('register.gender');
    $reg_email = Lang::get('register.email');
    $reg_birthday = Lang::get('register.birthday');

    $reg_month = Lang::get('register.months');
    $reg_password = Lang::get('register.password');
    $reg_conf_password = Lang::get('register.conf_password');

    $reg_path = public_path();

    return View::make('login', 
        array(
            'title'         => $title, 
            'username'      => $username,
            'password'      => $password,
            'reg_username'  => $reg_username,
            'reg_lastname'  => $reg_lastname,
            'reg_firstname' => $reg_firstname,
            'reg_gender'    => $reg_gender,
            'reg_email'     => $reg_email,
            'reg_birthday'  => $reg_birthday,
            'reg_month'     => $reg_month,
            'reg_password'  => $reg_password,
            'reg_conf_password' => $reg_conf_password,
            'reg_path'      => $reg_path
        )
    );

}

VIEW

<script type="text/javascript">

    $(document).ready(function() {

        $('#register-user').on('click', function(){

            console.log('clicked');

            var url_link = '{{ $reg_path }}';

            var $reg_username = $('input[name=reg_username]').val();
            var $reg_lastname = $('input[name=reg_lastname]').val();
            var $reg_firstname = $('input[name=reg_firstname]').val();
            var $reg_email = $('input[name=reg_email]').val();
            var $reg_gender = $('input[name=reg_gender]').val();
            var $reg_year = $('input[name=reg_year]').val();
            var $reg_month = $('input[name=reg_month]').val();
            var $reg_day = $('input[name=reg_day]').val();
            var $reg_password = $('input[name=reg_password]').val();
            //var $reg_conf_password = $('input[name=reg_conf_password]').val();

            /*
            if($reg_username == '') {
                $('.test').modal('show');
            }
            */

            $.ajax({
                url: url_link,
                data: {
                    username: $reg_username, 
                    lastname: $reg_lastname, 
                    firstname: $reg_firstname, 
                    email: $reg_email, 
                    gender: $reg_gender, 
                    year: $reg_year, 
                    month: $reg_month, 
                    day: $reg_day, 
                    password: $reg_password
                },
                type: 'post',
                dataType: 'json',
                beforeSend: function() {

                },
                success: function(data) {
                    console.log(data);
                },
                error: function() {

                }
            });

        });

    });

</script>

What I noticed in the error is this part C:/wampwwwlaravelblogpublic it removes the '/' slash in the path. Is this normal?

Or are there any proper way to do simple ajax process?

That's all guys thanks.

Answer 1

You don't want to use the public_path() as your URL. That's the path on your filesystem! Chances are you just want to point it at the index. So instead of {{ $reg_path }}, put in {{ URL::to('/') }}.

Cheers!

<script type="text/javascript">

$(document).ready(function() {

    $('#register-user').on('click', function(){

        console.log('clicked');

        var url_link = '{{ URL::to('/') }}';

        var $reg_username = $('input[name=reg_username]').val();
        var $reg_lastname = $('input[name=reg_lastname]').val();
        var $reg_firstname = $('input[name=reg_firstname]').val();
        var $reg_email = $('input[name=reg_email]').val();
        var $reg_gender = $('input[name=reg_gender]').val();
        var $reg_year = $('input[name=reg_year]').val();
        var $reg_month = $('input[name=reg_month]').val();
        var $reg_day = $('input[name=reg_day]').val();
        var $reg_password = $('input[name=reg_password]').val();
        //var $reg_conf_password = $('input[name=reg_conf_password]').val();

        /*
        if($reg_username == '') {
            $('.test').modal('show');
        }
        */

        $.ajax({
            url: url_link,
            data: {
                username: $reg_username, 
                lastname: $reg_lastname, 
                firstname: $reg_firstname, 
                email: $reg_email, 
                gender: $reg_gender, 
                year: $reg_year, 
                month: $reg_month, 
                day: $reg_day, 
                password: $reg_password
            },
            type: 'post',
            dataType: 'json',
            beforeSend: function() {

            },
            success: function(data) {
                console.log(data);
            },
            error: function() {

            }
        });

    });

});