码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-11-11 09:58:14      阅读:321      评论:0      收藏:0      [点我收藏+]

标签:

 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("&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");
            });
});

  
 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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!