2012-01-10 47 views
2

我有一个非常简单的表单,包含一个文本框和一个提交按钮。当用户在表单中输入内容时,点击提交,我想用PHP和Ajax(用jQuery)将表单的结果插入到MySQL数据库中。此结果应以每次插入后更新的表格形式显示在同一页面上。通过Ajax使用PHP插入和检索数据

任何人都可以请帮忙吗?

我用不工作代码:

ajax.html

<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; 
?> 
+0

[你尝试过什么?](http://mattgemmell.com/2008/12/08/what-have-you-tried/) – dezso 2012-01-10 10:03:24

+0

我已经使用php接受和检索数据库。数据显示在下一页上。我想要数据显示在同一页 – prit2192 2012-01-10 10:54:24

回答

0

有互联网上提供许多教程AJAX与PHP和jQuery 。你可以通过其中任何一个并获得理想的结果。

在这里看到一个例子http://www.tutorialspoint.com/ajax/ajax_database.htm

+0

它从数据库检索结果。如果我想插入到数据库然后检索,将做出什么样的改变? – prit2192 2012-01-10 10:50:46

+0

用'插入'查询替换'选择'查询。看到这个例子 http://woork.blogspot.com/2007/10/insert-record-into-database-using-ajax.html – 2012-01-10 11:07:44

+0

它不工作。数据库在提交之后并没有得到更新。事实上在按下提交时没有任何反应 – prit2192 2012-01-10 11:48:16

1
$("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脚本化妆查询的数据到数据库中,让你的结果

希望这将有助于

相关问题