Как я могу отправить форму PHP без перенаправления в файл действий? (отправлять и получать данные с помощью ajax) - PullRequest
Новая
       13

Как я могу отправить форму PHP без перенаправления в файл действий? (отправлять и получать данные с помощью ajax)

1 голос
/ 15 мая 2019

Я загружаю форму, нажимая на кнопку с $ ("# btn"). Load ("form.php") в index.php, я хочу избежать перенаправления страницы в файл действий после отправки и добавления элементав таблице, которая находится под формой.

моя демонстрация на http://price.parag.website

<?php include "../connection.php" ?>

<h1>Add CPU</h1>

<form method="post" action="actions/cpu_action.php">
    <label for="name">Name</label>
    <input type="text" name="cpu_name" />
    <label for="price">Price</label>
    <input type="text" name="cpu_price" />
    <input type="submit" value="Add" />
</form>
<?php

$sql = "SELECT id, cpu_name, cpu_price FROM cpu";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // output data of each row
    echo "<table>
    <thead>
    <tr>
    <th>ID</th>
    <th>CPU NAME</th>
    <th>CPU PRICE</th>
    </tr>
    </thead>";

    while($row = $result->fetch_assoc())
    {
    echo "<tr>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['cpu_name'] . "</td>";
    echo "<td>" . $row['cpu_price'] . "</td>";
    echo "</tr>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

Ответы [ 2 ]

2 голосов
/ 15 мая 2019 
<h1>Add CPU</h1>

<form id="formupload" method="post" action="actions/cpu_action.php">
    <label for="name">Name</label>
    <input type="text" name="cpu_name" />
    <label for="price">Price</label>
    <input type="text" name="cpu_price" />
    <input type="submit" value="Add" />
</form>

теперь мы должны очистить действие формы по умолчанию (я буду использовать jquery) 

     $('#formupload').on('submit',function(e){
             e.preventDefault();
         var formData = new FormData(this);
            $.ajax({
                type:'POST',
                url: $('#formupload').attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(result){
         if(condition){}
         else{}
    }
    })
   })

Попробуйте, это будет работать

1 голос
/ 15 мая 2019 
<button type="button" onclick="loadDoc()">Request data</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("table").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "pageToPost.php", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("data1=bar&data2=foo");
}
</script>

Это примет ответ и обновит элемент с идентификатором table с ответом, поэтому убедитесь, что он находится в формате html.

...