标签:
1 <div id="anwser1" style="display:none"> 2 <div id="question"> 3 <p id="p1"></p> 4 5 </div> 6 <div id="chose"> 7 <div id="A" class="xuanze1"></div> 8 <div id="B" class="xuanze1"></div> 9 <div id="C" class="xuanze1"></div> 10 </div> 11 </div>
$(document).ready(function () { $(".dazhao").click(function(){ $("#fade").hide(200); $(".white_content").hide(200); $("#anwser1").show(300); var hol=$(this).attr("id"); $.post("data.php", {"types":hol},function (data) { var index = 0; $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); $.each(data[index]["answers"], function (i, item) { var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); //因为有3个xuanze1,eq(i)就是获取这个列表对象的第几个条目的对象了 xuanze1.html(" " + xuanze1.attr("id") + "." + item); }); $(".xuanze1").click(function () { // alert("正确答案为"+data[index]["correct"]+" 即将进入下一题"); index=index+1; if(index<3){ $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); $.each(data[index]["answers"], function (i, item) { var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); xuanze1.html(" " + xuanze1.attr("id") + "." + item); }); }else{ $("#anwser1").hide(); $("#fenxiang").show(); } }); }, "JSON"); }); });
1 <?php 2 include_once("conn.php"); 3 $types=$_POST[‘types‘]; 4 $sql="select distinct* from test01 where types=‘$types‘ order by rand() limit 0,3"; 5 $query = mysql_query($sql,$conn); 6 while($row=mysql_fetch_array($query)){ 7 $answers = explode(‘###‘,$row[‘answer‘]); 8 $arr[]= array( 9 ‘question‘ =>$row[‘question‘], 10 ‘answers‘ => $answers, 11 ‘correct‘=>$row[‘correct‘], 12 ); 13 } 14 $json=json_encode($arr); 15 echo $json; 16 ?>
Jquery,ajax返回json数据后呈现到html页面的$.post方式。
标签:
原文地址:http://www.cnblogs.com/kangshuai/p/4955238.html