ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习

网页之间传输的三种方式:TEXT、JSON、XML。

本章将讲解带有TEXT形势的ajax网页传输

第一:body部分代码

<title>ajax中TEXT讲解并且带有删除功能的表格</title>
<script src="jquery-2.0.0.min.js"></script>
<style type="text/css">
.sc
{
	width:70px;
	height:30px;
	background-color:#3FF;
	color:#F00;
	text-align:center;
	line-height:30px;
	vertical-align:middle;
	font-size:20px;
}
.sc:hover
{
	cursor:pointer;
	background-color:#096;
}
</style>
</head>

<body>
<input type="button" value="显示数据" id="btn"/>
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">

</table>
</body>

  

第二:点击“显示数据”需要用到的chuli.php代码

<?php
 include("DBDA.class.php");
 $db=new DBDA();

 $sql="select * from info";

 //自己写语句
 /*$attr=$db->Query($sql);

 $str="";
 foreach($attr as $v)
 {
	 $str=$str.implode("^",$v);
	 $str=$str."|";
 }

 $str=substr($str,0,strlen($str)-1); //截取最后的“|”*/

 //调用封装类里面的函数
 $re=$db->StrQuery($sql);

 echo $re;

  

AJAX调用返回字符串所引用的StrQuery()函数

//AJAX调用返回字符串
    function StrQuery($sql,$type=0,$ku="mydb")
	{
		$db=new MySQLi($this->host,$this->uid,$this->pwd,$ku);

		!mysqli_connect_error() or die ("连接失败");

		$result=$db->query($sql);

		//当为查询语句时
		if($type==0)
		{
			$attr=$result->fetch_all();
			$str="";

			for($i=0;$i<count($attr);$i++)
			{
				for($j=0;$j<count($attr[$i]);$j++)
				{
					$str=$str.$attr[$i][$j];
					$str=$str."^";
				}
				$str=substr($str,0,strlen($str)-1);
				$str=$str."|";
			}
			$str=substr($str,0,strlen($str)-1);

			return $str;
		}
		//增删改语句
		else
		{
			if($result)
			{
				return "OK";
			}
			else
			{
				return "NO";
			}
		}
	}

  

第三:JScript中运行的“显示数据”用到的js代码函数

function Showall()
		 {
			 $.ajax({

			 async:false,
			 url:"chuli02.php",
			 dataType:"TEXT",
			 success: function(data){

				 var str="<tr align=‘center‘><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td><tr>";

				 var hang=data.split("|");  //以“|”截取

				 for(var i=0;i<hang.length;i++){

					 var lie=hang[i].split("^");

					 //str+="<tr align=‘center‘><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td><div class=‘sc‘ bs=‘"+lie[0]+"‘>删除</div></td></tr>";

					 str+="<tr align=‘center‘>";

					for(var j=0;j<lie.length;j++)
					{
						str+="<td>"+lie[j]+"</td>";
					}

					str+="<td><div class=‘sc‘ bs=‘"+lie[0]+"‘>删除</div></td>";

					str+="</tr>";
				   }

				   $("#xianshi").html(str);
				 }
			 })

  

第四:表格中点击“删除”后台运行的代码delete.php

<?php
$code=$_POST["code"];
include("DBDA.class.php");
$db=new DBDA();

$sql="delete from info where code=‘{$code}‘";

$r=$db->Query($sql,1);  //1代表增删改,默认0代表查询
if($r)
{
	echo "OK";
}
else
{
    echo "NO";
}

  

第五:JScript中“删除”用到的js函数代码

 function BindCK(){

			 $(".sc").click(function(){

				 var code=$(this).attr("bs");

				 $.ajax({

				 url:"delete03.php",
				 data:{code:code},
				 type:"POST",
				 dataType:"TEXT",
				 success:function(data){

					 if(data=="OK"){

						 Showall();
						 BindCK();

						 }
					 else{

						 alert("删除失败!");
						 }

					 }
				 })

				 })

			 }

  

第六:JScript中两个函数代码整合在一起的调用的代码

     $("#btn").click(function(){

		Showall();

		BindCK();

	 })

  

时间: 2025-01-02 16:02:52

ajax中网页传输(一)TEXT——带有删除功能的数据库表格显示练习的相关文章

ajax中网页传输(三)XML——下拉列表显示练习

XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML的形势为 <xml version='1.0'> <Nation> <one> <code>n001</code> <name>汉族</name> </one> <two> <code>n002</code> <name>苗族</name> </two> <

ajax中网页传输(二)JSON——下拉列表显示练习

以json返回数据类型显示“民族下拉列表” 第一:body页面显示部分 <title>JSON下拉显示Nation表中的数据</title> <script src="jquery-2.0.0.min.js"></script> </head> <body> <h1>用下拉显示Nation表中的数据</h1> <select id="sel"> </se

【Android-EditText】自定义带删除功能的EditText

我们经常在一些应用中见到输入框带有删除功能,今天我们就来实现这个功能(文字组织能力不强,大家随便看看).主要是记录一下自己的学习经历,如果对大家有帮助,我会更开心的. 先上图: 实现要点: 1.当输入框为空时,删除按钮隐藏: 2.当输入框不为空时,显示删除按钮. 核心代码: package com.example.view; import com.example.ui.R; import android.content.Context; import android.graphics.Rect;

ajax“显示弹窗详情”和“删除”功能练习

1.查看详细信息,以弹窗的形式显示,使用ajax 2.批量删除 “查询”功能可以参考前面的文章,这里只讲解ajax“显示弹窗详情”和“删除”功能 第一:在body中的代码 <title>ajax汽车网页查询</title> <script src="jquery-2.0.0.min.js"></script> <script type="text/javascript" src="tanchuang.j

ajax中的stasus错误详解

一.英文版解析 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loading) the send( ) method has been invoked, request in progress. 2: (Loaded) the send( ) method has completed, entire response received. 3: (Interactive) the response is be

ajax不跳转页面的快速删除操作,可添加美观样式

以前我们讲的删除是利用嵌入php代码,跳转到另一个页面,从而降低了删除速度,但我们今天讲的利用ajax不仅可以达到不跳页面快速删除,并且能添加特效来美化页面. 上代码,我们先来做主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

使用HTML5中postMessage 实现ajax中的POST跨域问题

HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度:IE8+,firefox4+,chrome8+  opera10+ 1. 首先,要想接收从其他的窗口发过来的消息,就必须对窗口对象的message事件进行监听,如下代码: window.addEventListener(“message”, function(){},false); 2. 其次,需要

AJAX 中Sys.WebForms.PageRequestManager的事件激发顺序

测试代码: [c-sharp] view plaincopy 测试代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="AjaxCtpWebDemo.Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

Ajax中返回数据的格式

Ajax中常见的返回数据的格式有三种:分别为文本,XML和JSON 返回的文本格式我们在上一堂课Ajax基础介绍中已经介绍过了 Ajax.php Form.html:通过Ajax对象的responseText属性就可以获取到返回的文本信息 XML格式 XML文件具有的几大特点: 标签没有预定义,开发者根据自己的需求发明标签 结构清晰,具有自我描述性.从XML文档就可以看出数据的内容 都是双标签 和HTML相似,同样也具有树结构 XML文件示例 Ajax返回XML示例 核心代码: 需要将MIME类