Ajax-MySql-Php问题（从表单提交文本，通过AJAX发送到php脚本，再返回div）
[英]Ajax-MySql-Php issue (submit text from form, send via AJAX to php script, back to div)
问题描述
我想通过AJAX和PHP脚本将数据从表单发送到MySql DB。 我可以使用表单中的选项选择来使其完美，但是我根本无法使用文本提交表单来获得它。
首先起作用的是：
HTML表单：
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
</select>
</form>
.js密码：
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
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","getuser.php?q="+str,true);
xmlhttp.send();
}
PHP脚本：
<?php
$q=$_GET['q'];
$con = mysql_connect('localhost', 'root');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM emp WHERE id = '$q'";
$result = mysql_query($sql);
$i = 0;
echo "<table class=\"table-master\">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
$i++;
echo "<tr class=\"d".($i & 1)."\">";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
我想做的是在HTML中有一个文本字段，当用户单击“提交”时，该字段将由用户填写，该信息将传递到包含AJAX段的js脚本中，并由数据库和结果输出到我的DIV中。
我认为我做错了-在使用文本表单提交时不能在表单中明显使用onchange 。 必须提交！！ js脚本有效，因此我认为我的AJAX部分很好。 PHP脚本也可以工作，但是同样，一旦我尝试从表单中获取文本输入，一切都会崩溃。 也许我的js脚本未设置为捕获传入的文本表单变量！？ 任何帮助/指导将不胜感激。
2 个解决方案
解决方案1
0 2011-09-22 16:48:32
首先，我很懒并且使用jquery。 但是，如果表单中有多个输入，最好的方法是在提交按钮上使用onsubmit处理程序或onclick处理程序。
您必须获取每个元素的值，并适当地构建查询字符串：
<form>
<select id="users" name="users">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
</select>
<input id="textfield" name="textfield" type ="text" />
<input type="submit" value="process" onclick="showUser()" />
</form>
function showUser()
{
var sel = document.getElementById('users');
var selvalue = sel.options[sel.selectedIndex].value;
var textfield = document.getElementById('textfield').value;
if (selvalue=="" || textfield = "")
{
document.getElementById("txtHint").innerHTML="";
return false;
}
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","getuser.php?q=" + selvalue + "&t=" + textfield,true);
xmlhttp.send();
return false;
}
您必须在php脚本中检查T变量，然后使用它进行任何操作。 请与数据库交互之前，请先清理您的输入。
您应该转换为int，并使用mysql_real_escape_string（）或参数化查询。
我假设这可行。 我习惯了Jquery，在这里我只是序列化表格而忘了它。
我敢肯定有人有更好的方法来做到这一点-我不太了解javascript。
解决方案2
0 2011-09-22 17:15:14
如果您想在这里使用XmlHttp，这是我针对一个文本字段执行的操作，请添加更多您自己的内容。 制作一个名为emp的测试表，其中包含5个字段f1，f2，..，f5，这将起作用：
索引
<html>
<head>
<script type="text/javascript">
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
if (!request)
alert("Error initializing XMLHttpRequest!");
</script>
<script type="text/javascript">
function getEmp(emp)
{
document.getElementById('results').innerHTML="Please wait...";
//we will call asychronously getData.php
var url = "getEmp.php";
var params = emp;//no url parameters
var params = "empField=" +emp+"";
request.open("POST", url, true);//use post for connect harder to attack, lots of data transfer
//Some http headers must be set along with any POST request.
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
request.setRequestHeader("Content-length", params.length);
request.setRequestHeader("Connection", "close");
request.onreadystatechange = updatePage;
request.send(params);
}////////////////////
//You're looking for a status code of 200 which simply means okay.
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200)
{
document.getElementById('results').innerHTML=request.responseText;
}
else{
//alert("status is " + request.status);
}
}
}
</script>
</head>
<body >
Write employ name: <input type="text" name="emp" id='empField' value='John'/>
<span style="background-color:blue;color:yellow;"
onClick="getEmp(document.getElementById('empField').value )"/>
Click to find
</span>
<div id="results">
</div>
</body>
</html>
getEmp.php
<?PHP
mysql_connect('localhost', 'root','');
mysql_select_db("ajax_demo" );
$sq='\'';
$sql="SELECT * FROM emp WHERE f1 = ".$sq.$_POST['empField'].$sq." ";
$result = mysql_query($sql);
$row = mysql_fetch_row($result);
?>
<table border=4>
<tr><td>Field 1</td><td>Field 2</td><td>Field 3</td><td>Field 4</td><td>Field 5</td></tr>
<tr>
<td><?PHP echo $row[0]; ?></td> <td><?PHP echo $row[1]; ?></td>
<td><?PHP echo $row[2]; ?></td> <td><?PHP echo $row[3]; ?></td>
<td><?PHP echo $row[4]; ?></td>
<tr>
</table>
将不同的错误消息从PHP发送回Ajax / Jquery脚本并填充HTML DIV…？
[英]Send different error messages from PHP back to Ajax/Jquery script and populate HTML DIV…?
通过Ajax将表单中的变量（POST）发送到另一个PHP脚本（GET）
[英]Send variable from the form (POST) via ajax to another PHP script (GET)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.