效果图：

一：返回数据是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. 3D图形图像处理软件HOOPS介绍及下载

    HOOPS 3D Application Framework(以下简称HOOPS)是建立在OpenGL.Direct3D等图形编程接口之上的更高级别的应用程序框架.不仅为您提供强大的图形功能,还内嵌了 ...

  2. JS数组中every(),filter(),forEach(),map(),some()方法学习笔记！

    ES5中定义了五种数组的迭代方法:every(),filter(),forEach(),map(),some(). 每个方法都接受两个参数:要在每一项运行的函数(必选)和运行该函数的作用域的对象-影响 ...

  3. c语言问卷调查

    你对自己的未来有什么规划?做了哪些准备? 找一家公司实习积攒创业基金.努力学习专业知识,从各方面完善自身,参与各项活动如辩论赛,竞赛等锻炼自己. 2.你认为什么是学习?学习有什么用?现在学习动力如何? ...

  4. git学习心得总结

    最近学习git,应为git可以不需要服务器而在任意的Linux机器上管理代码,相对svn和cvs还是有它的优势的,所以我选用了git来管理我的小项目,以后在提供svn的管理. 在使用了一段时间后想写一 ...

  5. AudioUnit 用法

    1.描述音频单元 AudioComponentDescription desc; desc.componentType = kAudioUnitType_Output; desc.componentS ...

  6. MySQL版本升级之5.6到5.7

    两种升级方式 In-Place Upgrade: Involves shutting down the old MySQL version, replacing the old MySQL binar ...

  7. Linq 备忘录

    public class CTest { public int i { get; set; } public string j { get; set; } } 一.Range var items=En ...

  8. Android开源框架：NineOldAndroid

    在android3.0以前的版本,要实现动画,一般是使用NineOldAndroid开源框架,之后,就可以直接使用android提供的animation API了. 仔细看过此开源框架后,可看出此框架 ...

  9. js 表单验证方法二

    function ckReight () { var pass = true; var new = $("#new"); if( new.find('input[name=name ...

  10. Python学习路程day16

    Python之路,Day14 - It's time for Django 本节内容 Django流程介绍 Django url Django view Django models Django te ...