Ajax 加载数据 练习代码


Posted in Javascript onJanuary 05, 2017

前端与js代码

<h1>显示数据</h1>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td>代号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>民族</td>
    <td>生日</td>
    <td>操作</td>
  </tr>  
  <tbody id="bg">    
  </tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
   jiazai;
});

//加载数据的方法
function jiazai
{
  //异步  
  $.ajax({
 url:"jiazai.php",
 dataType:"TEXT",
 success: function(data){
 var hang = data.split("|");
 
 var str = "";
 
 for(var i=0;i<hang.length;i++)
 {
 var lie = hang[i].split("^");
 str += "<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><input type='button' value='删除' class='shanchu' code='"+lie[0]+"' /></td></tr>";
 }
 
 $("#bg").html(str);
 
 $(".shanchu").click(function{
 
 var code = $(this).attr("code");
 $.ajax({
 url:"shanchu.php",
 data:{c:code},
 type:"POST",
 dataType:"TEXT",
 success: function(d){
 if(d.trim=="OK")
 {
 //重新加载
 jiazai;
 }
 else
 {
 alert("删除失败");
 }
 }
 });
 })
 }
    });
}
</script>

再做个处理页面jiazai.php

<?php
include("DBDA.class.php");
$db = new DBDA;
$sql = "select * from info";
echo $db->StrQuery($sql);

再做个删除 shanchu.php

<?php
include("DBDA.class.php");
$db = new DBDA;
$code = $_POST["c"];
$sql = "delete from info where code='{$code}'";
if($db->Query($sql,0))
{
  echo "OK";
}
else
{
  echo "NO";
}

主要学了ajax的封装方法,方法就叫做加载数据,当要求页面不刷新的时候,就用这个方法就可以
页面加载数据完成后,要调一遍
删除完之后需要再加载一遍,要在调一遍
Ajax 默认是异步的
异步就是 ajax去调处理页面,处理数据的时候,代码继续往下走

Javascript 相关文章推荐
MSN消息提示类
Sep 05 Javascript
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
vue实现评论列表功能
Oct 25 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 #Javascript
微信小程序 Template详解及简单实例
Jan 05 #Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 #Javascript
微信小程序 数组中的push与concat的区别
Jan 05 #Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
实例讲解php实现多线程
2019/01/27 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
django 常用orm操作详解
2017/09/13 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python实现四人制扑克牌游戏
2020/04/22 Python
中科前程Java笔试题
2016/11/20 面试题
洗发露广告词
2014/03/14 职场文书
初中班主任评语大全
2014/04/24 职场文书
冬季施工防火方案
2014/05/17 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
MySQL深分页问题解决思路
2022/12/24 MySQL