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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
Ext面向对象开发实践(续)
Nov 18 Javascript
JavaScript中的prototype使用说明
Apr 13 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
canvas的神奇用法
Feb 03 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
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 MemCached 高级缓存应用代码
2010/08/05 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
基于Python实现一个简单的银行转账操作
2016/03/06 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
对python_discover方法遍历所有执行的用例详解
2019/02/13 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python 线程的五个状态
2020/09/22 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
linux面试相关问题
2013/04/28 面试题
小区停车场管理制度
2014/01/27 职场文书
学生周末长期请假条
2014/02/15 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
解除劳动合同证明书
2014/09/26 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS