title: jQuery ajax from localhost:3000 api
body: <p>I made a restful API in a folder called (rest), it connects with port 3000 on my <code>localhost</code> at ..... <a href="http://localhost:3000/api/products" rel="nofollow">http://localhost:3000/api/products</a>.
  also i made a jQuery logging application in a folder called (logs) doing an Ajax call to retrieve data from the API, adding new users and so on..
  i run my app on browser-sync which runs on another port and so far i can't connect to API because i don't know what path URL shall i connect to.
   please can u help me in two things:</p>
  
  <ol>
  <li>where to place these two folders (rest) , (logs)?</li>
  <li>what URL for the API (running on port:3000)?</li>
  </ol>
  
  <p><strong>my jquery app code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!--------------------------- Meta tags --------------------&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Logs&lt;/title&gt;
  
  
  
      &lt;!-- jQuery --&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- jQuery UI --&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
      &lt;!-- Optional theme --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"&gt;
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- Jquery css ui --&gt;
      &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.2/themes/smoothness/jquery-ui.css"&gt;
      &lt;!-- My stile link --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;table class="table table-striped"&gt;
                  &lt;thead&gt;
                  &lt;tr&gt; &lt;th&gt;ID&lt;/th&gt; &lt;th&gt;First name&lt;/th&gt; &lt;th&gt;Last name&lt;/th&gt; &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody class="user"&gt;
  
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-3"&gt;
              &lt;button class="btn btn-success getUsers"&gt; Get Users &lt;/button&gt;
              &lt;form class= "form-inline"&gt;
                  &lt;input id="id" class="form-group" placeholder="ID"&gt;
                  &lt;input id="firstName" class="form-group" placeholder="First name"&gt;
                  &lt;input id="lastName" class="form-group" placeholder="Last name"&gt;
                  &lt;button class="btn btn-success addUsers"&gt; Add a user&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt;
          var $user = $('.user');
          var $id = $('#id');
          var $firstName = $('#firstName');
          var $lastName = $('#lastName');
          ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
          $('.getUsers').click(function(){
              $.ajax({
                  type:"GET",
                  url: '/api/products',
                  dataType: 'json',
                  success: function(users){
                      $.each(users, function(i, user){
                          $user.append('&lt;tr&gt;&lt;td&gt;'+ user.id +'&lt;/td&gt; &lt;td&gt;'+ user.firstName +'&lt;/td&gt; &lt;td&gt;' +user.lastName + '&lt;/td&gt;&lt;/tr&gt;');
                      });
                  },
                  error: function(){
                      alert('error');
                  }
              });
          });
          //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
          $('.addUsers').click(function(){
              var $newUser = {
                  id: $id.val(),
                  firstName: $firstName.val(),
                  lastName: $lastName.val()
              };
              $.ajax({
                  type:"POST",
                  url: '/api/products',
                  dataType: 'json',
                  data: $newUser,
                  success: function(newUser){
                          $user.append('&lt;tr&gt;&lt;td&gt;'+ newUser.id +'&lt;/td&gt; &lt;td&gt;'+ newUser.firstName +'&lt;/td&gt; &lt;td&gt;' +newUser.lastName + '&lt;/td&gt;&lt;/tr&gt;');
                  },
                  error: function(){
                      console.log('error');
                  }
              });
          });
          ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>my api code:</p>
  
  <p>/*************** server.js ************************/</p>
  
  <pre><code>    // DEPENDENCIES
  var express = require('express');
  var mongoose = require('mongoose');
  var bodyParser = require('body-parser');
  
  // MongoDB
  mongoose.connect('mongodb://localhost/testdb');
  
  // EXPRESS
  var app = express();
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(bodyParser.json());  
  
  // ROUTES
  app.use('/api', require('./routes/api')); 
  
  // START SERVER
  app.listen(3000);
  console.log('API is working on port 3000,yes');
  </code></pre>
  
  <p>/**************** api.js *****************************/</p>
  
  <pre><code>// DEPENDENCIES
  var express = require('express');
  var router = express.Router();
  
  // MODELS
  var Product = require('../models/product');
  
  // ROUTES
  Product.methods(['get', 'put', 'post', 'delete']);
  Product.register(router, '/products');
  
  // RETURN ROUTER
  module.exports = router;
  </code></pre>
  
  <p>/************* product.js ******************/</p>
  
  <pre><code>// DEPENDENCIES
  var restful = require('node-restful');
  var mongoose = restful.mongoose;
  
  // SCHEMA
  var productSchema = new mongoose.Schema({
      id: Number,
      firstName: String,
      lastName: String,
      mark: Number
  });
  
  // return model
  module.exports = restful.model('Products', productSchema);
  </code></pre>
  
  <p>note: i`m too new to backend.</p>
  
  <p>Thank you in advance.</p>