如何将mysql查询的结果获取到html文本框中
How do i get the results of a mysql query into html textbox
我已经为此工作了8个小时,但没有取得任何进展。所做的更改只是为了运行到另一个块。从头开始,然后又回到几乎成直角的位置。寻求帮助来理解我做错了什么。我确实做到了,把所有的学生都放在一张桌子上,但这不是我需要的。我想做的是:1.提示用户输入学生ID。2.根据mysql查询运行id3.将学生的信息(ID、姓名、电子邮件和GPA)输出到4个文本框中。我知道我需要一个数组,然后在js/ajax中在4个文本框之间分割响应。如何调用函数中的数组,然后将该学生的结果输出到文本框中?如有任何帮助或建议,我们将不胜感激。
到目前为止,我已经做到了:html:
<script type="text/javascript">
function queryStudent() {
var ajaxRequest;
try {
ajaxRequest = new XMLHttpRequest;
}catch(e) {
//IE Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Browser not compatible");
return false;
}
}
}
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
//delcare a array
//use ajax response.split to return the results of query to each textbox here
var results = ajaxRequest.responseText.split(); //how do i get query results in here
//output array indexes to html element id's
document.getElementById('studentID').value = response[0]; //fill text box 1
document.getElementById('stuName').value = response[1];//text box 2
document.getElementById('email').value = response[2];
document.getElementById('GPA').value = response[3];
}
};
var stuID = document.getElementByID('stuID').value
var queryString = "?stuID=" + stuID;
ajaxRequest.open("POST", "search_single.php"+ queryString, true);
ajaxRequest.send(stuID);
}
</script>
<form name="student" method="post" action="search_single.php">
<label>StudentID:</label>
<input type="text" id="input" name="stuID" value="">
<br>
<br>
<input type="button" onclick="queryStudent();" value="Search" id="button">
</form>
<h2>Student information will be displayed in the textboxes below:</h2>
<br>
<table id="outuput">
<tr>
<td><label>Student ID:</label></td>
<td><input type="text" id="stuID" value="" readonly></td>
</tr>
<tr>
<td><label>Student Name:</label></td>
<td><input type="text" id="stuName" value="" readonly></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="text" id="email" value=" " readonly></td>
</tr>
<tr>
<td><label>GPA:</label></td>
<td><input type="text" id="gpa" value=" " readonly></td>
</tr>
<br>
</table></body>
PHP:
$stuID = filter_input(INPUT_POST, 'studentID');
//Code for query
$query = 'SELECT *
FROM student
WHERE studentID = :stuID';
$statement = $db->prepare($query); //
$statement->bindValue(':stuID', $stuID); //bind all values (name, email..ect)?
$statement->execute();
$students = $statement->fetch(); //Fetch individual row's
我仔细查看了您的代码,发现了不少错误。我建议您使用IDE进行开发。IDE具有自动的代码验证功能,可以很容易地发现和更正错误。同时养成阅读PHP函数文档的习惯。这里有类似的javascript文档。
客户端代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
function queryStudent() {
//Retrieve user input, student ID
var stuID = document.getElementById('input').value
//Build querystring
var queryString = "?stuID=" + stuID;
//Create XMLHttpRequest
var xmlhttp = new XMLHttpRequest();
//Define function to process server feedback
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//Parse reponse
var obj = JSON.parse(xmlhttp.responseText);
//Populate form
document.getElementById('stuID').value = obj[0].studentID;
document.getElementById('stuName').value = obj[0].stuName;
document.getElementById('email').value = obj[0].email;
document.getElementById('gpa').value = obj[0].GPA;
}
};
//Run query
xmlhttp.open("POST", "search_single.php" + queryString, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form name="student" method="post" action="search_single.php">
<label>StudentID:</label>
<input type="text" id="input" name="stuID" value="">
<br>
<br>
<input type="button" onclick="queryStudent();" value="Search" id="button">
</form>
<h2>Student information will be displayed in the textboxes below:</h2>
<table id="output">
<tr>
<td><label>Student ID:</label></td>
<td><input type="text" id="stuID" value="" readonly></td>
</tr>
<tr>
<td><label>Student Name:</label></td>
<td><input type="text" id="stuName" value="" readonly></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><input type="text" id="email" value=" " readonly></td>
</tr>
<tr>
<td><label>GPA:</label></td>
<td><input type="text" id="gpa" value=" " readonly></td>
</tr>
</table>
</body>
</html>
服务器代码
<?php
//-------------------------
//Database constants, enter your DB info into these constants :
define(DB_HOST, "hostname");
define(DBUSER, "username");
define(DBPASS, "password");
define(DBSCHEME, "databasename");
//-------------------------
//Create DB link
$con = new PDO('mysql:host='.DB_HOST.';dbname='.DBSCHEME, DBUSER, DBPASS);
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//Retrieve user input
$stuID = $_REQUEST['stuID'];
//Evaluate user input
if( $stuID == "" )
die("Invalid Student ID");
//Prepare and execute
$sql = 'SELECT studentID, stuName, email, GPA FROM student WHERE studentID = :stuID';
$query = $con->prepare($sql);
$query->bindValue(':stuID', $stuID, PDO::PARAM_STR);
$query->execute();
//Retrieve results
$students = $query->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($students);
//Output to ajax
echo $json;
相关文章:
- 用JavaScript替换Android WebView模板上的html文本
- 仅IE8 html文本框中的字符
- HTML文本框中的javascript数字
- HTML文本输入大小
- 如何放置ÅÄ和#214;在javascript数组中,然后将其与html文本进行比较
- 如何以非编程方式国际化HTML文本
- 在 PHP 块中使用 Javascript 设置 HTML 文本框的值(使用 echo)
- jQuery在用新文本替换HTML文本时淡出HTML文本,而不是仅显示
- HTML文本框,它接受电话号码,并以美国电话号码格式显示
- Javascript按钮,在html文本区域中插入一个大黑点(•)
- 更换163;使用javascript从html文本区域中提取字符
- 单击或点击切换HTML文本
- 单击即可编辑HTML文本
- 分析Adobe InDesign的HTML文本——其他标记中的标记
- 如何将mysql查询的结果获取到html文本框中
- 当使用javascript/jquery添加值时,html文本输入表显示不正确
- 如何将 HTML 文本同步并突出显示到音频
- 如何使用 JQuery 从相对元素获取 html 文本
- 根据用户选择的输入编写 html 文本
- MVC 4:使用 JQUERY 和 PartViewResult 动态创建 HTML 文本框.如果代码是动态添加的,如何