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

 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 ?>

时间: 2024-10-05 09:22:18

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

jquery实现ajax,返回json数据

jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback是回调函数,而type是返回数据的类型.type有xml,html,json,text等. 首先,页面引用jquery.js 在页面写ajax处理的js函数 1 2 3 4 5 6 7 8 9 10 11 12 13 function initMeeting() {             $.ge

ajax返回json数据

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Ajax json test</title> <script language="

ajax 返回json数据操作

例子: 1 $.ajax({ 2 url: "<?=Url::toRoute('add-all-staff')?>", 3 type: 'get', 4 dataType: 'json', 5 success: function (data) { 6 if (data) { 7 var Element = $(".staff_names"); 8 var user_ids = []; 9 10 for (var key in data) { 11 Ele

C# Ajax 返回json数据--前后台交互

本人实习生一枚,遇到这个问题,网上找的试了试基本不可以,自己搞了一下.可以供新手参考,大神如有指点,请不吝赐教. 版权声明:本文为博主原创文章,未经博主允许不得转载. 前台JavaScript代码: 1 <script> 2 function checkLogin() { 3 var name = $("#name").val(); 4 var passward = $("#password").val(); 5 console.log(name); 6

jquery $.post 返回json数据

$(function () { $("#prompt").hide(); $("#searchIpt").keyup(function () { var key = $("#searchIpt").val(); if (key != undefined && key != null && key.length > 0) { $.post("Query.aspx", { "key&

MVC通过JsonResult返回Json数据,然后在视图页面中通过@Html.Partial()方法加载分部视图

首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } public string Name { get; set; } public string Sex { get; set; } public int Age { get; set; } } 然后新建一个Student控制器: using JsonDataWithMVC.Models; using Sy

转载:深入了解Struts2返回JSON数据的原理及具体应用范例

早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具体应用了,但苦于一直忙于工作难以抽身, 渐渐的也淡忘了此事.直到前两天有同事在工作中遇到这个问题,来找我询问,我又细细地给他讲了一遍之后,才觉得无论如何要抽一个小时的时间来写这篇文章, 从头到尾将Struts2与JSON的关系说清楚. 其实网络中,关于这个问题的答案已是海量,我当初也是从这海量的答案中吸收精华,才将“Struts2返回JSON数据”这个问题搞清楚的.但 是这些海量的答案,有一个共同

调用AJAX返回JSON、XML数据类型

1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

ON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. XHTML  <ul id="userlist">    <li><a href="#" rel="1">张三</a></li>    <li><a href=&quo