如何在php上使用ajax插入数据库


How to insert into database using ajax on php?

我有三个html表单值fname,lname,age。我想把它发送到服务器端php文件,并插入到数据库。

我的html表单是这样的:
<html>
<head>
<script>
function insert(fname,lname,age)
{
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;
    }
  }
xmlhttp.open("GET","ajax_db_php.php?fname=fname&lname=lname&age=age",true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<table>
<tr><td>First Name : </td><td> <input type="text" fname="fname"/> </td> </tr>
<tr><td>Last Name : </td><td> <input type="text" fname="lname"/> </td> </tr>
<tr><td>City : </td><td> <input type="text" fname="age"/> </td> </tr>
<input type="submit" onclick="insert(fname,lname,age)">
</table>
</form>
</body>
</html>

因为我已经使用ajax,它不应该加载整个页面,但当我点击提交按钮,它加载整个页面。为什么?接收值并插入数据库的php页面是:

<html>
<body>
<?php
$fname=$_GET['fname'];
$lname=$_GET['lname'];
$age=$_GET['age'];
//echo "firstname : " $fname;
$con=mysqli_connect('127.0.0.1:3306' ,'root','root','my_db');
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$sql="INSERT INTO table1 (fname, lname, age)
VALUES
('$_POST[fname]','$_POST[lname]','$_POST[age]')";
$result=mysql_query($sql);
if (!mysqli_query($con,$sql))
  {
  die('Error: ' . mysqli_error($con));
  }
echo "1 record added";
mysqli_close($con);

?>
</body>
</html>

当我点击提交按钮时,它什么也没有显示,没有错误,也没有更新数据库

您正确设置了$fname, $lname$age,但您从未使用它们,而是使用不存在的$_POST变量。

代替('$_POST[fname]','$_POST[lname]','$_POST[age]')";

应该使用$_GET变量,例如

('$fname','$lname','$age')";


我还建议您在将字符串添加到数据库时转义字符串。一个可能的解决方案是使用Prepared语句。

尼古拉所说的改变然后修改HTML

input type="submit" 

input type="button"

这将不会重新加载页面。然后从PHP中删除以下标签

<html>
<body>
</html>
</body>

我建议使用jQuery进行ajax调用

更新如何使用ajax和序列化:

这是test.php

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<script>
$(document).ready(function(){
    $("form").on('submit',function(event){
    event.preventDefault();
        alert("Hello");
        data = $(this).serialize();
        $.ajax({
        type: "GET",
        url: "test2.php",
        data: data
        }).done(function( msg ) {
        alert( "Data Saved: " + msg );
        });
    });
});
</script>
</head>
<body>
<form>
<table>
<tr><td>First Name : </td><td> <input type="text" name="fname"/> </td> </tr>
<tr><td>Last Name : </td><td> <input type="text" name="lname"/> </td> </tr>
<tr><td>City : </td><td> <input type="text" name="age"/> </td> </tr>
<input type="submit" value="Submit" />
</table>
</form>
</body>
</html>

这是test2.php

<?php
if($_GET)
{
$fname=$_GET['fname'];
$lname=$_GET['lname'];
$age=$_GET['age'];
echo "firstname : ".$fname;
}
?>