jquery functions (post/get, data from input form) not working

Question

post some data. get username and password from html form. we fixed the formatting on jsons in post request. now i'm getting a 404 Not found for post request. any ideas?

I'm using the localhost because im using a sinatra app.

I've included html, javascript, and main.rb

HTML:

<div class="form-bg" id="myForm">
    <form>
        <h2>Login</h2>
        <p><input type="text" id="username" placeholder="Username"></p>
        <p><input type="password" id="password" placeholder="Password"/><p>
        <label for="remember">
            <input type="checkbox" id="remember" value="remember" />
            <span>Remember me on this computer</span>
        </label>
        <button type="submit" id="submit"></button>
    <form>
</div>

Javascript:

$(document).ready(function() {

    /**
    * Post initial admin and a few users & groups
    */

    $.post("http://localhost:4567/main.rb", [
            {
            "name": "alex",
            "email": "alex@example.com",
            "password": "secret",
            "admin": true
            }, {
            "name": "alex",
            "email": "alex@example.com",
            "password": "password",
            "admin": false
            }, {
            "name": "bill",
            "email": "bill@example.com",
            "password": "password",
            "admin": false
            }
    ], function () {
        console.log("success");

});

$.post/("http://localhost:4567/main.rb", [
       {
            "name": "support",
            "members": ["admin"],
            "private": true
            }, {
            "name": "dev",
            "members": ["alex", "bill"],
            "private": false
            }
    ], function () {
        console.log("success");

});

    /**
    * Get username and password from the form
    */

    $("#myForm").submit(function() { // loginForm is submitted
        var username = $('#username').val(); // get username
        var password = $('#password').val(); // get password
        function showGetResult( username ) {
            var result = null;
            var scriptUrl = "http://localhost:4567/main.rb";
            $.ajax({
                url: scriptUrl,
                type: 'get/users.username',
                dataType: 'json',
                async: false,
                success: function(data) {
                    result = data;
                }
            });
            return result;
        }

        var user = showGetResult(username);
        function passwordCheck(user, password) {
            if (user.password === password){
                window.open = "http://localhost:4567/userprofile/userprofile.html";
            }
            else {
                document.getElementById("notice").style.display = "block";
                user = {};
            }
        }
        passwordCheck();
    })


    /**
    * Update DOM elements in userprofile.html with user information
    * DOM (groups, private groups, create new user, settings)
    * Groups is display only. Do a get, append data to dom
    * Private groups (ADMIN ONLY). Do a get, append data to dom
    * Create new user (ADMIN ONLY). Post request with info. (show notice "New user created")
    * Settings. Put request to update user info
    * (private groups editing feature - ADMIN ONLY)
    * (delete user option - ADMIN ONLY)
    */

})

main.rb:

    get '/users' do
  {users: USERS.keys}.to_json
end

get '/users/:name' do
  halt 404 unless user = USERS[params[:name]]
  user.to_json
end

post '/users' do
  user = JSON.parse(request.body.read)
  halt 400 unless %w{name email password admin}.all?{|s| user[s]}
  halt 409 if USERS[user['name']]
  USERS[user['name']] = user
  201
end

put '/users/:name' do
  halt 404 unless USERS[params[:name]]
  user = JSON.parse(request.body.read)
  halt 400 unless %w{name email password admin}.all?{|s| user[s]}
  halt 400 unless user['name'] == params[:name]
  USERS[params[:name]] = user
  200
end

Answer 1

It should be something like this:

$.post("http://localhost:4567/main.rb", [
    {
        "name": "admin",
            "email": "admin@example.com",
            "password": "secret",
            "admin": true
    }, {
        "name": "alex",
            "email": "alex@example.com",
            "password": "password",
            "admin": false
    }, {
        "name": "bill",
            "email": "bill@example.com",
            "password": "password",
            "admin": false
    }
], function () {
    console.log("success");

});

1. You need to put your multiple different objects in an annonymous array otherwise you are adding extra parameters.
2. The first parameter is your url, the second, your data, the third your success callback function.

Here is the general syntax:

$.post('url_here', { /* all your data in here */ }, function(){ 
  /* success here */ 
}).fail(function(){ 
  /* fail here */ 
});

UPDATE:

Your ruby launches 404 because you are accessing your data the wrong way. I don't know how to do it in ruby, since I don't know ruby so I'll give you the js equivalent.

To access the data you sent, you need to understand that you'll have to loop ( atleast in js ) through all the information.

For example, say you wanted to access some different names and all your information is in a variable called data

console.log(data[0].name); // this would output "admin"
console.log(data[1].name); // this would output "alex"
console.log(data[2].name); //this would output "bill"

And here is how you could loop through it all.

for(var i = 0; i < data.length; i++){
  console.log(data[i].name);
}

Let me know if this is helpful or not.