2. 程式人生 > >html 與php+MySQL完成前後端互動

html 與php+MySQL完成前後端互動

阿新 • • 發佈：2019-01-16
1.php連線資料庫與基本操作配置
(1)php建立資料庫【連線】
語法：Object mysqli_connect("域名","DB賬號","DB密碼","DB庫名")
例子：$con = mysqli_connect('localhost','root','','frankdb');


(2)向DB中插入資料時包含中文出現亂碼的解決方案
語法：mysqli_query($con,"set names utf8");
說明：設定成功會返回1，根據實際情況並不一定必須儲存返回結果。

(3)設定client端和server端保持字元編碼一致
語法：mysqli_query($con,"set character_set_client=utf8");
    mysqli_query($con,"set character_set_results=utf8");

(4)執行sql語句
語法：$結果 = $DB連線->query(sql語句);
例子：var_dump($result = $con->query($sql));


2.使用sql語句基本【模板】
a.建立連線
b.判斷是否連線
c.設定編碼
d.建立sql語句
e執行結果條數
g.拼湊結果
h.json化返回


<?php
//a.sql 查詢語句
無條件查詢，即直接寫1即可
//$sql='select * from 哪張表 where 條件'；
有條件查詢，在where後面寫出查詢條件，如果多個條件需要用and 或or 來連線。
//$sql="select stuName from stud  where stuScore='100' and stuGender='female'";
//$sql="select stuName from stud  where stuScore='100' or stuGender='female'";
        $con=mysqli_connect('localhost','root','','studb')
        
         if($con){
               echo'<pre>';
               echo'資料庫連線成功，等待指令...';
               mysqli_query($con,'set  names utf8');
               mysqli_query($con,'set  character_set_client=utf8');
               mysqli_query($con,'set  character_set_results=utf8');
               $sql="select * from stud where 1";
               $result=$con->query($sql);
               if($result>num_rows>0){
                         $info=[];
                   for($i=0;$row=$result->fet_assoc();$i++){
                                   $info[$i]=$row;
                     }
                     echo json_encode($info);
                  }
               }else{
                    echo'<pre>';
                    echo'資料連線失敗，請重新連線‘；
              }
              
 b.插入語句（新增語句）
 兩種寫法：(1)$sql="insert into 表名（欄位1，欄位2，...)  values(值1，值2，...)";
                 (2)$sql='insert into 表名（'值1’,'值2',...)";    
                 
                 $con=mysqli_connect('localhost','root','','studb');
                 if($icon){
                        echo'<pre>';
                        echo'資料庫連線成功，等待指令...';
                        mysqli_query($con, 'set names utf8');
                        mysqli_query($con, 'set character_set_client=utf8');
                        mysqli_query($con, 'set character_set_result=utf8');
                        
                        $sql="insert into  stud  stuName,stuGender,stuAge,stuNum,stuScore)values('lucy','female','14','123456789','90')";
                        $sql="insert into  stud  values('lucy','female','14','123456789','90')";
                        $result=$con->query($sql);
                            if($result){
                               echo'新增成功';
                           }else｛
                               echo'新增失敗';
                         }
                         
   c.修改語句（更新語句）update
   $sql="update  表名 set 欄位1=‘新值1’，欄位2=‘新值2’，... where  條件“；
   
   $con=mysqli_connect('localhost','root','','studb');
   if($con){
                      echo "<pre>";
                echo "資料庫連線成功，等待指令...";

                        mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');

$sql="update  stud  set  stuScore='100' where stuName='lily'";
$result=$con->query($sql);

var_dump($result);
  }else{
        echo "資料庫連線失敗！！！";
}
                         
   d. 刪除語句delete
   $sql="delete from 表名 where 條件“；
             $con=mysqli_connect('localhost','toot','';'studb' );
                        if($con){
echo "<pre>";
echo "資料庫連線成功，等待指令...";
//
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$sql = "delete from stud where stuName='lucy'";
$result = $con->query($sql);


var_dump($result);

}else{
echo "資料庫連線失敗！！！";
}
 
   ?>                      
                         
                         
                ajax & php
                         
         <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>


