SEARCH 1 REGISTRO FETCH API POST JSON API MYSQL PHP PDO

 

.then(response => response.json()) Fetch API post json api read 1 row data mysql pdo php form

Sure! Here's an example of how to use .json() to parse the response from a Fetch API POST request to a PHP script that reads one row of data from a MySQL database:

 

javascript

Copy code

// Get the form and input elements

const readForm = document.querySelector('#read-form');

const idInput = document.querySelector('#id-input');

const nameOutput = document.querySelector('#name-output');

const emailOutput = document.querySelector('#email-output');

 

// Add a submit event listener to the form

readForm.addEventListener('submit', (event) => {

  event.preventDefault(); // Prevent the form from submitting normally

 

  // Get the form data

  const formData = {

    id: idInput.value.trim()

  };

 

  // Send a POST request to the PHP script

  fetch('read.php', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify(formData)

  })

  .then(response => response.json())

  .then(data => {

    console.log(data);

    // Update the output elements with the retrieved data

    nameOutput.textContent = data.name;

    emailOutput.textContent = data.email;

  })

  .catch(error => console.error(error));

});

The above code sends a POST request to a PHP script called read.php with a JSON object containing the form data. The response is expected to be a JSON object, which is parsed using the .json() method.

 

Next, create the read.php script to read one row of data from the MySQL database:

 

php

Copy code

// Replace the variables with your MySQL database credentials

$host = 'localhost';

$dbname = 'your_database_name';

$username = 'your_mysql_username';

$password = 'your_mysql_password';

 

// Get the form data from the POST request

$formData = json_decode(file_get_contents('php://input'), true);

 

// Create a PDO instance and set the error mode to exception

try {

    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

    echo "Connection failed: " . $e->getMessage();

    exit;

}

 

// Prepare a statement to read one row of data from the database

$stmt = $pdo->prepare('SELECT name, email FROM your_table_name WHERE id = :id');

$stmt->bindValue(':id', $formData['id'], PDO::PARAM_INT);

$stmt->execute();

 

// Fetch the row and send it back to the client as a JSON object

$row = $stmt->fetch(PDO::FETCH_ASSOC);

echo json_encode($row);

The above code reads one row of data from a MySQL table called your_table_name based on the id value and sends it back to the client as a JSON object. You should replace the database credentials and table name with your own. The retrieved data is then used to update the output elements in the client-side JavaScript code.

.then(response => response.json()) Fetch API post json api read 1 row data mysql pdo php inputs button

 

Sure! Here's an example of how to use .json() to parse the response from a Fetch API POST request to a PHP script that reads one row of data from a MySQL database, and updates input elements and a button in the client-side:

 

javascript

Copy code

// Get the form and input elements

const readForm = document.querySelector('#read-form');

const idInput = document.querySelector('#id-input');

const nameInput = document.querySelector('#name-input');

const emailInput = document.querySelector('#email-input');

const updateButton = document.querySelector('#update-button');

 

// Add a submit event listener to the form

readForm.addEventListener('submit', (event) => {

  event.preventDefault(); // Prevent the form from submitting normally

 

  // Get the form data

  const formData = {

    id: idInput.value.trim()

  };

 

  // Send a POST request to the PHP script

  fetch('read.php', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify(formData)

  })

  .then(response => response.json())

  .then(data => {

    console.log(data);

    // Update the input and button elements with the retrieved data

    nameInput.value = data.name;

    emailInput.value = data.email;

    updateButton.disabled = false;

    updateButton.dataset.id = formData.id; // Store the ID in the data-id attribute

  })

  .catch(error => console.error(error));

});

The above code sends a POST request to a PHP script called read.php with a JSON object containing the form data. The response is expected to be a JSON object, which is parsed using the .json() method.

 

Next, create the read.php script to read one row of data from the MySQL database:

 

php

Copy code

// Replace the variables with your MySQL database credentials

$host = 'localhost';

$dbname = 'your_database_name';

$username = 'your_mysql_username';

$password = 'your_mysql_password';

 

// Get the form data from the POST request

$formData = json_decode(file_get_contents('php://input'), true);

 

// Create a PDO instance and set the error mode to exception

try {

    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

    echo "Connection failed: " . $e->getMessage();

    exit;

}

 

// Prepare a statement to read one row of data from the database

$stmt = $pdo->prepare('SELECT name, email FROM your_table_name WHERE id = :id');

$stmt->bindValue(':id', $formData['id'], PDO::PARAM_INT);

$stmt->execute();

 

// Fetch the row and send it back to the client as a JSON object

$row = $stmt->fetch(PDO::FETCH_ASSOC);

echo json_encode($row);

The above code reads one row of data from a MySQL table called your_table_name based on the id value and sends it back to the client as a JSON object. You should replace the database credentials and table name with your own. The retrieved data is then used to update the input and button elements in the client-side JavaScript code.

 

 

 

 

Note that the updateButton element is initially disabled, and its data-id attribute is set to the id value from the form. This allows the client-side to identify which row to update when the user clicks the button.

.then(response => response.json()) Fetch API get json api search input data mysql pdo php display table html

Sure, here's an example of how to use .json() to parse the response from a Fetch API GET request to a PHP script that searches for data in a MySQL database and generates an HTML table based on the search query:

 

javascript

Copy code

// Get the search input and table elements

const searchInput = document.querySelector('#search-input');

const table = document.querySelector('#my-table');

 

// Send a GET request to the PHP script with the search query as a parameter

