How to put variables in post request in JS, Ajax?-CodePudding

One more question that is easy, but for me is hard, because I can't understand JS.
I need to put 2 variables in the post request, when I am trying to do it, it give me an error: http error 400(bad request)

Here is the code

document.getElementById("reg-btn").addEventListener("click", myFunction);
function myFunction() {
let l_i;
document.querySelector("#user-input").addEventListener("click", () => {
  l_i = document.querySelector("#user_input").value;
});
let p_i;
document.querySelector("#passwordCopy").addEventListener("click", () => {
  p_i = document.querySelector("#passwordCopy").value;
});


  $.ajax({
      url: "http://localhost:8000/api/api-token-auth/",
      type: "POST",
      headers: { 
        "X-CSRFToken": Cookies.get('csrftoken')  // Extract the csrftoken from the cookie
      },
      data:{ username: l_i, password: p_i},
      dataType:"json"
  }).done(function(data) {
    Cookies.set(data)
  })}

Here in l_i and p_i, I am storing the username and password that I want to send to an api url, in order to take token that I will store in cookie after.

CodePudding user response：

Your code makes no sense.

You are storing the username and password inside a click event handler on the input fields. What's the purpose here? User click on field before typing, and probably don't click anymore. Or user can never click in the field (just focus using tab, for example).

You must get the field value on form submit instead.

Also you are showing a piece of code alone. When is this code called? It's inside form submit event? It's from a buttom click handler?

Rethink your logic.

CodePudding user response：

Your original code written in pseudocode would look like:

when the submit button is pressed:
  when the user input is clicked, set a variable to its value
  when the password input is clicked, set a variable to its value

send the request

There are a few problems with this approach:

The code would add the event listeners, but would then send the request before it got the response.
The variables would be scoped to the onclick for #reg-btn so the request would not have access to them.
The submit button event listener does not need to know when the inputs are clicked, just their values

It's important to remember that .addEventListener callbacks (and callbacks in general) do not run procedurally- they are event driven.

Here's what a working version of your code could look like:

document.getElementById("reg-btn").addEventListener("click", () => {
  const l_i = document.querySelector("#user_input").value;
  const p_i = document.querySelector("#passwordCopy").value;
  $.ajax({
      url: "http://localhost:8000/api/api-token-auth/",
      type: "POST",
      headers: { 
        "X-CSRFToken": Cookies.get('csrftoken')  // Extract the csrftoken from the cookie
      },
      data: { username: l_i, password: p_i},
      dataType:"json"
  }).done(function(data) {
    Cookies.set(data)
  })}
});