<span>姓名：</span><input type="text" class="stuName"><br/>
<span>性別：</span><input type="text" class="stuGender"><br/>
<span>年齡：</span><input type="text" class="stuAge"><br/>
<span>手機：</span><input type="text" class="stuNumber"><br/>
<span>分數：</span><input type="text" class="stuScore"><br/>
<button>增：將上述資訊新增至資料庫</button><br/>
<button>刪：根據姓名刪除指定的內容</button><br/>
<button>改：根據姓名修改指定的內容</button><br/>
<button>查：查詢資料庫中所有的內容</button>


<!-- 1.引入jquery框架 -->
<script src="jquery-1.12.3.min.js"></script>
<script>
$('button:eq(0)').click(function(){
//2.在想要和後臺互動的時候，呼叫$.ajax()方法
//引數是JSON格式
$.ajax({
//3.ajax結構需要一系列引數支援
type:'post',//get|post
url:'http://127.0.0.1/day3/code/lesson6_ajax&php/lesson6_ajax&php.php',
dataType:'json',
data:{
//data是post請求獨有的，因為post請求才需要攜帶資料給後臺
stuName:$('.stuName').val(),
stuGender:$('.stuGender').val(),
stuAge:$('.stuAge').val(),
stuNumber:$('.stuNumber').val(),
stuScore:$('.stuScore').val(),
},
//請求完成後，若收到後臺返回的資料(收到響應response)，這個函式會被自動執行。
success:function(data){
console.log(data);
}
});
});
$('button:eq(1)').click(function(){

});
$('button:eq(2)').click(function(){

});
$('button:eq(3)').click(function(){

});
</script>
</body>
</html>
   <?php             
  
/*
1.內建物件
在php中內建了兩個物件用來接收，前端發來的資訊。
$_GET 和 $_POST

$_GET用於獲取在前端通過get請求發來的資訊
$_POST用於獲取在前端通過post請求發來的資訊
*/


echo json_encode($_POST);
?>                       
                         
        ajax select&php 
        
                   
                    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>


<span>姓名：</span><input type="text" class="stuName"><br/>
<span>性別：</span><input type="text" class="stuGender"><br/>
<span>年齡：</span><input type="text" class="stuAge"><br/>
<span>手機：</span><input type="text" class="stuNumber"><br/>
<span>分數：</span><input type="text" class="stuScore"><br/>
<button>增：將上述資訊新增至資料庫</button><br/>
<button>刪：根據姓名刪除指定的內容</button><br/>
<button>改：根據姓名修改指定的內容</button><br/>
<button>查：查詢資料庫中所有的內容</button>


<script src="jquery-1.12.3.min.js"></script>
<script>
$('button:eq(0)').click(function(){
//判空操作
var stuNameValue = $('.stuName').val();
var stuGenderValue = $('.stuGender').val();
var stuAgeValue = $('.stuAge').val();
var stuNumberValue = $('.stuNumber').val();
var stuScoreValue = $('.stuScore').val();
if(
stuNameValue.length==0||
stuGenderValue.length==0||
stuAgeValue.length==0||
stuNumberValue.length==0||
stuScoreValue.length==0){
alert('任意某一個輸入資訊都不能為空！');
return;
}
$.ajax({
type:'post',
url:'http://127.0.0.1/day3/code/lesson7_html&php&mysql/lesson7_html&php&mysql.php',
dataType:'json',
data:{
stuName:$('.stuName').val(),
stuGender:$('.stuGender').val(),
stuAge:$('.stuAge').val(),
stuNumber:$('.stuNumber').val(),
stuScore:$('.stuScore').val(),
},
success:function(data){
console.log(data);
if(data.msg=='add success'){
alert('新增成功');
}else{
alert('新增失敗');
}
}
});
});
$('button:eq(1)').click(function(){

});
$('button:eq(2)').click(function(){

});
$('button:eq(3)').click(function(){
$.ajax({
type:'get',
url:'http://127.0.0.1/day3/code/lesson7_html&php&mysql/lesson7_select.php',
dataType:'json',
success:function (data){
console.log(data);
},
error: function (err){
console.log(err);
}
});
});
</script>
</body>
</html>
     
                         
   <?php