searchInput.addEventListener('input', () => {

  const query = searchInput.value.trim();

  if (query.length > 0) {

    fetch(`search.php?query=${encodeURIComponent(query)}`)

      .then(response => response.json())

      .then(data => {

        console.log(data);

        // Generate an HTML table from the retrieved data

        const rows = data.map(item => `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`);

        const html = `<table><thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;

        table.innerHTML = html;

      })

      .catch(error => console.error(error));

  } else {

    table.innerHTML = '';

  }

});

The above code sends a GET request to a PHP script called search.php, passing the search query as a URL parameter. The response is then parsed using the .json() method.

 

Next, create the search.php script to search for data in the MySQL database based on the query parameter and send it back to the client as a JSON array:

 

php

Copy code

// Replace the variables with your MySQL database credentials

$host = 'localhost';

$dbname = 'your_database_name';

$username = 'your_mysql_username';

$password = 'your_mysql_password';

 

// Create a PDO instance and set the error mode to exception

try {

    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

    echo "Connection failed: " . $e->getMessage();

    exit;

}

 

// Get the search query from the URL parameter

$query = $_GET['query'] ?? '';

 

// Prepare a statement to search for data in the database

$stmt = $pdo->prepare('SELECT id, name, email FROM your_table_name WHERE name LIKE :query OR email LIKE :query');

$stmt->bindValue(':query', '%' . $query . '%', PDO::PARAM_STR);

$stmt->execute();

 

// Fetch the rows and send them back to the client as a JSON array

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rows);

The above code searches for data in a MySQL table called your_table_name based on the search query parameter passed in the URL. The query searches for matches in both the name and email columns using the LIKE operator. The retrieved rows are sent back to the client as a JSON array of objects. The client-side JavaScript code generates an HTML table from the retrieved data and inserts it into the table element

.then(response => response.json()) Fetch API post json api search input data mysql pdo php display table html

Sure, here's an example of how to use .json() to parse the response from a Fetch API POST request to a PHP script that searches for data in a MySQL database and generates an HTML table based on the search query:

 

javascript

Copy code

// Get the search input, form, and table elements

const searchInput = document.querySelector('#search-input');

const form = document.querySelector('#my-form');

const table = document.querySelector('#my-table');

 

// Send a POST request to the PHP script with the search query as a parameter

form.addEventListener('submit', (event) => {

  event.preventDefault();

  const formData = new FormData(form);

  fetch('search.php', {

    method: 'POST',

    body: formData

  })

    .then(response => response.json())

    .then(data => {

      console.log(data);

      // Generate an HTML table from the retrieved data

      const rows = data.map(item => `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`);

      const html = `<table><thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;

      table.innerHTML = html;

    })

    .catch(error => console.error(error));

});

 

// Send a GET request to the PHP script to retrieve all data

fetch('search.php')

  .then(response => response.json())

  .then(data => {

    console.log(data);

    // Generate an HTML table from the retrieved data

    const rows = data.map(item => `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`);

    const html = `<table><thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;

    table.innerHTML = html;

  })

  .catch(error => console.error(error));

The above code sends a POST request to a PHP script called search.php, passing the search query as form data. The response is then parsed using the .json() method. Additionally, a GET request is sent to retrieve all data from the PHP script when the page loads.

 

Next, create the search.php script to search for data in the MySQL database based on the form data and send it back to the client as a JSON array:

 

php

Copy code

// Replace the variables with your MySQL database credentials

$host = 'localhost';

$dbname = 'your_database_name';

$username = 'your_mysql_username';

$password = 'your_mysql_password';

 

// Create a PDO instance and set the error mode to exception

try {

    $pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch(PDOException $e) {

    echo "Connection failed: " . $e->getMessage();

    exit;

}

 

// Get the search query from the form data

$query = $_POST['query'] ?? '';

 

// Prepare a statement to search for data in the database

$stmt = $pdo->prepare('SELECT id, name, email FROM your_table_name WHERE name LIKE :query OR email LIKE :query');

$stmt->bindValue(':query', '%' . $query . '%', PDO::PARAM_STR);

$stmt->execute();

 

// Fetch the rows and send them back to the client as a JSON array

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($rows);

The above code searches for data in a MySQL table called your_table_name based on the search query passed in the form data

.then(response => response.json()) Fetch API post json api search 2 date data mysql pdo php display table html

 

6 / 6

 

Sure, here's an example of how to use .json() to parse the response from a Fetch API POST request to a PHP script that searches for data in a MySQL database between two dates and generates an HTML table based on the search query:

 

javascript

Copy code

// Get the date inputs, form, and table elements

const fromDateInput = document.querySelector('#from-date-input');

const toDateInput = document.querySelector('#to-date-input');

const form = document.querySelector('#my-form');

const table = document.querySelector('#my-table');

 

// Send a POST request to the PHP script with the date range as parameters

form.addEventListener('submit', (event) => {

  event.preventDefault();

  const formData = new FormData(form);

  fetch('search.php', {

    method: 'POST',

    body: formData

  })

    .then(response => response.json())

    .then(data => {

      console.log(data);

      // Generate an HTML table from the retrieved data

      const rows = data.map(item => `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`);

      const html = `<table><thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;

      table.innerHTML = html;

    })

    .catch(error => console.error(error));

});

 

// Send a GET request to the PHP script to retrieve all data

fetch('search.php')

  .then(response => response.json())

  .then(data => {

    console.log(data);

    // Generate an HTML table from the retrieved data

    const rows = data.map(item => `<tr><td>${item.id}</td><td>${item.name}</td><td>${item.email}</td></tr>`);

    const html = `<table><thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead><tbody>${rows.join('')}</tbody></table>`;

    table.innerHTML = html;

  })

  .catch(error => console.error(error));

The above code sends a POST request to a PHP script called search.php, passing the date range as form data. The response is then parsed using the .json() method. Additionally, a GET request is sent to retrieve all data from the PHP script when the page loads.

 

Next, create the search.php script to search for data in the MySQL database between two dates and send it back to the client as a JSON array: