使用ajax和php将数据插入MySQL
[英]Using ajax and php to insert data to MySQL
问题描述
我觉得自己大概占了90％的比例，仅需要最后10％的帮助。 我查看了许多不同的示例，并试图拼凑出一个解决方案，但是还没有弄清楚，所以我正在寻找一些指导。
我有一个小的html页面，带有一些javascript，还有一个短的.php，它将接收到的数据添加到数据库中。
我可以看到代码进入了ajax函数，然后进入了insert函数。 但是实际上并没有进行插入。 我怀疑它永远不会将数据发送到php文件，但是我不确定。
这是html代码：
<html>
<head>
<script type ="text/javascript" language="javascript">
function ajaxFunction(){
var ajaxRequest;
alert("enter ajax"); //just a testing line
try{
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('responseDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
alert("enter insert"); //just for testing
var type = $('#type').val();
var vintner = $('#vintner').val();
var myData = {"type": type, "vintner": vintner,};
$.ajax({
url: "bottleAdd.php",
type: "POST",
data: "myData",
success: function(data, status, xhr)
{
$("$bottleAdd").html(data);
$("type").val();
$("vintner").val();
}
});
}
</script>
<title>Simple Add</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="addBottle">
<table>
<tr>
<td>Type: <input type="text" id="type" /></td>
<td>Vintner: <input type="text" id="vintner" /></td>
</tr>
<tr>
<td><button onClick="ajaxFunction()">Save Bottle Now</button></td>
</tr>
</table>
</div>
<div id="responseDiv">Response will appear here</div>
</body>
</html>
这是PHP
<?php
require_once 'login.php';
$conn = mysqli_connect($db_hostname, $db_username, $db_password, $db_database) or die("Connection failed: " . mysqli_connect_error());
$wineType = $_POST['type'];
$vintner = $_POST['vintner'];
$sql = "INSERT INTO bottleSimple (winetype, vintner)"
. " values ('$wineType', '$vintner')";
if (mysqli_query($conn, $sql)) {
echo "Successfully Inserted";
} else {
echo "Insertion Failed<br />";
echo $sql;
}
?>
我知道在php中有一些事情要做（例如，防止sql注入）。 但是现在，我对此不太担心，而只是想出如何使其正确运行而已。
任何帮助，将不胜感激。
谢谢。
3 个解决方案
解决方案1
0 已采纳 2015-05-23 19:58:13
您将普通的JS AJAX与jQuery的ajax包装器混合在一起。
将您的代码更改为以下内容：
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Simple Add</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type ="text/javascript" language="javascript">
var type = $('#type').val();
var vintner = $('#vintner').val();
var myData = {"type": type, "vintner": vintner};
$.ajax({
url: "bottleAdd.php",
type: "POST",
data: myData,
success: function(data) {
$("#responseDiv").html(data);
}
});
</script>
</head>
其余部分保持不变。
这样，您将使用jQuery AJAX。
顺便说一句，将meta标签放置在head标签的开头是个好习惯，因为像charset这样的标签会导致浏览器从头开始重新读取页面。
解决方案2
0 2015-05-23 20:15:26
您混合了XHR的两个调用方法-本机方法和jQuery方法。 如果您使用创建本机xhr objct的本机方法，则应仅使用保留本机XHR对象的ajaxRequest变量进行操作。 解决的办法是删除盯着的代码
$.ajax
并且在定义onstatechange事件之后，添加您的请求参数，并最终发送您的xhr。 所以：
function ajaxFunction() {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest();
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState === 4) {
var data = ajaxRequest.responseText;
console.log(data);
// do something with response data...
}
}
var type = 'atype';
var vintner = 'avintner';
var formData = new FormData();
formData.append("type", type);
formData.append("vintner", vintner);
ajaxRequest.open('POST', 'bottleAdd.php', true);
ajaxRequest.send(formData);
}
应该管用。
解决方案3
0 2015-05-23 20:47:46
试试这个：您可能会错误地使用此代码"mydata" ，将其更改为mydata ..
要查看结果，请在控制台中查看。
function ajaxFunction() { var ajaxRequest; alert("enter ajax"); //just a testing line try { ajaxRequest = new XMLHttpRequest(); } catch (e) { try { ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser broke!"); return false; } } } ajaxRequest.onreadystatechange = function() { if (ajaxRequest.readyState == 4) { var ajaxDisplay = document.getElementById('responseDiv'); ajaxDisplay.innerHTML = ajaxRequest.responseText; } } alert("enter insert"); //just for testing var type = $('#type').val(); var vintner = $('#vintner').val(); var myData = { "type": type, "vintner": vintner, }; $.ajax({ url: "http://stackoverflow.com/index.php", type: "POST", data: myData, success: function(data, status, xhr) { $("$bottleAdd").html(data); $("type").val(); $("vintner").val(); } }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> <title>Simple Add</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="addBottle"> <table> <tr> <td>Type: <input type="text" id="type" /> </td> <td>Vintner: <input type="text" id="vintner" /> </td> </tr> <tr> <td> <button onClick="ajaxFunction()">Save Bottle Now</button> </td> </tr> </table> </div> <div id="responseDiv">Response will appear here</div> </body> </html>
如何在数据库中检索和插入MySQL数据 <div> 使用PHP和JQuery AJAX标记？
[英]How to retrieve and insert MySQL data in a <div> tag using PHP and JQuery AJAX?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.