Thinkphp結合layer彈窗加ajax完成增刪改查方法

阿新 • • 發佈：2018-11-10

Thinkphp結合layer彈窗加ajax完成增加方法

給每個input框繫結id就行了
這是前端頁面

<!DOCTYPE html>
<html>
  
  <head>
{include file="public/head" title="頂部開始" /}
    <!-- 讓IE8/9支援媒體查詢，從而相容柵格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js" 
></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body layui-anim layui-anim-up">
    <form action="" method="post" class="layui-form">
      <div class 
="layui-form-item">
          <label for="L_email" class="layui-form-label">
              <span class="x-red">*</span>管理員名稱
          </label>
          <div class="layui-input-inline">
              <input type="text"  name="name" class="layui-input" id="name"> 
//繫結ld
          </div>
          <div class="layui-form-mid layui-word-aux">
          </div>
      </div>
      <div class="layui-form-item">
          <label for="L_username" class="layui-form-label">
              <span class="x-red">*</span>手機號碼
          </label>
          <div class="layui-input-inline">
              <input type="text"  name="phone" class="layui-input" id="phone">//繫結ld
          </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="x-red">*</span>請選擇許可權</label>
        <div class="layui-input-block" style="width:34%;">
          <select name="type" lay-verify="required" id="type">
            <option value=""></option>
            <option value="1">超級管理員</option>
            <option value="0">普通操作員</option>
          </select>
        </div>
      </div>          
      <div class="layui-form-item">
          <label for="L_pass" class="layui-form-label">
              <span class="x-red">*</span>密碼
          </label>
          <div class="layui-input-inline">
              <input type="password"  name="pass" class="layui-input" id="pass">//繫結ld
          </div>
          <div class="layui-form-mid layui-word-aux">
              6到16個字元
          </div>
      </div>
      <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
              <span class="x-red">*</span>確認密碼
          </label>
          <div class="layui-input-inline">
              <input type="password"  name="pass" class="layui-input" id="pass2">
          </div>
      </div>
       <div class="layui-form-item" >
          <label class="layui-form-label"><span class="x-red">*</span>性別</label>
          <div class="layui-input-block"  >
            <input type="radio" name="sex" value="1" title="男"  id="sex" checked="">//繫結ld
            <input type="radio" name="sex" value="2" title="女" id="sex">//繫結ld
          </div>
        </div>       
      <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <a href="javascript:;" id='confirm' class="layui-btn" >立即提交</a>//繫結事件，觸發confirm方法
      </div>
  </form>
</div>
<script>
$("#confirm").click(function(){
    var name   = $.trim($('#name').val());
    var phone  = $.trim($('#phone').val()); 
    var type  = $.trim($('#type').val()); 
    var pass  = $.trim($('#pass').val()); 										//先var
    var pass2  = $.trim($('#pass2').val()); 
    var sex  = $.trim($('#sex').val()); 
    var index=parent.layer.getFrameIndex(window.name);  
  
    if(name==''){
        layer.msg('請輸入管理員名稱', {icon: 0});
        return false;
    }
    if(phone==''){
        layer.msg('請輸入手機號碼', {icon: 0});
        return false;
    }
    if(type==''){
        layer.msg('請選擇許可權', {icon: 0});
        return false;
    }
    if(pass==''){
        layer.msg('請輸入密碼', {icon: 0});
        return false;
    }    
    if(pass!=pass2){
      layer.msg('兩次密碼不一致', {icon: 0});
      $('#pass').val("").focus(); 
      $('#pass2').val("").focus();
      return false;
    } 

    $.ajax({
            url:"{:url('user_add')}",  //這裡跳到後臺控制器
            data:{name:name,phone:phone,type:type,pass:pass,sex:sex},  //注意這裡一一對應要傳的引數
            type:"POST",
            success: function(data){
                if (data.status==1) {
                  layer.msg('新增成功！',{time:1000,icon: 1},function(){
                    window.parent.location.reload();
                    parent.layer.close(index);     //新增成功之後銷燬當前彈窗
                  })   

                }else{
                    layer.msg(data.info,{time:2000,icon: data.status});
                }
            }
        });   
    });
</script>

  </body>

</html>

這裡是控制器部分

    public function user_add(){
       $time = time();
       if(Request::instance()->isAjax()){
           $name=Db::table('shop_admin')->where(['name'=>input('post.name')])->count();
           if($name >=1){
               return json(["info"=>"該使用者名稱已被佔用!","status"=>0]);
           }
           $res = Db::table('shop_admin')->
           insert([
                   'name'=>input('post.name'),
                   'phone'=>input('post.phone'),
                   'type'=>input('post.type'),
                   'password'=>md5(input('post.pass')),
                   'sex'=>input('post.sex'),
                   'time'=> $time
                   ]);
           if($res){
               return json(["info"=>"新增成功！","status"=>1,"url"=>url('user/index')]);
           }else{
               return json(["info"=>"註冊失敗!","status"=>5]);
           }
       }
   }

Thinkphp結合layer彈窗加ajax完成增刪改查方法

