效果图：

一：返回数据是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 Activity中获取当前焦点的控件,自动化输入EditText

    获取焦点的view对象 View view=getWindow().getDecorView().findFocus(); 如果是EditText if(view instanceof EditTex ...

  2. centos 6 安装 gitlib

    安装gitlab-----------1. 下载 gitlabcurl -O https://downloads-packages.s3.amazonaws.com/centos-6.5/gitlab ...

  3. 【python】函数

    内置函数: abs('A') 报错:TypeError: bad operand type for abs(): 'str' 传入的参数类型不对 自定义函数: 1 def my_abs(x): 2 i ...

  4. Apache多站点配置（ubuntu）

      1,先进入Apaches2的目录下 cd /etc/apache2   2,进入sites-available中 cd sites-available vi 000-default.conf   ...

  5. 网页for循环get测试

    for(var i=0;i<10000;i++) { var request = new XMLHttpRequest(); request.open("GET"," ...

  6. 如何在静态博客hexo中只显示摘要信息

    默认情况下hexo博客(如本站)的首页显示的是完整的文章 – 而文章比较长的时候这无疑会带来诸多不遍. 那怎么样才能只显示个摘要呢? 方法说白了,其实很简单 – 只要加入一个<!-- more ...

  7. 字节序相关问题简单总结，LSB与MSB

    细细碎碎的知识点还真是不少啊,今天总结下通信中的数据字节序的问题. 先来认识名词: MSB:Most Significant Bit.    “最高有效位” LSB:Least Significant ...

  8. 接口或者http请求测试工具--chrome plug

    Postman : With Postman, you can construct simple as well as complex requests quickly, save them for ...

  9. 团队开发——冲刺2.e

    冲刺阶段二(第五天) 1.昨天做了什么? 讨论“暂停”功能:编写软件测试计划书(引言.测试内容). 2.今天准备做什么? A.编写软件使用说明书: B.编写软件测试计划书(测试规则.测试环境): C. ...

  10. CxImage图像库的使用 .

    http://blog.csdn.net/wangjie0377/article/details/7830405 CxImage图像库 CxImage下载地址:http://www.codeproje ...