//查詢功能的後臺php檔案
$success = array('status' => 'success');
$error = array('status' => 'error');


$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');


$sql = "select * from gradeonesheet where 1";
$result = $con->query($sql);


if($result->num_rows>0){
$info = [];
for($i=0; $row=$result->fetch_assoc(); $i++){
$info[$i] = $row;
}
//
echo json_encode($info);
}
}
?>             
<?php
//新增資料的
$success = array('status' => 'OK');
$error = array('status' => 'error');


$con = mysqli_connect('localhost','root','','studb');
if($con){
mysqli_query($con, 'set names utf8');
mysqli_query($con, 'set character_set_client=utf8');
mysqli_query($con, 'set character_set_results=utf8');
//
$stuName = $_POST['stuName'];
$stuGender = $_POST['stuGender'];
$stuAge = $_POST['stuAge'];
$stuNumber = $_POST['stuNumber'];
$stuScore = $_POST['stuScore'];


$sql = "insert into gradeonesheet values('$stuName','$stuGender','$stuAge','$stuNumber','$stuScore')";
$result = $con->query($sql);
if($result){
$success['msg'] = 'add success';
echo json_encode($success);
}else{
$error['msg'] = 'add failed';
echo json_encode($error);
}


}else{
$error['msg'] = 'database connect failed';
echo json_encode($error);
}
?>               
 
 
 
 

相關推薦

html 與php+MySQL完成前後端互動

