使用jquery、ajax不刷新页面打印表格(返回数据类型text、json);
2024-10-16 03:51:01
效果图:
一:返回数据是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一样
最新文章
- [LeetCode] Rotate Function 旋转函数
- C语言-自定义函数
- 上标、下标~不常用的 html 标签
- Java注解入门
- GreenDao数据库框架的配置与增删改查
- IO:InputStream
- <;<;测试驱动开发的艺术>;>;读书笔记
- 词法分析程序 LEX和VC6整合使用的一个简单例子
- MongoDB数据库GroupBy查询使用Spring-data-mongondb的实现
- SHAREPOINT - CAML列表查询
- VC C运行时库(CRTL)的几个版本及选用
- Bootstrap学习 - JavaScript插件
- Java经典编程题50道之二十三
- 思维导图工具XMind下载
- Vue项目碰到";‘webpack-dev-server’不是内部或外部命令,也不是可运行的程序或批处理文件";报错
- python学习—几个简单小程序
- 判断当前用户有无Administrator的权限
- Entity Framework表拆分
- 跑酷游戏的一些bug总结(滥用FixedUpdate的坑)
- WordCount C语言实现求文本的字符数,单词数,行数
热门文章
- android学习之线性布局
- python2.7安装scikit-learn遇到的问题及解决方法
- iOS thirdKeyboard Develop (APP Extension)
- SQL SERVER 2008 r2安装失败之Integration Service
- 关于w3school的html5部分output 元素实例代码(点亲自试一试进去)的问题纠正
- 写简单游戏,学编程语言-python篇
- Java里面,反射父类里面数字类型字段,怎么set值
- 盲注----基于布尔的SQL盲注
- 好用的开源爬虫 jsoup
- Android ListView 多样式Item的一个注意点:(