效果图：

一：返回数据是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. BOOL和bool的区别

    一. 1.类型不同 BOOL为int型 bool为布尔型 2.长度不同 bool只有一个字节 BOOL长度视实际环境来定,一般可认为是4个字节 3.取值不同 bool取值false和true,是0和1 ...

  2. cocoapods无法使用(mac os 10.11升级导致pod: command not found)

    之前安装了cocoapods, 那么输入 : sudo gem install -n /usr/local/bin cocoapods 如果还不行的话 首先在终端输入 gem sources -l 查 ...

  3. Java特性-Collection和Map

    创建博客的目的主要帮助自己记忆和复习日常学到和用到的知识:或有纰漏请大家斧正,非常感谢! 之前面试,被问过一个问题:List和Set的区别. 主要区别很明显了,两者都是数组形式存在的,继承了Colle ...

  4. 006 复杂的数据类型&函数(方法)

    2016-01-16 1.变量类型int double string char bool decimal变量的使用规则:先声明再赋值最后使用int number;number=10; number=2 ...

  5. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

  6. jacon

    com的线程回收不由java垃圾回收器进行处理,因此,每new一次jacob提供的类就要分配一定大小的内存给该操作,new出来的这个com对象在使用结束之后产生的垃圾java是无法回收的,new出来的 ...

  7. Spark External Datasets

    Spark能够从任何支持Hadoop的存储源来创建RDD,包括本地的文件系统,HDFS,Cassandra,Hbase,Amazon S3等.Spark支持textFile.SequenceFiles ...

  8. matlab初学之strcat、num2str

    文章出处: http://blog.sina.com.cn/s/blog_6fb8aa0d01019id5.html http://wenda.so.com/q/1439143662729624 ht ...

  9. 统计字符串”aaaabbbccccddfgh”中字母个数以及统计最多字母数

    function count(){ var str="shhkfahkahsadhadskhdskdha"; var obj={}; for(var i=0;i<str.le ...

  10. java开发命名规范

    使用前注意事项: 1.  由于Java面向对象编程的特性, 在命名时应尽量选择名词 2.  驼峰命名法(Camel-Case): 当变量名或函式名是由一个或多个单字连结在一起,而构成的唯一识别字时,首 ...