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

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

阿新 • • 發佈：2019-02-01
//渲染頁面 $.ajax({ url:"bc.php", type:"get", data:{ action:"get" }, dataType:"json", success:function (data) { $("#tab").append(change(data)) } }) //增加 $("#add").click(function () { // console.log(getVal($(".like")))
// console.log(arr,$("#username").val(),$("#pwd").val(),$("#age").val(),$(".sex:checked").val(),$("#tel").val(),$("#datatime").val()) $.ajax({ url:"bc.php", type:"get", data:{ action:"add", username:$("#username").val(), pwd:$("#pwd"
).val(), age:$("#age").val(), sex:$(".sex:checked").val(), tel:$("#tel").val(), datatime:$("#datatime").val(), love: getVal($(".like")) }, dataType:"json", success:function (data) { if(data.flag==true){ alert("新增成功"
) $('#addmyModal').modal('hide') window.location.reload() }else { alert("失敗") $('#addmyModal').modal('hide') window.location.reload() } } }) }) //刪除 //單刪 $(document).on("click",'#del',function () { console.log( $(this).attr('title')) $.ajax({ url:"bc.php", type:"get", data:{ action:"del", id: $(this).attr('title'), }, dataType:"json", success:function (data) { if(data.flag==true){ alert("刪除成功") window.location.reload() } } }) }) //批量刪除 $("#delAll").click(function () { console.log(getVal($(".che"))) $.ajax({ url:"bc.php", type:"get", data:{ action:"delall", id:getVal($(".che")), }, dataType:"json", success:function (data) { if(data.flag==true){ alert("刪除成功") window.location.reload() }else { alert("刪除失敗") window.location.reload() } } }) }) //查詢 $('#sea').click(function () { console.log($("#seach").val()) $.ajax({ url:"bc.php", type:"get", data:{ action:"search", txt:$("#seach").val() }, dataType:"json", success:function (data) { console.log(data) $("#tab").html(change(data)); // window.location.reload() } }) }) //修改 //1.先查詢 var id=0; $(document).on('click','#upd',function () { id=$(this).attr('title') // console.log(id); $.ajax({ url:"bc.php", data:{ action:"upd", id:id }, dataType:"json", success:function (data) { $("#user").val(data[0].username) $("#pwds").val(data[0].pwd) if(data[0].sex=="男"){ $(".sexs").eq(0).attr("checked",true) }else if(data[0].sex=="女"){ $(".sexs").eq(1).attr("checked",true) } $("#ages").val(data[0].age) $("#tels").val(data[0].tel) $("#datatimes").val(data[0].dates) $($(".likes")).val(setChecked(data[0].love)) } }) }) //2.在修改 $("#update").click(function () { console.log(getVal($(".love"))) // console.log($("#user").val(),$("#pwds").val(),$("#ages").val(),$(".sexs:checked").val(),$("#tels").val(),$("#datatimes").val()) $.ajax({ url:"bc.php", type:"get", data:{ action:"update", id:id, username:$("#user").val(), pwd:$("#pwds").val(), age:$("#ages").val(), sex:$(".sexs:checked").val(), tel:$("#tels").val(), datatime:$("#datatimes").val(), love: getVal($(".love")) }, dataType:"json", success:function (data) { $('#updModal').modal('hide') window.location.reload() } }) }) function change(data) { var html="" $(data).each(function (i,v) { html+=" <tr>\n" + "<td><input type=\"checkbox\" class=\"che\" value="+data[i].id+"></td>" + "<td>"+data[i].id+"</td>\n" + "<td>"+data[i].username+"</td>\n" + "<td>"+data[i].pwd+"</td>\n" + "<td>"+data[i].age+"</td>\n" + "<td>"+data[i].sex+"</td>\n" + "<td>"+data[i].tel+"</td>\n" + "<td>"+data[i].dates+"</td>\n" + "<td>"+data[i].love+"</td>\n" + "<td>\n" + "<button id=\"del\" title="+data[i].id+">刪除</button>\n" + "<button id=\"upd\" title="+data[i].id+" data-toggle='modal' data-target='#updmyModal'>修改</button>\n" + "</td>\n" + "</tr>" }) return html } //獲取多選框的值 function getVal(str) { var arr=[] for (var i=0;i<str.length;i++){ if(str[i].checked){ arr.push(str[i].value) } } return arr.join(",") console.log(arr) } //多選框預設選中 function setChecked(str) { var arr=str.split(","); for (var i=0;i<arr.length;i++){ if(arr[i]=="睡覺"){ $(".love").eq(0).attr("checked",true) }else if(arr[i]=="玩遊戲"){ $(".love").eq(1).attr("checked",true) } else if(arr[i]=="看電視"){ $(".love").eq(2).attr("checked",true) }else if(arr[i]=="跑步"){ $(".love").eq(3).attr("checked",true) }else if(arr[i]=="看書"){ $(".love").eq(4).attr("checked",true) } } }

相關推薦

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

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

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

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

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層裡面的包括增刪改查等方法的物件，以此實現對資料庫裡面的資料的增刪改查，最後返回頁