1. 程式人生 > >前端jquery 後端 thinkphp 實現區域性重新整理

前端jquery 後端 thinkphp 實現區域性重新整理

本例  用jquery 實現 通過把一個標籤的變數傳遞給後臺處理後,然後返回給前臺另外一個變數
大致流程是這樣的:前端編寫html程式碼 ,加入要區域性重新整理的 jquery程式碼並指定要響應的url,


首先得知道 jquery 是 javascript 的一個框架
接著瞭解 jquery的一些語法
$('#getkey')-----獲取標籤id 為 getkey 的物件
處理函式放在 $(function)({  });裡面
 $('#getkey').click(function(){   ----getkey物件的click函式
 })
 下面是完整的一段 js程式碼
 <script>
  var url='__URL__/GetAppKey';
 $(function(){
    $('#getkey').click(function(){  //單擊 $('#getkey') 標籤 響應
    $.post(url,  
    {
        packagename:$('#package').val()  //傳遞給後臺的引數
    },
     function(success){
       $('#key').val(success);        //成功後返回 ,設定 $('#key')的值
      
    })
       
    });  
  });
 
 jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)--說明
 引數     描述
url     必需。規定把請求傳送到哪個 URL。
data     可選。對映或字串值。規定連同請求傳送到伺服器的資料。
success(data, textStatus, jqXHR)     可選。請求成功時執行的回撥函式。
dataType     可選。規定預期的伺服器響應的資料型別。

            預設執行智慧判斷(xml、json、script 或 html)。
            
對上面那段js程式碼的解釋如下:
 得到標籤 id 為getkey 的物件,單擊該標籤的處理函式如下,
 對 url 這個地址 傳送post 請求,同時帶上引數   packagename:$('#package').val()
 並且 設定 標籤id為key 的值 為 post返回的結果
 
 接下來看 url 對應到 php程式碼
   public function GetAppKey($packagename)
    {
        /*
        計算 APP的key值
        */
       
       echo $key=$packagename;

      }

---------------------------------------完整的程式碼------------------------------------

html  前端 

  <input class="button" id="getkey"  value="獲取APP的唯一key值"/>
 <input class="input" style="width:260px" value="{$key}" id="key" name="key" readOnly="true" />

<script>


  var url='__URL__/GetAppKey';


     $(function(){
    $('#getkey').click(function(){
    $.post(url,  
    {
        packagename:$('#package').val(),
        aa:'aa'
    },
     function(success){
       $('#key').val(success);
      
    })
       
    });  
   });
    
</script>

--------------------後臺php程式碼----------------

 /*
     獲取app的唯一key
    */
    public function GetAppKey($packagename,$aa)
    {
        /*
        計算 APP的key值
        */
       
       echo md5($packagename);
   
      //  $this->ajaxReturn(array($key),'json');
      // $this->assign('key',md5($key));
       //$this->display(AddApp);
      
       
       
       
    }

 

相關推薦

前端jquery thinkphp 實現區域性重新整理

本例  用jquery 實現 通過把一個標籤的變數傳遞給後臺處理後,然後返回給前臺另外一個變數 大致流程是這樣的:前端編寫html程式碼 ,加入要區域性重新整理的 jquery程式碼並指定要響應的url, 首先得知道 jquery 是 javascript 的一個框架 接著

前端如何實現高效協作

一、前後端分離 二、儘量避免後端模板渲染 web渲染方式分為伺服器端渲染和客戶端渲染,推薦使用客戶端渲染,資料通過ajax方式互動 三、儘量避免大量線上除錯 做好本地介面模擬開發 四、規範的介面文件 格式簡潔、介面名、介面描述、介面地址、http方法、引數、響應資料等 五

jquery ajax配合SpringMVC實現區域性重新整理DIV

<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="

jquery load()方法實現區域性重新整理,多張網頁切換(li標籤實現上下頁的切換)

---學習借鑑中--- (1)父頁面插入的位置 <div  id="content" > //id為要重新整理顯示的子頁面的內容 </div> (2)父頁面顯示標籤切換不同html頁面 <ul class="userMenu"> <li

jquery實現區域性重新整理Iframe

1,reload 方法,該方法強迫瀏覽器重新整理當前頁面。   語法:location.reload([bForceGet])   引數: bForceGet, 可選引數, 預設為 false,從客戶端快取裡取當前頁。true, 則以 GET 方式,從服務端取最新的頁面,

Android前端RxJava2+Retrofit2;SpringMvc實現圖片上傳

