2. 程式人生 > >Bootstrap+jq+jqajax+php+資料庫增刪改查原始碼

Bootstrap+jq+jqajax+php+資料庫增刪改查原始碼

阿新 • • 發佈：2019-01-30
//渲染頁面 $.ajax({ url:"index.php", data:{ action:"get" }, dataType:"json", success:function(data){ var html="" $(data).each(function (i,v) { html+="<tr>" html+="<td><input type='checkbox' title='"
+data[i].id+"' class='che'></td>" html+="<td>"+data[i].username+"</td>" html+="<td>"+data[i].pwd+"</td>" html+="<td>"+data[i].sex+"</td>" html+="<td>"+data[i].love+"</td>" html+="<td>"
+ "<button id='del' title='"+data[i].id+"'>刪除</button>" + "<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" + "</td>" html+="</tr>" }) $("#tab"
).append(html) } }) //增 $("#add").click(function () { // console.log($(".like").length) // console.log($(".sex:checked").val()); //獲取複選框的值 var arr=[] for (var i=0;i<$(".like").length;i++){ if($(".like")[i].checked){ arr.push($(".like")[i].value) } } // console.log($("#username").val(),$("#pwd").val(),$(".sex").val(),arr.join(",")) $.ajax({ url:"index.php", data:{ action:"add", username:$("#username").val(), pwd:$("#pwd").val(), sex:$(".sex:checked").val(), like:arr.join(",") }, dataType:"json", success:function (data) { $("#myModal").modal("hide") window.location.reload() } }) }) // 刪 //單刪 $(document).on("click","#del",function () { // console.log($(this).attr("title")) $.ajax({ url:"index.php", data:{ action:"del", id:$(this).attr("title") }, dataType:"json", success:function (data) { // console.log(data) window.location.reload() $(this).parents().remove() } }) }) //批量刪除 $("#delAll").click(function () { //獲取複選框的值 //宣告陣列用來儲存複選框的選中值 var arr=[] for(var i=0;i<$(".che").length;i++){ if($(".che")[i].checked){ arr.push($(".che")[i].title) } } $.ajax({ url:"index.php", data:{ action:"del", id:arr.join(",") }, dataType:"json", cache:false, success:function (data) { // console.log(data) window.location.reload() $(this).parent().remove() } }) }) // 改 //先查詢 $(document).on('click','#upd',function () { $.ajax({ url:"index.php", data:{ action:"upd", id:$(this).attr("title") }, dataType:"json", success:function (data) { console.log(data) $("#ids").val(data[0].id); $("#user").val(data[0].username); $("#pwds").val(data[0].pwd) // console.log(data[0].sex) if(data[0].sex=="男"){ $(".sexs").eq(0).attr("checked",true) }else { $(".sexs").eq(1).attr("checked",true) } // console.log(.join(",")) var str=data[0].love var arr=str.split(",") for (var i=0;i<arr.length;i++){ // console.log(arr[i]) if(arr[i]=="玩遊戲"){ $(".likes").eq(0).attr("checked",true) }else if(arr[i]=="跑步"){ $(".likes").eq(1).attr("checked",true) }else if(arr[i]=="打籃球"){ $(".likes").eq(2).attr("checked",true) } } } }) }) //在修改 $("#update").click(function () { // alert(1) var arr=[] for (var i=0;i<$(".likes").length;i++){ if($(".likes")[i].checked){ arr.push($(".likes")[i].value) } } // console.log($("#username").val(),$("#pwd").val(),$(".sex").val(),arr.join(",")) $.ajax({ url:"index.php", data:{ action:"update", id:$("#ids").val(), username:$("#user").val(), pwd:$("#pwds").val(), sex:$(".sexs:checked").val(), like:arr.join(",") }, dataType:"json", success:function (data) { $("#upmyModal").modal("hide") window.location.reload() // console.log(data) } }) }) // 查 $("#sel").click(function () { // alert($("#search").val()) $.ajax({ url:"index.php", data:{ action:"query", username:$("#search").val() }, dataType:"json", success:function (data) { $(data).each(function (i,v) { var html="" $(data).each(function (i,v) { html+="<tr>" html+="<td><input type='checkbox' title='"+data[i].id+"' class='che'></td>" html+="<td>"+data[i].username+"</td>" html+="<td>"+data[i].pwd+"</td>" html+="<td>"+data[i].sex+"</td>" html+="<td>"+data[i].love+"</td>" html+="<td>" + "<button id='del' title='"+data[i].id+"'>刪除</button>" + "<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" + "</td>" html+="</tr>" }) $("#tab").html(html) }) } }) }) //按條件查詢 $("#select1").change(function () { // console.log($(this).val()) $.ajax({ url:"index.php", data:{ action:"limits", username:$(this).val() }, dataType:"json", success:function (data) { console.log(data) $(data).each(function (i,v) { var html="" $(data).each(function (i,v) { html+="<tr>" html+="<td><input type='checkbox' title='"+data[i].id+"' class='che'></td>" html+="<td>"+data[i].username+"</td>" html+="<td>"+data[i].pwd+"</td>" html+="<td>"+data[i].sex+"</td>" html+="<td>"+data[i].love+"</td>" html+="<td>" + "<button id='del' title='"+data[i].id+"'>刪除</button>" + "<button id='upd' title='"+data[i].id+"' data-toggle='modal' data-target='#upmyModal'>修改</button>" + "</td>" html+="</tr>" }) $("#tab").html(html) }) } }) })

