ajax参考增删改查
AJAX做增删改查详细!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head> <body>
<div>
<h1>新增</h1>
辖区:<input type="text" id="xiaqu"/>
<br />
姓名:<input type="text" id="name" />
<br />
性别:<input type="text" id="sex" />
<br />
证件:<input type="text" id="zhengjian" />
<br />
电话:<input type="text" id="tel" />
<br />
住址:<input type="text" id="zhuzhi" />
<br />
<input type="submit" id="tj" value="添加" />
</div>
<div>
<h1>信息</h1>
<table width="100%" border="1px" cellspacing="0" cellspacing="0">
<tr>
<td>辖区</td>
<td>姓名</td>
<td>性别</td>
<td>证件</td>
<td>电话</td>
<td>住址</td>
<td>操作</td>
</tr> <tbody id="aa1">
</tbody>
</table>
<div style="border-left:2px solid #444; border-bottom:#444 2px solid; border-right:2px solid #444; text-align:center; display:none;color:red" id="ts">没有更多信息!!</div>
</div>
<div id="xgnr"> </div>
</body>
</html>
<script type="text/jscript">
jia();
//添加信息
$("#tj").click(function(){ var xq = $("#xiaqu").val();
var name = $("#name").val();
var sex = $("#sex").val();
var zj = $("#zhengjian").val();
var tel = $("#tel").val();
var zz = $("#zhuzhi").val(); $.ajax({
url:"add.php",
data:{xq:xq,name:name,sex:sex,zj:zj,tel:tel,zz:zz},
type:"POST",
dataType:"text",
success:function(data){
if(data=="1")
{
//alert("添加成功");
window.location.href="test.php";
}
else
{
alert("");
} }
})
}) //大方法
function jia()
{
//显示信息
$.ajax({
url:"cha.php",
type:"POST",
dataType:"text",
success: function(data){
var str = "";
if(data=="111")
{
$("#ts").css("display","block");
}
else
{
var hang = data.split("|"); for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); str += "<tr><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td><td>"+lie[5]+"</td><td>"+lie[6]+"</td><td><span class='sc1' bs='"+lie[0]+"'>删除</span> <span class='xg1' bs='"+lie[0]+"'>修改</span></td></tr>";
}
$("#aa1").html(str); //删除信息
$(".sc1").click(function(){
var code = $(this).attr("bs")
if(confirm('确定删除么'))
{
$.ajax({
url:"shanchu.php",
data:{a:code},
type:"POST",
dataType:"text",
success:function(data){
if(data=="1")
{
//alert("删除成功")
window.location.href="test.php";
}
else
{
alert("删除失败") } }
})
}
}) //查询修改的信息
$(".xg1").click(function(){
var code = $(this).attr("bs")
$.ajax({
url:"xiugai.php",
data:{a:code},
type:"POST",
dataType:"text",
success:function(data){
var str = "";
var hang = data.split("|"); for(var i=0;i<hang.length;i++)
{
var lie = hang[i].split("^"); str += "<h1>修改</h1><input type='hidden' id='yc' value='"+lie[0]+"' />辖区:<input type='text' id='xiaqu1' value='"+lie[1]+"'/><br />姓名:<input type='text' id='name1' value='"+lie[2]+"'/><br />性别:<input type='text' id='sex1' value='"+lie[3]+"'/><br /> 证件:<input type='text' id='zhengjian1' value='"+lie[4]+"'/><br /> 电话:<input type='text' id='tel1' value='"+lie[5]+"'/><br />住址:<input type='text' id='zhuzhi1' value='"+lie[6]+"'/><br /><input type='submit' id='xiugai' value='修改' />";
}
$("#xgnr").html(str);
//修改信息
$("#xiugai").click(function(){
var yc1 = $("#yc").val();
var xq1 = $("#xiaqu1").val();
var name1 = $("#name1").val();
var sex1 = $("#sex1").val();
var zj1 = $("#zhengjian1").val();
var tel1 = $("#tel1").val();
var zz1 = $("#zhuzhi1").val();
$.ajax({
url:"xiugaichuli.php",
data:{yc:yc1,xq:xq1,name:name1,sex:sex1,zj:zj1,tel:tel1,zz:zz1},
type:"POST",
dataType:"text",
success:function(data){
if(data=="1")
{
//alert("添加成功");
window.location.href="test.php";
}
else
{
alert("11");
}
}
})
}) }
})
})
}
}
})
}
</script> 全选反选
$("#SelectAll").click(function () {
if ($("#SelectAll").is(":checked")) {
$("[name=r1]:checkbox").prop("checked", true) } else {
$("[name=r1]:checkbox").prop("checked", false)
}
})
==========================
ajax参考增删改查的更多相关文章
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- MVC中的Ajax与增删改查
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
- MVC中的Ajax与增删改查(一)
自入手新项目以来,一直处于加班状态,博客也有两周没更,刚刚完成项目的两个模组,稍有喘息之机,写写关于项目中 的增删改查,这算是一个老生常谈的问题了,就连基本的教材书上都有.刚看书的时候,以为 没什么可 ...
- AJAX做增删改查详细!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- idea原生ajax数据处理(增删改查)
项目名称:Bookstore UI界面 项目文件 操作: jsp代码 <%@ page import="dao.BookDAO" %> <%@ page impo ...
- 通过Ajax实现增删改查
项目链接:https://github.com/shuai7boy/Ajax_CRUD 简要截图:
- MVC中的Ajax与增删改查(二)
上一篇记录的是前台操作,下面写一下后台 ,本来自认为是没有必要做补充,毕竟思路啥的都有,实际上在做删除操作的时候,折腾了一天,还是自己太嫩,逻辑不够严谨,这里作下记录. 关于表结构这里再作下说明: ① ...
- 基于springmvc、ajax,后台连接数据库的增删改查
前言 前段时间在博客园上找了一个springmvc的例子,照着学了一下,算是对springmvc有了一个初步的了解,打一个基础,下面是链接.(我只看了博客,视频太耗时间了) 博客链接:http://w ...
- Asp.Net WebApi学习教程之增删改查
webapi简介 在asp.net中,创建一个HTTP服务,有很多方案,以前用ashx,一般处理程序(HttpHandler),现在可以用webapi 微软的web api是在vs2012上的mvc4 ...
随机推荐
- 『计算机视觉』经典RCNN_其二:Faster-RCNN
项目源码 一.Faster-RCNN简介 『cs231n』Faster_RCNN 『计算机视觉』Faster-RCNN学习_其一:目标检测及RCNN谱系 一篇讲的非常明白的文章:一文读懂Faster ...
- CentOS7 搭建LVS+keepalived负载均衡
1.实验环境 4台节点 Keepalived1 + lvs1(Director1):192.168.31.4 Keepalived2 + lvs2(Director2):192.168.31.3 Re ...
- Hash应用例子
八.Hash应用例子搜索引擎会通过日志文件把用户每次检索使用的所有检索串都记录下来,每个查询串的长度为1-255字节.假设目前有一千万个记录(这些查询串的重复度比较高,虽然总数是1千万,但如果除去重复 ...
- MVC的前端和后端的Model Binding
1.前端提交JSON 字符串 {"id":13,"title":"这里是标题33","day":"2018-8 ...
- Talend 数据转换
2个系统都有客户信息,产品信息. 要从一个系统a导出数据给另一个系统b用. 有2个方法. 1.在a系统的客户表,产品表加一个字段,记录b系统对应的ID,导出时直接用sql转换了. 2. 用ETL工具转 ...
- corePoolSize和maxPoolSize的区别
受限于硬件.内存和性能,我们不可能无限制的创建任意数量的线程,每一台机器允许的最大线程是一个有界值.因此ThreadPoolExecutor管理的线程数量是有界的.线程池就是用这些有限个数的线程,去执 ...
- 【Java算法】输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数
import java.util.Scanner; public class CountZimuShuzi { public static void main(String[] args) { Sys ...
- Win10系列:C#应用控件基础1
Button控件 在Windows应用商店应用的开发中,Button控件是使用比较频繁的控件之一,当用户单击Button控件时,会触发相应的单击事件并在定义好的事件处理方法中执行指定的功能.下面将介绍 ...
- nginx:负载均衡实战(二) keepalived入门
1.keepalived介绍 顾名思义,keepalived就是保持网络在线的,用来保证集群高可用HA的服务软件.主要防止出现单点故障(坏了一个点导致整个系统架构不可用) 2.详解keepalived ...
- OO Summary Ⅲ
规格化设计的发展历史 (这一部分并没有找到答案,于是参考了好黄和温莎莎的blogs) 1950年代,第一次分离,主程序和子程序的分离程序结构模型是树状模型,子程序可先于主程序编写.通过使用库函数来简化 ...