前言 因為前端使用的rxjava+retrofit+mvp的架構進行實現,因此考慮著圖片上傳的功能也直接用rxjava+retrofit去實現,結果在使用過程中,發現始終有問題,圖片上不去;測試了幾天,嘗試更新成rxjava2+retrofit2進行測試

jquery中ajax 從前端 完整過程解析

幾個原則: 1.get方式訪問瀏覽器時,常加引數緣由: GET訪問瀏覽器是等冪的,就是一個相同的URL只有一個結果[相同是指整個URL字串完全匹配],所以第二次訪問的時候如果 URL字串沒變化,瀏覽器是 直接拿出了第一次訪問的結果。POST則認為是一個變動性訪問 (瀏覽器認為POST的提交必定是有改變的)

前端的資料互動(jquery ajax+python flask+mysql)

上web課的時候老師佈置的一個實驗,要求省市連動,基本要求如下: 1.用select選中一個省份。 2.省份資料傳送到伺服器,伺服器從資料庫中搜索對應城市資訊。 3.將城市資訊返回客戶,客戶用select控制元件進行顯示。 基本效果如下所示(頁面挺醜陋的

前端vue與Thinkphp在伺服器的部署

vue在服務端部署時,我們都知道通過npm run build 指令打包好的dist檔案,通過http指定是可以直接瀏覽的,Thinkphp通過域名指向index.php檔案才可以瀏覽。要使前端正常呼叫後端資料,有兩種方法:1、前端跨域呼叫後端資料,2、前端打包檔案部署在後

利用jquery ajax前端的檔案傳輸

首先了解下$ ajax裡面的各個屬性1.url: 要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。2.type: 要求為String型別的引數,請求方式(post或get)預設為get。3.timeout: 要求為Number型別的引數,設定請求超時時間(毫

循序漸進VUE+Element 前端應用開發(14)--- 根據ABP介面實現前端介面展示

在前面隨筆《循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登入處理》簡單的介紹了一個結合ABP後端的登陸介面實現前端系統登陸的功能,本篇隨筆繼續深化這一主題,著重介紹基於ABP後端介面資訊,實現對前端介面的開發工作。 ABP(ASP.NET Boilerplate)框架主要是

關於前端數據交互問題

缺點 lan back 加載 -a type dom 如同 .sh 作者:NimoChu鏈接:https://www.zhihu.com/question/26532621/answer/33144979來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請註

微信小程序上傳圖片(前端+PHP)

ebs name inf upload quest spa 列表 技術 ima 一、wxml文件 <text>上傳圖片</text> <view> <button bindtap="uploadimg">點擊選擇上傳圖&l

<Ajax> 三. 前端通過表單數據交互

數據交互 -- orm eth 通過 input cti 返回 style <!-- 前端代碼 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset

前端和全棧到底不該學什麽

ajax兼容 fff 開發工程師 過程 技術人 技術開發 過時 socket 微信 1、前言在職業規劃咨詢過程中經常會被問到這樣的問題: 老師,我是該深入鉆研專精一門,走技術大牛路線,還是所有都要精通,做一個全棧工程師?類似問題的變種還有,老師我是不是該30歲最遲35歲就要

看完讓你徹底理解 WebSocket 原理,附完整的實戰代碼(包含前端

tcp 協議 learn php 握手 live 雙向 簡單 再次 註意 1、前言 最近有同學問我有沒有做過在線咨詢功能。同時,公司也剛好讓我接手一個 IM 項目。所以今天抽時間記錄一下最近學習的內容。本文主要剖析了 WebSocket 的原理,以及附上一個完整的聊天室實戰

Spring MVC之中前端傳數據

變化 性別 debug lan 直接 oot try 方向 表單 Spring MVC之中前端向後端傳數據 Spring MVC之中前端向後端傳數據和後端向前端傳數據是數據流動的兩個方向, 在此先介紹前端向後端傳數據的情況. 一般而言, 前端向後端傳數據的場景, 大多是出

前端接受傳過來的list的處理

== uid lse debugger 用戶權限 .data ber ole ati //隱藏需要權限才顯示的分配按鈕 $("#btn-distribute").css("display", "none");

zbb20180921 java,js,javascript 前端加密解密Base64通用加密處理

package bytes 調用 param ati port import ofo 圖片 前端加密後端解密Base64通用加密處理 下載Base64.js 下面先看下前端加密: 首先在html中引入jquery的js插件和base64js插件,

WebSocket實現web即時通信(nodejs實現)

tcp ica pri har == bootstra query gif 不容易 WebSocket實現web即時通信一、首先看一下,HTTP、ajax輪詢、long poll和WebSocket的區別:1、HTTP 協議(短連接):一個 Request 一個 Respo