效果图：

一：返回数据是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一样

使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；的更多相关文章

  1. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

  2. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  3. ajax——三级联动下拉列表框的优化（简化页面，用jquery插件代替原来页面代码，返回处理数据类型为"TEXT"）

    数据库: 主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. Ajax回退刷新页面问题的解决办法

    在脚本之家看到一篇文章,觉得以后可能会用上,但是竟然不能收藏,所以只能将其转到博客园. 以下是原文地址: http://www.jb51.net/article/87856.htm   这篇文章主要介 ...

  5. Jquery Ajax的时候 老是返回到 error，是因为json格式不正规的原因

    Jquery Ajax的时候 老是返回到 error,是因为json格式不正规的原因: 怪不得不执行,原来我返回的是{success:true,id:1} 这种不规则的字符串,不是严格的json格式, ...

  6. 11月13日上午ajax返回数据类型为JSON数据的处理

    ajax返回数据类型为JSON数据的处理 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. jQuery Ajax无刷新操作

    下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现. //后台实例代码 ashx文件(可替换为从数据库中读取) public void ProcessRequest(HttpCont ...

  8. Jquery Ajax调用aspx页面方法 (转载)

    在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...

  9. Jquery Ajax调用aspx页面实例

    目前,我会的几种asp.net界面与后台代码交互方式有几种: 1.webform+服务器控件交互: 2.webform+jquery+ajax+一般处理程序交互: 3.webform+jquery+a ...

随机推荐

  1. 《Android深度探索》（卷1）HAL与驱动开发读后感：

    第一章:安卓系统移植与驱动开发概述 全书分为4篇,分别从搭建开发环境,Linux驱动和Android HAL的基础知识,开发Linux驱动的高级技术和分析典型的Linux驱动源代码4个方面介绍Andr ...

  2. java运算符

    赋值运算符 int num1=10; int num2=30; System.out.println(num1+num2); 算术运算符 int num=20; System.out.println( ...

  3. 课程笔记：——Javascript 中的预解释1

    1.预解释(变量提升):在当前作用域下,JS代码执行之前,浏览器首先会把所有带var和function关键字的进行提前的声明或者定义var num = 12;声明(declare): var num; ...

  4. 关于ios “<null>”的异常处理

    在iOS开发过程中经常需要与服务器进行数据通讯,但是在数据接通过程中会出现:null "<null>"等问题导致莫名其妙的崩溃. 相信你一定会写各种判断来处理这些异常, ...

  5. 用ul 来制作导航栏的几个要点

    1 ul 1)list-style:none; 3)设置宽度 2)清除浮动的影响,使高度自适应 2 li 1)向左浮动 2)设置margin和padding都为0 3 a 1) dsiplay :bl ...

  6. C++关于Condition Variable

    #include <condition_variable> #include <mutex> #include <future> #include <iost ...

  7. 时间星期农历js

    <script> var CalendarData=new Array(20); var madd=new Array(12); var TheDate=new Date(); var n ...

  8. GSM Hacking Part② ：使用SDR捕获GSM网络数据并解密

    0×00 在文章第一部分 GSM Hacking Part① :使用SDR扫描嗅探GSM网络 搭建了嗅探GSM流量的环境,在第二部中,我们来讨论如何捕获发短信以及通话过程中的流量,从捕获到的数据中解密 ...

  9. SQLHelper

    今天学习了.net后,经过老师的一番讲解,似乎对它越来越渴望了,希望自己在接下来的学习当中,能很好的驾驭.net,加油吧, 下面我分享一个操作SQL数据库的代码大全,谢谢观赏.嘿嘿,还是比较长的哦, ...

  10. 吐槽THINKPHP5命令行

    thinkphp,作为国内开源框架,一直在使用和学习. 但是实在忍不住想要吐槽一下他的开发文档,和 对初学者的不友好,建议刚接触MVC思想的人 还是尽量去使用其他框架当入门. 现在来吐槽一下think ...