У меня очень простая форма, содержащая текстовое поле и кнопку отправки. Когда пользователь вводит что-то в форму, затем нажимает submit, я хотел бы использовать PHP и Ajax (с jQuery) для вставки результата формы в базу данных MySQL. этот результат должен отображаться на той же странице в виде таблицы, которая обновляется после каждой вставки.
Кто-нибудь может помочь?
Код, который я использовал, который не работает:
<html> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); }catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); }catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data // sent from the server and will update // div section in the same page. ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.value = ajaxRequest.responseText; } } // Now get the value from user and pass it to // server script. var name = document.getElementById('name').value; var age = document.getElementById('age').value; var wpm = document.getElementById('wpm').value; var sex = document.getElementById('sex').value; var queryString = "&name=" +name+ "&age=" + age ; queryString += "&wpm=" + wpm + "&sex=" + sex; ajaxRequest.open("GET", "ajax-example.php" + queryString, true); ajaxRequest.send(null); } //--> </script> <form name='myForm'> Name: <input type='text' id='name' /><br/> Max Age: <input type='text' id='age' /> <br /> Max WPM: <input type='text' id='wpm' /> <br /> Sex: <select id='sex'> <option value="m">m</option> <option value="f">f</option> </select> <input type='button' onclick='ajaxFunction()' value='Query MySQL'/> </form> <div id='ajaxDiv'>Your result will display here</div> </body> </html>
ajax-example.php :
<?php $dbhost = "localhost"; $dbuser = "demo"; $dbpass = "demo"; $dbname = "test_db"; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($test_db) or die(mysql_error()); // Retrieve data from Query String $age = $_GET['age']; $sex = $_GET['sex']; $wpm = $_GET['wpm']; // Escape User Input to help prevent SQL Injection $age = mysql_real_escape_string($age); $sex = mysql_real_escape_string($sex); $wpm = mysql_real_escape_string($wpm); //build query $query = "INSERT INTO form2 (name,age,sex,wpm) VALUES ('$name','$age','$sex','$wpm')";; mysql_select_db('test_db'); $retval = mysql_query( $sql, $conn ); if(! $retval ) { die('Could not enter data: ' . mysql_error()); } //Build Result String $display_string = "<table>"; $display_string .= "<tr>"; $display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>"; $display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>"; $display_string .= "</tr>"; // Insert a new row in the table for each person returned $result1=mysql_query("SELECT * FROM form2 WHERE name='$name'"); while($row = mysql_fetch_array($result1)) { $display_string .= "<tr>"; $display_string .= "<td>$row[name]</td>"; $display_string .= "<td>$row[age]</td>"; $display_string .= "<td>$row[sex]</td>"; $display_string .= "<td>$row[wpm]</td>"; $display_string .= "</tr>"; } $display_string .= "</table>"; echo $display_string; ?>
$("button_id").click(function () { $.ajax({ url:"where you should post the data", type: "POST", data: the string you should post, success: function (result) { //display your result in some DOM element } }); });
Когда вы получаете данные в php-скрипте, делайте запрос в базу данных и получаете результат
надеюсь, это поможет
В Интернете есть много обучающих программ для ajax с PHP и JQuery. Вы можете пройти через любой из них и получить желаемый результат.
См. Пример здесь: http://www.tutorialspoint.com/ajax/ajax_database.htm