Thinkphp結合layer彈窗加ajax完成增加方法給每個input框繫結id就行了這是前端頁面 <!DOCTYPE html> <html> <head> {include file="public/head

ajax參考增刪改查 AJAX做增刪改查詳細！

AJAX做增刪改查詳細！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

Angular.js 用Angular.js加Jquery做增刪改查

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <script src="js/jq

四、Hibernate完成增刪改查操作

沒什麼可說的,直接上程式碼 // 測試插入一條資料 @Test public void testSave() { Session session = null; Transaction tr = null; try { // 獲取會話 session

Ajax全套增刪改查：

Ajax全套增刪改查：注意：使用Ajax的前提是，你必須要匯入jquery的那個庫檔案。即：jquery-3.2.1-min.js檔案。下面的程式碼是寫在zhanghao_create.js檔案中的，然後在zhanghao_create.jsp頁面中使用script標籤將該js

使用JDBC連線MySQL資料庫並且完成增刪改查完整程式碼

完整路徑截圖： **//BaseDao.java檔案** package cn.utils; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement

用Angular.js加Jquery做增刪改查

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首頁</title> <scrip

idea+SpringBoot整合Mybatis完成增刪改查功能

參考地址：https://blog.csdn.net/baidu_36216018/article/details/79466935 1.idea建立spring boot專案 2.pom.xml檔案： <?xml version="1.0" encoding

TodoList React+NODE連結mysql資料庫完成增刪改查DEMO

遇到的難點：跨域：原因是通過gulp啟動的React專案等於是從本地路徑訪問網路的NODE於是會造成跨域問題解決：在後面加上了跨域訪問設定 res.writeHead(200, {'Content-Type': 'text/plain; charset=utf8'

使用kibana給elasticsearch完成增刪改查資料

首先我們啟動elasticsearch、elasticsearch-head和kibana (前提是已經安裝好了) elasticsearch的啟動只需在 cmd 中執行 elasticsearch.bat檔案 elasticsearch-head 需要安裝node.j

SpringBoot整合Mybatis完成增刪改查功能

2.建立一個專案：① new--->Spring Stater project②③：搜尋需要的依賴包④：我們發現上一步選擇的依賴，在pom.xml檔案中已經自動新增到我們的檔案中了。2. 開始編寫程式碼和一些配置先看一下我的專案的最後目錄結構：①：自己建立一個數據表

springboot完成增刪改查簡單案例

1,POM<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/

如何用tep完成增刪改查介面自動化

tep的設計理念是讓人人都可以用Python寫自動化，本文就來介紹如何用tep完成增刪改查介面自動化。 # 環境變數編輯`fixtures/fixture_admin.py`： ```python "qa": { "domain": "https://qa.com", }, ``` 修改`q

Ajax中用layer彈出層並刷新頁面的方法

ble ajax location index window ont tab delet delete $.post("DeleteHandler.ashx", { "table": "Contents", "ID": vals }, fun

Thinkphp5結合layer彈框插件修改默認的提示信息

com 分享圖片 pro jquer ado ext 記得文件 water TP5的默認提示效果啊，很醜有沒有！！1 那就用layer插件改吧插件地址插件引入<script src="jQuery的路徑"></script> &

layer彈窗第二個按鈕

icon title 千萬組件 func 彈窗 function 哈哈註意 layer彈窗組件，第二個按鈕是btn2，第三個按鈕是btn3。千萬別當成no了。哈哈。 layer.alert(‘確定刪除嗎？‘, { title: ‘提示‘, icon:

使用layer彈窗提交表單時判斷表單是否輸入為空

使用layer彈窗提交表單時判斷表單是否輸入為空獲得 layer 檔案包後，解壓並將 layer 整個資料夾（不要拆分結構）存放到你專案的任意目錄，使用時，只需引入 layer.js 即可使用時一定他要先引入jq1.8，或者以上版本！！！下面是提交表單的實列

layer彈窗如何關閉並開啟新頁面-圖片地址找不到的情況下設定預設圖片

之前看一個同事每天寫部落格，對學習有很大幫助，所以想效仿一下，不求太多，但求自己所得的知識能記的更深刻一點。今天是第一次，不做太多內容，就分享一下幾個小的知識點，本篇部落格因為內容比較零散，所以會不定期更新，知識點已經記牢的童靴，請自行忽略。一、layer彈窗

layer彈窗彈出位置不在瀏覽器視窗居中的問題的解決方法

問題描述： layer彈窗的彈出位置不在瀏覽器視口居中，而是根據頁面內容居中了，導致頁面內容很長時，看不到彈窗，滾動滾動條才能看到，通常情況下，這並不滿足需求。解決方法：使用parent.layer來呼叫彈窗，這樣，彈窗的位置就會相對於上一級的window定位，而不是當前所在的win

Vue系列之 => 結合ajax完成列表增刪查

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content

Thinkphp結合layer彈窗加ajax完成增刪改查方法

Thinkphp結合layer彈窗加ajax完成增加方法

相關推薦