標籤：點擊 檔案 sql set 字元 非同步 安裝 idt utf-8
ajax技術( 非同步請求 )
局部無重新整理技術: ajax技術不需要重新整理頁面就能得到伺服器的結果,
所以增強了體驗。
請求: 發送一次網路連接
目的: 是為了擷取伺服器的資料
步驟：
第一步：要使用ajax技術， 必須要擷取瀏覽器的ajax對象 通過瀏覽器內建的XMLHttpRequest 就可以得到ajax對象 第二步: 開啟請求 open( 開啟請求的方式, 請求的地址, true ) 第三步: 發送請求 send使用發送資料的，GET方式一般發送null, 因為get方式的資料是通過url地址傳遞的 eg：用ajax輸出一個hello world 1.在WWW目錄下建立data.txt檔案並在裡面新增內容hello world。 2.在相同目錄下建立ajax.php如下代碼： 3.啟動phpStudy 4.開啟瀏覽器輸入localhpst/ajax.html 5.點擊按鈕查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.querySelector("input"); oBtn.onclick = function(){ //第一步：要使用ajax技術， 必須要判斷，擷取瀏覽器的xjax對象 //通過瀏覽器內建的XMLHttpRequest 就可以得到ajax對象 var xhr = new XMLHttpRequest(); //onreadystatechange: 監聽伺服器資料變化 xhr.onreadystatechange = function(){ //通過xhr對象的屬性 readyState的值 就可以判斷出來資料接收成功 /* 1：相當於 xhr.open 2: 相當於 xhr.send 3: 接收到伺服器的部分資料 4: 接受到服務端的完整資料 */ // alert( xhr.readyState ); if( xhr.readyState == 4 ){ // alert( xhr.responseText ); document.querySelector("div").innerHTML = xhr.responseText; } } //第二步: 開啟請求 //open( 開啟請求的方式, 請求的地址, true ) xhr.open( ‘GET‘, ‘data.txt‘, true ); //第三步: 發送請求 //send使用發送資料的，GET方式一般發送null, 因為get方式的資料是通過url地址傳遞的 xhr.send( null ); } } </script></head><body> <input type="button" value="讀取資料"> <div></div></body></html>
eg：用ajax+php輸出一個目前時間
1.在WWW目錄下建立一個php檔案server.php
server.php
<?php // echo date("Y-m-d H:i:s"); // if( isset( $_GET[‘name‘]) ){ //isset 判斷請求是否存在 // echo $_GET[‘name‘] . ‘--->‘ . $_GET[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s"); // }else if( isset( $_POST[‘name‘] ) ){ // echo $_POST[‘name‘] . ‘--->‘ . $_POST[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s"); // // echo ‘post request: ‘ . date(‘Y-m-d H:i:s‘); // } echo $_REQUEST[‘name‘] . ‘--->‘ . $_REQUEST[‘age‘] . ‘--->‘ . date("Y-m-d H:i:s");?>
2.在WWW目錄下建立一個php檔案time.php<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ var oBtn = document.querySelector("input"); var oDiv = document.querySelector("div"); oBtn.onclick = function(){ var xhr = new XMLHttpRequest(); var url = ‘server.php?name=lxb&age=22&t=‘ + Math.random();//GET方法 // var url = ‘server.php‘;//post方法 xhr.onreadystatechange = function(){ if( xhr.readyState == 4 ){ oDiv.innerHTML += xhr.responseText + ‘<br/>‘;
} } //GET方法 xhr.open( ‘GET‘, url, true ); xhr.send( null ); /* //POST方法 xhr.open( ‘POST‘, url, true ); //如果是用post發送的資料， 需要加一個要求標頭 xhr.setRequestHeader(‘content-type‘, ‘application/x-www-form-urlencoded‘); //post的資料 放在send函數裡面發過去 xhr.send( "name=lxb&age=22" );*/ } } </script></head><body> <input type="button" value="擷取時間"> <div></div></body></html>
3.開啟瀏覽器輸入localhpst/time.html
4.點擊按鈕查看效果
jQuery的ajax
$.get $.post $.ajax 三種函數形式
$.get( "1", { 2 }, 3);
1, 請求的url 2,發送的資料(json格式) 3,成功之後的回呼函數（參數為接收到的結果-->res）
eg:$.get( "sever.php", { ‘province_id‘, }, function( res ){ }); 經典的ajxa----》三級聯動 1.省市區表格 2.三種複製表資料方法 一.在安裝PHPstudy目錄下的mySQL目錄下的data記錄了資料庫的資料資訊 二.用資料庫管理軟體匯入sql檔案 三.用資料庫管理軟體複製表 3.資料庫返回的資料一般是字串或者xml形式 所以在php得到數組結果後要用 json_encode 把數組轉成類似格式的字串<?php echo json_encode( $arr);?>3.有時候ajax得到的資料是字串，要轉成json形式才能用
<script> /* JSON對象 parse: 字串->json對象 stringify: json對象->字串 */ // var obj = { // "a" : 10, // "b" : 20 // }; // alert( typeof obj ); // var res = JSON.stringify( obj ); // alert( res ); // alert( typeof res ); var str = ‘{"a" : 10, "b" : 20}‘; // alert( typeof obj ); var obj = JSON.parse( str ); alert( obj.a + ‘,‘ + obj.b );</script>
前端小白之每天學習記錄----php（4）ajax
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
