Как выполнить запрос PHP для выбора варианта выбора с помощью AJAX?

Хорошо, я знаю, что на это уже был дан ответ ( выполните скрипт PHP на той же странице после выбора варианта с раскрывающимся списком с помощью Ajax или JavaScript ), но ответы не были очень полезны для тех, кто раньше не использовал AJAX. Как выполнить запрос, например, тот, который был создан, если кто-то выбирает параметр из раскрывающегося списка?

<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <h3>Subject</h3> <select name="allbooks" > <option value="none" ></option> <option value="allbooks" >All Books</option> </select> <?php $query = "SELECT * FROM books" or die("Error in the consult.." . mysqli_error($connection)); $books = $connection->query($query); ?> 

Во-первых, вам нужно вызвать запрос AJAX, используя Javascript. Но я буду руководить вами, используя jQuery (Javascript-библиотеку).

Ваш HTML:

 <select name="allbooks" id="allbooks"> <option value="none" ></option> <option value="allbooks" >All Books</option> </select> <div id="show"> <!-- ITEMS TO BE DISPLAYED HERE --> </div> 

После этого загрузите jQuery .

Затем давайте сделаем скрипт:

 <script src="jquery-1.9.1.min.js"></script> <!-- CHANGE THE JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED --> <script type="text/javascript"> $(document).ready(function(){ /* PREPARE THE SCRIPT */ $("#allbooks").change(function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */ var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */ var dataString = "allbooks="+allbooks; /* STORE THAT TO A DATA STRING */ $.ajax({ /* THEN THE AJAX CALL */ type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */ url: "get-data.php", /* PAGE WHERE WE WILL PASS THE DATA */ data: dataString, /* THE DATA WE WILL BE PASSING */ success: function(result){ /* GET THE TO BE RETURNED DATA */ $("#show").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */ } }); }); }); </script> 

Затем давайте создадим get-data.php который получит данные, отправленные через AJAX.

 if(!empty($_POST["allbooks"])){ /* DO YOUR QUERY HERE AND GET THE OUTPUT YOU WANT */ echo $output; /* PRINT THE OUTPUT YOU WANT, IT WILL BE RETURNED TO THE ORIGINAL PAGE */ } 

Вы можете проверить этот пример – JSfiddle .

  var id="1"; $.ajax({ type: 'POST', url: 'yourphppage', dataType: "json", data: { idofrow:id }, success: function(data) { alert(data); }, error: function(data) { alert(data); } }); 

Это образец запроса ajax, который вы можете использовать, и просто изменяете другие поля по мере необходимости, когда запрос является успешным, вы можете получить эти данные в результате успешного использования данных, которые вы хотите использовать, вы можете вернуть json , text .

На вашей php-странице вы можете получить идентификатор как

 $id = ($_POST['idofrow']); 

вы можете выбрать этот идентификатор для этого

 SELECT * FROM table where rowid = $id 

и вы можете просто повторить результат.

для дополнительной информации просто проверьте эту документацию

Проверьте этот простой учебник. Надеюсь, это поможет.

  <html> <head> <script> function showUser(str) { if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } else { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } // getuser.php is seprate php file. q is parameter xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Joseph Swanson</option> <option value="4">Glenn Quagmire</option> </select> </form> <br> <div id="txtHint"><b>Person info will be listed here...</b></div> </body> </html> 

Файл getuser.php

  <!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } table, td, th { border: 1px solid black; padding: 5px; } th {text-align: left;} </style> </head> <body> <?php // don't use intval if your select value is not numberic $q = $_GET['q']; $con = mysqli_connect('localhost','peter','abc123','my_db'); if (!$con) { die('Could not connect: ' . mysqli_error($con)); } mysqli_select_db($con,"ajax_demo"); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysqli_query($con,$sql); echo "<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysqli_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysqli_close($con); ?> </body> </html>