将JS传递给PHP

I am trying to pass a string stored in a variable to a mysql table via php.

Currently I am using an <input> with type hidden, I assign the variable that I want as its value and post it through a form submit. it is working but it's ugly.

I know there is $.post and $.ajax but I don't seem to figure out how to use them in the js side and php side. I have looked for them online and there are a lot of questions of this sort but none of them work for me (probably because I am missing knowledge)

How can I do it?

Here is a very basic example. We start out with a form on an HTML page. When this button is clicked, we are going to activate a javascript function.

<html>
  <form>
    <input type="email" id="email-field" />
    <input id="submitButton" type="submit" value="Submit" />
  </form>
</html>

Now, here is the javascript function being activated due to the button click. Inside, we extract any information that might have been filled out in the input field with id of "email-field", then send that off via ajax to a php file that sits on the server.

$('#submitButton').click(function() {
  var email = $('#email-field').val();

  $.ajax({
    type: 'POST',
    url: './yourphpfilename.php',
    data: {
      email: email
    }
  }).done(function(data) {
    console.log(data) // Will send you the result that is echoed in the PHP file
  })
})

As long as you put the correct url in your ajax request to your PHP file, you can easily receive the data being sent like so,

<?php

 if($_SERVER['REQUEST_METHOD'] == 'POST') {

   $email = $_POST['email'];
   echo 'I have received your request.';

 }

To send the data back, I use the echo command to do so here.

Try to read some documentation on the $_POST variable in PHP. Notice how I call for ['email']. The identifier inside the brackets directly correlates to the key inside the data object in the js file. For example, say we decided to name our email key something different in the js file.

data: {
   useremail: email
}

You would then just change the PHP code like so,

$email = $_POST['useremail'];

This was very confusing for me starting out, and sometimes it's hard to even pose a quality question on it if you have no idea how it works. In the future though, I would atleast try to post some code showing that you attempted the problem.

There are several things you need to do:

  1. You have a form tag and you need to prevent it from submitting, like this:

$("#myformid").submit(function(event) { //Do something event.preventDefault(); });

If your form is no longer submitted, then you are on the right track.

  1. You need to use $.ajax to send the request, like this: $("#myformid").submit(function(event) { //Here I assume that all variables have been properly initialized $.ajax({ url: "yoururl", method: "POST", data: yourdata, //yourdata should contain the things you intend to send to the server }).done(function(response) { //callback }); event.preventDefault(); });

  2. You will need a PHP code which will properly handle the POST request you send at yoururl. This is how you can check in PHP whether the request method was POST: if ($_SERVER['REQUEST_METHOD'] === 'POST') { //It is a POST request } else { //It is not a POST request }