1.php連線資料庫與基本操作配置(1)php建立資料庫【連線】語法：Object mysqli_connect("域名","DB賬號","DB密碼","DB庫名")例子：$con = mysqli_connect('localhost','root','','frankdb

bootstrap jsp頁面前後端互動 包括html中的Radio與Select的賦值

var i=0; //控制初始化行數 var a;//控制具體進行修改或者刪除或者增加之中的哪個操作 function nonedisplay(){//顯示為空狀態 $('#nonelist').show(); $('#nonetable').show(); } function none

一個原生的靜態html專案需要前後端互動或測試的時候怎麼辦呢？（在本地開啟http服務）

我們做專案的時候有時用webpack ,glup,什麼的都會生成一個本地地址，但是原生的沒有，這時候當你需要前後端互動，或者測試說我們連你IP在你本地先測吧！這時候該怎麼辦呢，不可能臨時換成vue，或者其他的沒有必要。於是問了一下別人叫了我一個很使用的方法! 要像使用這個方法前提是你已經安裝了n

PHP 前後端互動 獲取AUTHORIZATION認證

修改檔案：.htaccess 修改位置：入口檔案同級目錄 修改內容： Apache伺服器下，我們需要開啟rewrite_module模組 新增主要程式碼：HTTP_AUTHORIZATION 是你獲取 HTTP:Authorization 的 key 值 及：獲取方式 $

java連線MySQL資料庫 json資料前後端互動

先在下圖資料夾中匯入相應的jar包，其中第一個紅框中的是使用json資料需匯入的7個包，第二個紅框是用JDBC連線MySQL資料庫必須的包。 連線MySQL的工具類： package com.XXXXXX.util; import java.sql

jsp前後端互動以及請求轉發和請求包含

request物件 作用： 獲得請求引數： 請求方式： API： 獲得引數： 前後端互動 涉及到前後端互動的都很重要 getParameter(“name”); 能夠獲得前段頁面提交的引數： Returns the value of a request pa

基於Node.js的ajax前後端互動的例子

前端程式碼： <!DOCTYPE html>   <html lang="en">      &

springboot+mybatis+thymeleaf專案搭建及前後端互動

前言 spring boot簡化了spring的開發, 開發人員在開發過程中省去了大量的配置, 方便開發人員後期維護. 使用spring boot可以快速的開發出restful風格微服務架構. 本文將詳細的介紹如何搭建一套spring boot 專案, 實現前後端互動. 開發工具 : IDEA&nbs

類Flask實現前後端互動之程式碼聊天室

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

如何使用ajax實現多條刪除及前後端互動

/*多條刪除，以下程式碼是本人在springCloud中寫的， 但是方法都大同小異，你看懂了，也就會了*/ JSP頁面如下： <%@ page language='java' pageEncoding='UTF-8'%> <%@tagli

Atitit 前後端互動模式 目錄 1.1. Ajax 1 1.2. Fetch api 1 1.3. 服務端指令碼模式（簡單快速） 1 1.4. 瀏覽器注入物件、函式 1 1.5. 瀏覽器外掛模式

Atitit 前後端互動模式   目錄 1.1. Ajax 1 1.2. Fetch api 1 1.3. 服務端指令碼模式（簡單快速） 1 1.4. 瀏覽器注入物件、函式 1 1.5. 瀏覽器外掛模式 1 1.6. other 1   &

BigDecimal/Long 前後端互動失去精度解決方法

問題 發現一個詭異的現象，資料庫儲存的bigDecimal型別的資料，經過springboot返回給前端資料丟失了幾位小數，例如 222233334444.01134567(後端)>222233334444.01135(前端)。經過查資料，在Controller層通過@Resp

python Crypto AES-256-ECB 與PHP之間完成加解密

openss 固定 base aes ecb 世界 and brush mode AES算法描述：　　首先AES是一種對稱加密算法。 算法特點： 　　1、AES的區塊長度固定為128 比特（16字節）。　　　　# 因此在加密前需要對待加密字符串進行填充，長度填充至128bi

debian安裝nginx,php-fpm,php-mysql完成環境部署

1.安裝nginx apt-get install nginx 2.進入/etc/nginx/sites-available目錄編輯default配置檔案,內容如下 [email protected]:/etc/nginx/sites-available#gedit defa

php使用webuploader前後端程式碼分享

WebUploader是由Baidu WebFE團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代檔案上傳元件。 公司要做一個類似於論壇的網站，要用到圖片上傳功能，因為WebUploader相容性比較好，所以我選擇了它。 先看看完成時的樣子。 恩，非常

初識 vue —— 最簡單的前後端互動示例

一、學習 vue 面臨的問題 最近想學一門前端技術防身，看到部落格園中寫 vue 的多，那就 vue 吧。都說 vue 的官方教程寫得好，所以我就從官方教程開始學習。官方教程說“Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以

學習學習Spring，前後端互動方式

最近在修煉程式碼，學習了SSM框架，學到了其中一個關鍵點就是前後臺如何互動的，首先要知道，Spring是如何在前端如何輸出內容的，就是通過 @Controller @RequestMapping("/viewContent") public class CollegeMan

教你搭一個簡單的前後端互動小網站

最近想自己搭一個網站，但僅僅會前端還是有點做不到實際情況中的前後端互動，就自己瞎鼓搗了幾個工具，來搭一個簡單的網站。 工具：         後端處理這種自己做的小網站用 Node是最好不過來（其他語言不會。。），選Express跟Koa都可以，這邊我選的是Express

前後端互動方式（同一頁面並行開發、變數傳遞）

剛做完一個專案的改進需求，總結一些專案心得，主要有兩方面： 同一個頁面，前後端各負責幾個模組開發，如何頁面整合？ 前端如何從後端獲取資料？ 1 前後端按模組開發同一頁面 首先，在這個專案中沒有用到vue、react這些框架，實現頁面的一種做法是前端通

Servlet實現前後端互動的原理及過程解析

在日常除錯專案時，總是利用tomcat去啟動專案，並進行前後端聯調，但對於前後端的請求響應的互動原理及過程並不是特別清晰。 為什麼在前端發出相應請求，就能跳轉到後端通過程式得到結果再響應到前端頁面呢？！ 為了加深對該過程的理解，故以tomcat為例，撰寫此文。 一、To