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 相关文章推荐
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
node.js从数据库获取数据
May 08 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
原生js实现购物车
Sep 23 Javascript
如何手写一个简易的 Vuex
Oct 10 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
使用python实现扫描端口示例
2014/03/29 Python
python类的继承实例详解
2017/03/30 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python单元和文档测试实例详解
2019/04/11 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
django基础学习之send_mail功能
2019/08/07 Python
Python中有几个关键字
2020/06/04 Python
什么是python的自省
2020/06/21 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
求职信范文英文版
2014/01/05 职场文书
办公室文员工作职责
2014/01/31 职场文书
公司联欢会策划方案
2014/05/19 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
工会文体活动总结
2015/05/07 职场文书