相關推薦

Bootstrap+jq+jqajax+php+資料庫增刪改查原始碼

//渲染頁面 $.ajax({ url:"index.php", data:{ action:"get" }, dataType:"json", success:function(data

Bootstrap+jq+jqajax+php+資料庫增刪改查原始碼(簡化版)

//渲染頁面 $.ajax({ url:"bc.php", type:"get", data:{ action:"get" }, dataType:"json", success:

PHP封裝資料庫增刪改查

封裝：<?php class mysqlSql{//封裝函式 public $db; public function __construct($dbname){//建構函式 $th

php 使用mysql資料庫增刪改查

為了方便直接，寫成函數了。驚訝於php的簡潔，幾分鐘就搞定了。解釋一下： 編碼 header("Content-type: text/html; charset=utf-8"); 這句可以防止亂碼 連結資料庫地址 使用mysql_connect

PHP MYSQL 增刪改查之增 jsonAdd

應該 php mysql 網站建設 text pos root pass cap _array <?php //header("Content-type: text/html; charset=UTF8"); //header("Content-Type: text

PHP MYSQL 增刪改查之list JsonList

arr roo pass int close lose 127.0.0.1 for 數據 <?php //header("Content-type: text/html; charset=UTF8"); //header("Content-Type: text/ht

PHP MYSQL 增刪改查之刪 jsonDel

let ade content sql數據庫 pre state 網站建設 password roo <?php //header("Content-type: text/html; charset=UTF8"); //header("Content-Type: t

32、mysql資料庫增刪改查

建立資料庫 CREATE {DATABASE|SCHEMA} [IF NOT EXISTS] db_name [DEFAULT] [CHARACTER SET=''] [DEFAULT] [COLLATE=''] IF NOT EXISTS 指定資料庫不存在的時候才建立 CHARACTER SET=

flask和django區別--資料庫增刪改查的區別

flask和django都是一樣的，在你建立了資料模型之後，兩個框架都會給你資料庫操作的api，供你使用；（create retrieve update delete) 假設我們有一個User類 增加（插入）： 對於flask的插入分為三步走的情況： 1：建立python 物件；也就

listview展示網路資料+網路圖片+資料庫增刪改查+fragment

MainActivity package com.bwie.renzhili; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import andr

java實現mysql資料庫增刪改查

1.連線資料庫: import java.sql.Connection; import java.sql.DriverManager; public class DBConnection { static String driver = "com.mysql.jdbc.Driver"; s

Oracle-資料庫增刪改查基本操作

一、建立資料表 1）.建立不存在的新表：  create table tname(   Data_Name Date_Type [default][預設值]  ); 2）.建立已存在表的副本  create table emp1 as selec

1112_Springboot+Mybaits+Mysql資料庫增刪改查操作——上路

Springboot+Mybaits+Mysql資料庫增刪改查操作 瘋人願的瘋言瘋語 2017.11.03 16:37* 字數 754 閱讀 414評論 0喜歡 4 最近在老師的建議下，參加了一個學習小組，主要了解Spring Cloud微服務架構的應用開發，在初次搭建好環境後，這

html5資料庫增刪改查

本文資料庫操作使用的javaScript庫是html5sql.js，官網地址： http://html5sql.com/ 簡介： html5sql是一個讓HTML5 Web Database使用更方便的輕量級JavaScript模組，它的基本功能是提供在一個事務中順序執行SQL語句的結構

SQL Server資料庫————增刪改查

--增刪改查--增 insert into 表名(列名) value(值列表) --刪 delect from 表名 where 條件 --改 update 表名 set 列名=值1,列名2=值2 where 條件 --查 select 列名1,列名2,...from 表名 where 條件 gr

Android : tablayout +側滑選單 + 豎立的tablayout +資料庫增刪改查+XListView+PullToRefresh 綜合

側拉選單 一個XListview載入,一個是PullToRefresh重新整理 一個是本地資料的重新整理一個是網路資料的重新整理 資料庫的增刪查 需要用到的許可權 <uses-permission android:name="android.permission.I

如何寫一個完整課堂管理系統（資料庫增刪改查）

　　一直在聽建民老師說，javaweb的精髓是Jsp+servlet+javabean。在完成這個系統之前，畢竟沒有學習過javaweb，Jsp和servlet我是知道的，但不會在servlet和jsp之間相互傳值以及應用，javabean是一點沒有聽說過。在這樣的基礎下，沒辦法逃脫測試的情況下，只能硬著頭皮

12-9java web 資料庫增刪改查

首先大體的java結構框架是這樣 很重要的一點是建立資料庫的連線 資料庫是一切操作的前提 不管是增加 刪除 修改 查詢 都需要呼叫資料庫連線程式    再就是java的類的編寫  寫完類後需要對其進行增刪改查方法的 編寫   這是dao層的增刪改查的操作

jsp連線資料庫增刪改查

一,建立表 二.將jar包複製匯入到lib資料夾下 三.建立工具包連線資料庫 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLE

Web介面實現資料庫增刪改查過程

實現方法：JSP+Servlet+JavaBean 基本實現思想：jsp檔案為顯示介面，包括增刪改查四個介面，然後使用form或者href超連結的方法將網頁獲得的值傳到Servlet中的方法裡；而servlet方法中呼叫dao層裡面的包括增刪改查等方法的物件，以此實現對資料庫裡面的資料的增刪改查，最後返回頁