使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；

效果图：

一：返回数据是text时

1.表单代码：

<body>
    <form action="#" method="post">
        姓名：<input type="text" id="name"><br>
        编号：<input type="text" id="num"><br>
        内容：<textarea cols="18" rows="10" style="overflow-y: scroll;" id="neirong"></textarea><br>
        <input type="button" id="tijiao" value="提交"/>
        <input type="reset">
    </form>
    <table border="1" cellspacing="0" cellpadding="0" id="tianjia">   //定义一个table，准备接收数据
        
        
    </table>

2.jquery代码：

<script type="text/javascript">
  $("#tijiao").click(function(){
      var name=$("#name").val();
      var num=$("#num").val();
      var neirong=$("#neirong").val();

      if(name=="" || num=="" ||neirong=="")   //判断非空
      {
          alert("不能有空");
          return false;                   //如果非空，终止程序
      }

       else{
      $.ajax({
          type:"post",
          url:"chuli.php",
          async:true,
          data:{name:name,num:num,neirong:neirong},
          dataType:"TEXT",
          success:function(data)
          {
              var str="<tr><th>"+"姓名"+"</th><th>"+"编号"+"</th><th>"+"内容"+"</th></tr>"; //定义表格的头行
              
              var attr=data.split("|");        //把data数据分割成一个二维数组attr
              
              for(var i=0;i<attr.length;i++)   
              {
                  var attr1=attr[i].split("^");    //把二维数组attr的每一项按^分割为一位数组
                  str=str+"<tr><td>"+attr1[1]+"</td><td>"+attr1[2]+"</td><td>"+attr1[3]+"</td></tr>"; //造行与列，取一维数组中的项添加到表格的列中
              }
              $("#tianjia").html(str);   //把拼接的变量添加到表格中
              }
          
      });
      
      }
  })

</script>

3.处理页面代码

$name=$_POST["name"];
$num=$_POST["num"];
$neirong=$_POST["neirong"];
include("../gongju/DBDA.class.php");
$db=new DBDA();
$sql="insert into renyuan values('','{$name}','{$num}','{$neirong}')";  //把数据插入到表格中
if($db->Query($sql,0))               //如果插入，则显示
{
    
    $sql1="select * from renyuan";
    $attr=$db->StrQuery($sql1);   //调用strquery方法，返回字符串类型的数据
    echo $attr;              
}

二：返回数据类型是json格式时

1.把dataType改成“json”

2.处理页面中的输出方式

其他方式跟text一样

 

posted @ 2017-01-02 20:34  88旧港  阅读(1278)  评论(0)    收藏  举报