Doing a post request only in Front end

Question

$(function() {
      $("#showMovies").click(function() {
        $.ajax({
          method: "GET",
          url: "http://localhost:3000/movielist",
          dataType: "json",
          success: function(response) {
            $.each(response, function(i, movie) {
              const rowText = "<tr>" +
                "<td>" + movie.idmovielist + "</td>" +
                "<td>" + movie.name + "</td>" +
                "<td>" + movie.thumbnail_path + "</td>" +
                "<td>" + movie.description + "</td>" +
                "<td>" + movie.year_released + "</td>" +
                "<td>" + movie.language_released + "</td>" +
                "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
                "<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
              $("#movies").append(rowText);
            });
          }
        });
      });
      $("#movieAdded").click(function(a) {
        let mydata = {
          idmovielist: $($("#newForm")[0].intNum).val(),
          name: $($("#newForm")[0].name).val(),
          thumnail_path: $($("#newForm")[0].thumnail_path).val(),
          description: $($("#newForm")[0].description).val(),
          year_released: $($("#newForm")[0].year_released).val(),
          language_released: $($("#newForm")[0].language_released).val(),
        }
        displayMovie(mydata);
        $("#newForm").trigger("reset");
        $("#newForm").toggle();
        a.preventDefault();
      });

      function displayMovie(data) {
        $.ajax({
          method: "POST",
          url: "http://localhost:3000/movielist/addMovie",
          dataType: "json",
          data: data,
          success: function(data) {
            console.log(data);
          }
        });
      }
      $.ajax({
        method: "DELETE",
        url: "http://localhost:3000/movielist/5",
        dataType: "json",
        success: function(data) {
          $.each(data, function(i, movie) {
            const rowText = "<tr>" +
              "<td>" + movie.idmovielist + "</td>" +
              "<td>" + movie.name + "</td>" +
              "<td>" + movie.thumbnail_path + "</td>" +
              "<td>" + movie.description + "</td>" +
              "<td>" + movie.year_released + "</td>" +
              "<td>" + movie.language_released + "</td>" +
              "<td>" + "<button button id = \"deleteMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Delete</button>" + "</td>" +
              "<td>" + "<button button id = \"editMovie\" type=\"button\" class=\"btn btn-danger\" data-toggle=\"modal\" data-target=\"#exampleModal\">Edit</button>" + "</td>";
            $("#movies").append(rowText);
          });
        }
      });

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

table {
  background-color: lightblue;
}

tbody {
  font-family: inherit;
}

html {
  background-color: lightblue;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="mystyle.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  <script src="mycrud.js"></script>
</head>

<body>
  <title>My Movies</title>
  <header>
    <h1>Movies</h1>
    <button id="showMovies" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>All Movies</button>
  </header>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
        </div>

        <div class="modal-body">
          <form id="newForm">
            <div class="form-group row">
              <label for="idmovielist" class="col-sm-2 col-form-label">idmovielist</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="intNum" placeholder="idmovielist">
              </div>
            </div>
            <div class="form-group row">
              <label for="name" class="col-sm-2 col-form-label">name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="name" placeholder="name">
              </div>
            </div>
            <div class="form-group row">
              <label for="thumnail_path" class="col-sm-2 col-form-label">thumnail_path</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="thumnail_path" placeholder="thumnail_path">
              </div>
            </div>
            <div class="form-group row">
              <label for="description" class="col-sm-2 col-form-label">description</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="description" placeholder="description">
              </div>
            </div>
            <div class="form-group row">
              <label for="year_released" class="col-sm-2 col-form-label">year_released</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="year_released" placeholder="year_released">
              </div>
            </div>
            <div class="form-group row">
              <label for="language_released" class="col-sm-2 col-form-label">language_released</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="language_released" placeholder="language_released">
              </div>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>Add</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <button id="movieAdded" type="button" class="btn btn-primary" data-toggle="modal" data-target=#exampleModal>Add</button>
  <table class="table table-bordered table-hover" width="100%">
    <thead style="background-color:#ddd;" class="table-borderless">
      <tr>
        <th>idmovielist</th>
        <th>name</th>
        <th>thumnail_path</th>
        <th>description</th>
        <th>year_released</th>
        <th>language_released</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody id="movies">
    </tbody>
  </table>
  </header>
</body>

</html>

So above is my html css and java-script and also I have a screen shot of my UI I have did a post request back-end and I also executed it in the front end as well when I click the add button the modal form pops up on what things I want to add is there a way I could do a post request only on front end with out having to go back to back end and changing it every-time

app.post('/movielist/addMovie',(req, res) => {
   mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('64','DudeLove','wfburfr.jpg','silly','2019','english')",
   req.body,
   (err,rows) => {
     if (!err) {
       res.send("Movie is added");
     } else {
       console.log(err);
     }
  });
});

above is the code of my back end I did and is you see in the Ui the result is their but if I want to add more movies is there a way I could just add movies in the front end with out having to go back all the time to the back end to change it

What do you mean by `with out having to go back to back end and changing it every-time`? — Mike B, Apr 17 '19 at 14:16
@MikelisBaltruks Something like that but when I have to do a post request I do not want to keep going back to my app.js and changing my values I just want to do that in the front end only you understand what I am saying — Adil Ali, Apr 17 '19 at 14:17
Eddie, you did great in including the source code and images into your question; however, it is a little hard to understand. I would advice to clean up the text in your question. You should have a section explaining the objective, then a section explaining the issues you are having and finally a section explaining what are you expecting to happen. — acarlstein, Apr 17 '19 at 14:18
@MikelisBaltruks app.post('/movielist/addMovie',(req, res) => { mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('64','DudeLove','wfburfr.jpg','silly','2019','english')", req.body, (err,rows) => { if (!err) { res.send("Movie is added"); } else { console.log(err); } }); }); this is code of my back end you see the insert statement what if I want to add more movies in my front end I do not want to change this everytime — Adil Ali, Apr 17 '19 at 14:22

score 0 · Answer 1 · answered Apr 17 '19 at 14:24

0

mysqlConnection.query("INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES ('64','DudeLove','wfburfr.jpg','silly','2019','english')",

You've hard-coded the values to be inserted into your query.

Don't do that. Read the values from the POST request.

answered Apr 17 '19 at 14:24

Quentin

914,110
126
1,211
1,335

so how can I change my backend then – Adil Ali Apr 17 '19 at 14:29
I refer you back to the last sentence of this answer … and the question dealing specifically with reading data from the POST request. – Quentin Apr 17 '19 at 14:30
sql.query("INSERT INTO tasks set ?", newTask, function (err, res) { if(err) { console.log("error: ", err); result(err, null); } else{ console.log(res.insertId); result(null, res.insertId); } could something like this work – Adil Ali Apr 17 '19 at 14:35
app.post('/somepath', function(req, res) { console.log(JSON.stringify(req.body)); console.log('req.body.name', req.body['name']); }); this one like this – Adil Ali Apr 17 '19 at 14:37
SO get rid of the insert statement completly my server is connected to a mysql database – Adil Ali Apr 17 '19 at 15:00

score 0 · Accepted Answer · answered Apr 17 '19 at 15:01

0

As You are using POST method, you have to pass the params in the POST's body and read them on the serverside.
Your clientside is correct - you pass data to the server.

$.ajax({
   method: "POST",
   url: "http://localhost:3000/movielist/addMovie",
   dataType: "json",
   data: data,
   success: function(data) {
      console.log(data);
   }
});

On the serverside you read POST body data elements using req.body.PARAMNAME;
As You've passed them as JSON, they will be parsed already.
So now you just put those values into the query dynamically:

"INSERT INTO movielist (`idmovielist`,`name`) VALUES ('"+req.body.idmovielist+"', '"+req.body.name+"')",

OF COURSE you should escape the strings for SQL injections first. And ID probably shouldn't be passed, but auto-incremented in the database.

answered Apr 17 '19 at 15:01

Mike B

2,756
2
16
28

I won't get an sql error if I run this in my front end – Adil Ali Apr 17 '19 at 15:12
@AdilAli - I didn't say error. Learn about SQL injections. You can watch this - https://www.youtube.com/watch?v=ciNHn38EyRc – Mike B Apr 17 '19 at 20:31
Baltrucks Also if I want to exectute a put and delete to exectute in the front end what can I change in my code – Adil Ali Apr 18 '19 at 16:49
@AdilAli - that should be a new post, but in short - just make different requests to the serverside and on the serverside execute update/delete queries accordingly – Mike B Apr 18 '19 at 16:54
Baltrucks 'Incorrect integer value: \'undefined\' for column \'idmovielist\' at row 1', INSERT INTO movielist (`idmovielist`,`name`,`thumnail_path`,`description`,`language_released`,`year_released`) VALUES (\'undefined\', \'undefined\',\'undefined\', \'undefined\', \'undefined\', \'undefined\')' } – Adil Ali Apr 25 '19 at 12:04
@AdilAli - then variables that you are adding to the query are empty. Debug what you are receiving to the serverside. As you can see - all the variables are undefined. – Mike B Apr 26 '19 at 07:46

Doing a post request only in Front end

2 Answers2