首先需要一个带输入表格. 复制代码 代码如下:<!– To change this template, choose Tools | Templates and open the template in the editor. –> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head> <title></title> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> <script src=”submit.j
在本文中，我们将深入探讨如何使用Ajax和PHP实现在网页中无刷新地向数据库写入数据。这个过程涉及前端的JavaScript、Ajax技术以及后端的PHP处理和数据库交互。
我们有一个HTML页面，其中包含一个简单的表单，用于用户输入数据。表单通常包括字段（如`<input>`标签）和一个提交按钮。在这个例子中，有两个字段：一个是`question`，另一个是`answer`，以及一个"添加"按钮，当用户点击时会触发JavaScript函数`getValue()`。
```html
<form name="insertForm">
<label for="question">知识点</label>
<input name="question" type="text" />
<br/><br/>
<label for="answer">答案</label>
<input name="answer" type="text" />
<br/>
<input name="confirm" value="添加" type="button" onclick="getValue();">
</form>
```
`getValue()`函数从表单中获取用户输入的数据，并调用`submit()`函数发送这些数据到服务器。这里的`submit()`函数使用Ajax技术，它创建一个XMLHttpRequest对象（在不同浏览器中可能有不同的实现方式），并设置回调函数以处理服务器的响应。
```javascript
function getValue() {
var question = document.insertForm.question.value;
var answer = document.insertForm.answer.value;
submit(question, answer);
}
function submit(question, answer) {
var xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert("Your browser does not support AJAX!");
return;
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
alert(xmlHttp.responseText);
}
};
var url = "insert1.php";
xmlHttp.open("post", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
xmlHttp.send("question=" + question + "&answer=" + answer);
}
function GetXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
```
当Ajax请求发送到服务器后，服务器端的PHP脚本接收到这些数据并进行处理。在这个示例中，PHP脚本（`insert1.php`）接收通过`$_POST`全局变量传递的`question`和`answer`参数。
```php
<?php
$q = $_POST['question'];
$a = $_POST['answer'];
```
接下来，你需要连接到数据库，通常是MySQL，执行插入语句将数据保存到相应的表中。这里省略了具体的数据库连接和插入操作，但通常会涉及到`mysqli_connect()`或`PDO`函数来建立连接，然后使用`mysqli_query()`或`PDO::query()`执行SQL语句。
```php
// 假设已有的数据库连接
$connection = mysqli_connect('localhost', 'username', 'password', 'database_name');
// 检查连接是否成功
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
// 插入数据
$sql = "INSERT INTO your_table (question, answer) VALUES (?, ?)";
$stmt = mysqli_prepare($connection, $sql);
mysqli_stmt_bind_param($stmt, "ss", $q, $a);
mysqli_stmt_execute($stmt);
// 关闭连接
mysqli_close($connection);
```
在这个过程中，重要的是确保数据安全，防止SQL注入攻击。可以使用预编译语句（如上述示例所示）或使用`mysqli_real_escape_string()`对用户输入进行转义。
总结来说，使用Ajax和PHP实现写入数据库的过程主要包括以下几个步骤：
1. 创建HTML表单供用户输入数据。
2. 使用JavaScript监听表单提交事件，并通过Ajax发送数据到服务器。
3. 在服务器端，PHP脚本接收数据，连接到数据库，执行插入操作，并返回结果。
4. 客户端的Ajax回调函数处理服务器的响应，例如显示反馈信息。
这个过程使得用户可以在不离开当前页面的情况下提交数据，提高了用户体验。同时，理解这个流程对于任何希望构建动态、交互性强的Web应用的开发者来说都至关重要。
