php - 将数据库字段中的值分配给 html 元素

标签 php html mysql

我有一个名为 quiz(quest ,op1,op2,op3,op4,answer,num) 的数据库表,除了 num 之外的所有字段都是 varchar 类型,num 是主键。现在在 php 页面中,我需要将问题( <p> 元素)作为任务字段动态检索,四个单选按钮的值由该数据库的 op(n) 字段分配。请解释我该如何做到这一点。 html: 全选

<html>
<head>
<script language="javascript">

function loadXMLDoc()
{
var q=Math.floor((Math.random()*3)+1);
var xmlhttp;
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)
    {
   [color=#8000FF]document.getElementById("op1").innerHTML=xmlhttp.responseText;
   document.getElementById("op2").innerHTML=xmlhttp.responseText;
   document.getElementById("op3").innerHTML=xmlhttp.responseText;
   document.getElementById("op4").innerHTML=xmlhttp.responseText;[/color]//this is the code i need help //with
   }
  }
xmlhttp.open("GET","questions.php?num="+q,true);
xmlhttp.send();
}
</script></head>
<h1 align='center'><b>Object oriented programming-#1</b></h1>
<h2 align='center'>Supriya Raheja<h2>
<title>quiz has started</title>
<body>
    <div style="text-align:left">
    <table border="1">
<tr>
   <td width="25%"><table border="0">
<tr>
   <td><button type="button">Goto Q1</button></td>
   <td><input type="checkbox">
</tr>
<tr>
   <td><button type="button">Goto Q2</button></td>
   <td><input type="checkbox">
</tr>
<tr>
   <td><button type="button">Goto Q3</button></td>
   <td><input type="checkbox">
</tr>
<tr>
   <td><button type="button">Goto Q4</button></td>
   <td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q5</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q6</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q7</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q8</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q9</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q10</button></td>
<td><input type="checkbox">
</tr>
<tr>
<td><button type="button">Goto Q11</button></td>
<td><input type="checkbox">
</tr>
</td>
</table>
<td width="1000px">

<input type="radio" name="op1" value="" ></br>
<input type="radio" name="op2" value="" ></br>
<input type="radio" name="op3" value="" ></br>
<input type="radio" name="op4" value="" ></br>
<button style="text-align:bottom" type="button" onclick="loadXMLDoc()">Change 

Content</button>
</td>
</tr>
</table>
</body>
</html>

php

<?php
$q=$_GET["q"];

$con = mysqli_connect('localhost','root','ayushigarg','quiz4');
if (!$con)
  {
      die('Could not connect: ' . mysqli_error($con));
  }

mysqli_select_db($con,"quiz4");
$sql="SELECT * FROM quiz WHERE num = '".$q."'";

$result = mysqli_query($con,$sql);

//echo "<table border='1'>


$row = mysql_fetch_array($result)

   echo '{"questionTxt" : "' . $row['quest'] .
        '", "answ1" : "' . $row['op1'] .
        '", "answ2" : "' . $row['op2'] .
        '", "answ3" : "' . $row['op3'] .
        '", "answ4" : "' . $row['op4'] .
        '", "hint" : "' . $row['hint'] . '"}';



mysqli_close($con);
?>
?>

当我单击更改内容按钮时,我希望将这些 answ1 、 answ2 等值分配给 op1、op2 等值...请帮助

最佳答案

document.getElementById("op2").innerHTML

设置id为op2的元素的innerHTML,例如:

<h1 id="op2">inner HTML</h1>

如果要设置字段的值,您需要:

document.getElementById("op2").value = "new value";

但我建议使用 jquery 来实现这一点,这样你会少一些痛苦!

我知道它没有被请求,但为了清楚起见,我可以向您展示它如何与 jquery 一起工作(未经测试):

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<script>

$(document).ready(function() {

    $('#btn1').click(function(){

        var q=Math.floor((Math.random()*3)+1);
        var myurl = "questions.php?num="+q;
        $.getJSON(myurl, function(data) {

            $('#qs1').html(data.questionTxt);

            $('#op1').val(data.answ1);
            $('#aw1').html(data.answ1);

            $('#op2').val(data.answ2);
            $('#aw2').html(data.answ2);

            $('#op3').val(data.answ3);
            $('#aw3').html(data.answ3);

            $('#op4').val(data.answ4);
            $('#aw4').html(data.answ4);
        });

    });

});

</script>

<h1 id="qs1"></h1>
<input type="radio" id="op1" name="op" value="" ><span id="aw1"></span></br>
<input type="radio" id="op2" name="op" value="" ><span id="aw2"></span></br>
<input type="radio" id="op3" name="op" value="" ><span id="aw3"></span></br>
<input type="radio" id="op4" name="op" value="" ><span id="aw4"></span></br>
<button style="text-align:bottom" type="button" id="btn1" value="go">

</body>
</html>

关于php - 将数据库字段中的值分配给 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17551811/

相关文章:

phpmyadmin 显示所有未分成 View 和表的表

html - 使用 CSS 多列布局留下不需要的顶部和底部边距

html - 古怪的导航定位问题让我很困惑。

php - 如何从数据库中的所有表中搜索包含当前月份的日期的所有记录?

php - 基于另一个列更新 MySql 列

PHP 代码帮助 - 破解 apache 服务器

php - &lt;!--[if lte IE8]>< ![endif]--> 出现在网站和下拉问题上

javascript - 通过 AJAX 将对象传递给 PHP

javascript - jquery根据元素div大小调整文本大小

php - 如何从具有不同where条件的表中添加和减去数据