Jquery,ajax返回json数据后呈现到html页面的$.post方式。

时间:2023-03-08 17:26:03
Jquery,ajax返回json数据后呈现到html页面的$.post方式。

     ------------------------------------------------------完整版----------------------------------------------------------------------------
$(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);
xuanze1.html("&nbsp;" + xuanze1.attr("id") + "." + item);
});
var result=0; //声明一个判断用户答案对错的初始变量
$(".xuanze1").click(function () {
if($(this).attr("id")==data[index]["correct"]){
result=++result;
}
// alert(result);
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("&nbsp;" + xuanze1.attr("id") + "." + item);
});
//alert("正确答案为"+data[index]["correct"]+" 即将进入下一题");
}else{
$("#anwser1").hide();
$("#fenxiang").show();
$("body").css("background-image","url(images/bg_share.jpg)");
//根据用户选择的测试类别进行判断输出
switch(hol){
case'ad':hol='广告策划师';
break;
case'web':hol='WEB前端工程师';
break;
case'produce':hol='产品专员';
break;
case'ui':hol='UI设计师';
break;
case'php':hol='PHP工程师';
break;
case'java':hol='Java工程师';
break;
case'and':hol='Android工程师';
break;
}
//根据答对题目的个数分配比例
switch(result){
case 0:result='28%';
break;
case 1:result='58%';
break;
case 2:result='78%';
break;
case 3:result='93%';
break;
}
$("#fenxiang #p111").html(result);
$("#fenxiang #type111").html(hol);
}
});
}, "JSON");
});
});

 <div id="anwser1" style="display:none">
<div id="question">
<p id="p1"></p> </div>
<div id="chose">
<div id="A" class="xuanze1"></div>
<div id="B" class="xuanze1"></div>
<div id="C" class="xuanze1"></div>
</div>
</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("&nbsp;" + 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("&nbsp;" + xuanze1.attr("id") + "." + item);
});
}else{
$("#anwser1").hide();
$("#fenxiang").show();
}
});
}, "JSON");
});
});
 <?php
include_once("conn.php");
$types=$_POST['types'];
$sql="select distinct* from test01 where types='$types' order by rand() limit 0,3";
$query = mysql_query($sql,$conn);
while($row=mysql_fetch_array($query)){
$answers = explode('###',$row['answer']);
$arr[]= array(
'question' =>$row['question'],
'answers' => $answers,
'correct'=>$row['correct'],
);
}
$json=json_encode($arr);
echo $json;
?>

Jquery,ajax返回json数据后呈现到html页面的$.post方式。