Значение не передается на другую страницу с помощью AJAX?

Question

Я передаю скрытое значение ввода на другую страницу, используя AJAX, и отображаю там, но значение не передается. Я новичок в PHP, JQuery и AJAX. Кто-нибудь может мне помочь?

index.php:

<?php 
  foreach($imgs as $keys => $vals)
  {
    echo '<img class="myimg1" id="myimg" src="' . "images/$vals" . '" width="20%" height="20%"/>';
    echo '<input type="hidden" value="'.$vals.'" name="delete_file" id="delete_file" />';
    echo '<input type="button" value="Delete image" onclick="delete_image()"/>';
  }
?>

JS

function delete_image() {
  var status = confirm("Are you sure you want to delete ?");  
  if (status == true) {
    var file = $("#delete_file").val();
    $.ajax({
      type: "POST",
      url: "action.php",
      data: { file: file },
      success(html) {
        alert('Deleted');
      }
    });
  }
}        

action.php

<?php
  $num = $_POST["file"];
  echo $num;
?>

Answer 1

Надеюсь, приведенное ниже решение поможет вам.

Я изменил функцию onclick в кнопке и функции типа ввода для удаления имени (элемента)

var file = ele;

echo '<img class="myimg1" id="myimg" src="' . "images/$vals" . '" width="20%" height="20%"/>';
    echo '<input type="hidden" value="'.$vals.'" name="delete_file" id="delete_file" />';
    echo '<input type="button" value="Delete image" onclick="delete_image('.$vals.')"/>';

function delete_image(ele) {
  var status = confirm("Are you sure you want to delete ?");  
  if (status == true) {
    var file = ele;
    $.ajax({
      type: "POST",
      url: "action.php",
      data: { file: file },
      success(html) {
        alert('Deleted');
      }
    });
  }
}    

Answer 2

Вы зацикливаете изображения, и все эти изображения получают одинаковые имена и идентификаторы. Это не может быть хорошо. Я бы изменил это, чтобы они все получили другое имя и ID.

<?php 
  $counter = 0;
  foreach($imgs as $keys => $vals)
  {
    echo '<img class="myimg1" id="myimg" src="' . "images/$vals" . '" width="20%" height="20%"/>';
    echo '<input type="hidden" value="'.$vals.'" name="delete_file[' . $counter . ']" id="delete_file_' . $counter . '" />';
    echo '<input type="button" value="Delete image" onclick="delete_image()"/>';
    $counter++;
  }
?>

Вы также можете поместить изображения в форму и сериализовать ее с помощью jQuery для отправки через Ajax.

Также измените успешную часть следующего, чтобы увидеть ошибки PHP:

function delete_image() {
  var status = confirm("Are you sure you want to delete ?");  
  if (status == true) {
    var file = $("#delete_file").val();
    $.ajax({
      type: "POST",
      url: "action.php",
      data: { file: file },
      success: function(data, textStatus, jqXHR) {
        // use console.log to find PHP errors in the console of the browser
        console.log(data); 
        // you can alert data or use is to check for errors of whatever you want
        if (data == 'success') { alert(data); } 
      }
    });
  }
}