作者 | Jeskson

來源 | 達(dá)達(dá)前端小酒館

源碼地址：

https://github.com/huangguangda/Ajaxitm

什么是Ajax技術(shù)？實戰(zhàn)中的運用ajax技" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

首頁

15158846557 或

在線咨詢

所在位置：首頁 > 營銷資訊 > 網(wǎng)站運營 > 【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼

【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼

時間：2023-05-24 09:00:01 | 來源：網(wǎng)站運營

時間：2023-05-24 09:00:01 來源：網(wǎng)站運營

【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼：

作者 | Jeskson

來源 | 達(dá)達(dá)前端小酒館

源碼地址：

https://github.com/huangguangda/Ajaxitm

什么是Ajax技術(shù)？實戰(zhàn)中的運用ajax技術(shù)，了解前后端交互的方式，了解移動端的模式，了解H5的新技術(shù)，了解CSS3的使用，和JQuery的使用。

Ajax技術(shù)可以提高用戶體驗，無刷新的與后臺進(jìn)行數(shù)據(jù)的交互，異步的操作方式，可以不用刷新頁面提高性能。

了解前后端的交互流程，主要分為三部分，客戶端，服務(wù)端，數(shù)據(jù)庫，環(huán)境搭建，wamp，phpMyAdmin。

wamp，window，Apache，mysql，php。

創(chuàng)建項目：

創(chuàng)建一個名為AjaxItem的小項目

接下來附上我的代碼

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form>    用戶名：<input type="text">    <input type="submit" value="注冊"></form></body></html>

運行起來的效果是如下截圖

添加一個服務(wù)端跳轉(zhuǎn)的頁面reg.php，服務(wù)端要找到輸入框的值

提交表單方式：GET，POST

指定當(dāng)前頁的編碼

header("Content-type:text/html;charset=utf-8");

連接數(shù)據(jù)庫mysql

$con = mysql_connect();

默認(rèn)值：config.default.php

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form></body></html>

2

get提交的特點：

post提交的特點：

上面截圖可以看出傳輸數(shù)據(jù)的區(qū)別，我們一般對于數(shù)據(jù)的查詢，盡量采用get的方式，而我們要對數(shù)據(jù)的修改，添加或者是刪除，我們可以用post比較好一點。

服務(wù)端的書寫：

選擇數(shù)據(jù)庫：mysqlselectdb();建立數(shù)據(jù)庫，建表，鍵字段

指定數(shù)據(jù)庫的編碼格式

mysql_query("set names utf8");

獲取傳輸數(shù)據(jù)

$_GET$_POST

創(chuàng)建數(shù)據(jù)庫：

創(chuàng)建表：

創(chuàng)建數(shù)據(jù)

sql查詢：

select * from 表 where 字段 = 值mysql_querymysql_num_rows

reg.php

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php" method="post">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form></body></html>

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php" method="post">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form></body></html>

reg.php代碼：

<?php// 定義編碼格式header("Content-type:text/html;charset=utf-8");// 連接mysql$con = mysql_connect("localhost",'root','123456');mysql_select_db('ajaxitem');mysql_query('set names utf8');$username = $_POST['username'];$sql = "select * from reg where username = '$username'";$query = mysql_query($sql);// 如何區(qū)分查詢到還是沒有查詢到呢？//mysql_num_rows($query);// 找到為1，沒有找到為0if($query && mysql_num_rows($query)){ echo "<script>alert('已經(jīng)有人注冊過了')</script>"; echo "<script>history.back()</script>";}else {$sql = "insert into reg(username) values ('$username')";$sql = mysql_query($sql);if($query){    echo "<script>alert('注冊成功')</script>";    echo "<script>window.location = 'index.html'</script>";}}?>

: 3

sql查詢：

select * from 表 where 字段 = 值mysql_querymysql_num_rowssql添加insert into 表（字段）values（值）

Ajax基本使用：

XMLHttpRequestopenonreadystatechangereadyState0未初始化1初始化2發(fā)送數(shù)據(jù)3數(shù)據(jù)傳送中4完成send

onreadystatechangestatushttp狀態(tài)碼200301304403404500statusText

responseText responseXML JSON.parsePOST方式：需要設(shè)置頭信息位置在send前setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');setRequestHeader(‘Content-Type’, ‘a(chǎn)pplication/json’);JSON_stringify

JQuery中的Ajax$.ajaxurltypedatasuccesserrordataTypeasync

提供公共代碼

require_once()獲取數(shù)據(jù)mysql_fetch_rowmysql_fetch_assocmysql_fetch_arraymysql_fetch_object增刪改查delete from 表 where 字段 = 值update 表 set 字段 = 新值 where id = $id;

Functions to create xhrsfunction createStandardXHR() { try {  return new window.XMLHttpRequest(); }catch(e){}}function createActiveXHR() { try {  return new window.ActiveXObject("Microsoft.XMLHTTP");  }catch(e){}}

index.html代碼：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php" method="post">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () {    var xhr = new XMLHttpRequest();    xhr.open('POST','user.php',true);}</script></body></html>

user.php

<?php// 定義編碼格式header("Content-type:text/html;charset=utf-8");// 連接mysql$con = mysql_connect("localhost",'root','123456');mysql_select_db('ajaxitem');mysql_query('set names utf8');$username = $_GET['username'];$sql = "select * from reg where username = '$username'";$query = mysql_query($sql);if($sql && mysql_num_rows($query)){    echo '{"code":0, "message": "已經(jīng)有人注冊過啦" }';}else {    echo  '{"code":1,"message":"可以注冊"}';}?>

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php" method="post">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () {    var xhr = new XMLHttpRequest();    // xhr.open('POST','user.php?username='+encodeURIComponent(this.value),true);    xhr.open('POST','user.php',true);    // 監(jiān)聽整個流程，多次觸發(fā)    xhr.onreadystatechange = function () {        if(xhr.readyState == 4) {            if(xhr.status == 200) {                xhr.responseText;                // xhr.responseXML                // console.log(JSON.parse(xhr.responseText));                var obj = JSON.parse(xhr.responseText);                if(obj.code) {                    oDiv.innerHTML = obj.message                }else {                    oDiv.innerHTML = obj.message                }            }        }    };    // xhr.send(null);    xhr.send('username'+encodeURIComponent(this.value));}</script></body></html>

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><form action="reg.php" method="post">    用戶名：<input type="text" name="username">    <input type="submit" value="注冊"></form><div id="div"></div><script>var oInput = document.getElementById("input1");var oDiv = document.getElementById('div1');oInput.onblur = function () {    var xhr = new XMLHttpRequest();    // xhr.open('POST','user.php?username='+encodeURIComponent(this.value),true);    xhr.open('POST','user.php',true);    // 監(jiān)聽整個流程，多次觸發(fā)    xhr.onreadystatechange = function () {        if(xhr.readyState == 4) {            if(xhr.status == 200) {                xhr.responseText;                // xhr.responseXML                // console.log(JSON.parse(xhr.responseText));                var obj = JSON.parse(xhr.responseText);                if(obj.code) {                    oDiv.innerHTML = obj.message                }else {                    oDiv.innerHTML = obj.message                }            }        }    };    // xhr.send(null);    // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');    // xhr.send('username'+encodeURIComponent(this.value));    // 'username=dada&age=12'    // xhr.setRequestHeader('Content-Type','application/json');    // xhr.send('{ "username": dada, "age": 12}');    // xhr.send(JSON.stringify({"username":"dada","age":12}));    // {"username":"dada","age":12} -> $.param() -> "useranme=dada&age=12"}</script></body></html>

JQuery:

if(s.data && s.processData && typeof s.data !== "string"){ s.data = JQuery.param(s.data, s.traditional);}inspectPrefiltersOrTransports(prefilters, s, options, jqXHR);if(state === 2){return jqXHR;}

ajax.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>$.ajax({ url: 'jquery.php', type:  'GET', data: {username: "dada"}, success: function(data){  console.log(data); }});</body></html>

jquery.php

<?PHP //echo 'red'; echo '{"color":"red","width":"200px"}';?>

請求相同部分：

require_once(‘connect.php');

ajax1.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title><script>//get : http://localhost/reg.php?username=dada//post : http://localhost/reg.php</script></head><body><form action="reg.php" method="post">  用戶名 : <input type="text" name="username">   <!--username=dada-->    <input type="submit" value="注冊"></form></body></html>

ajax2.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title></head><body><form action="reg.php" method="post">  用戶名 : <input id="input1" type="text" name="username">   <!--username=dada-->    <input type="submit" value="注冊"></form><div id="div1"></div><script>var oInput = document.getElementById('input1');var oDiv = document.getElementById('div1');oInput.onblur = function(){  var xhr = new XMLHttpRequest();  xhr.open('GET','user.php?username='+encodeURIComponent(this.value),true);  xhr.onreadystatechange = function(){        if(xhr.readyState == 4){      //console.log(xhr.status);      //console.log(xhr.statusText);      if(xhr.status == 200){        //console.log(xhr.responseText);        //console.log(JSON.parse(xhr.responseText));        var obj = JSON.parse(xhr.responseText);        if(obj.code){          oDiv.innerHTML = obj.message;        }        else{          oDiv.innerHTML = obj.message;        }      }    }      };  xhr.send(null);};</script></body></html>

ajax3.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title></head><body><form action="reg.php" method="post">  用戶名 : <input id="input1" type="text" name="username">   <!--username=dada-->    <input type="submit" value="注冊"></form><div id="div1"></div><script>var oInput = document.getElementById('input1');var oDiv = document.getElementById('div1');oInput.onblur = function(){  var xhr = new XMLHttpRequest();  xhr.open('POST','user.php',true);  xhr.onreadystatechange = function(){        if(xhr.readyState == 4){      //console.log(xhr.status);      //console.log(xhr.statusText);      if(xhr.status == 200){        //console.log(xhr.responseText);        //console.log(JSON.parse(xhr.responseText));        var obj = JSON.parse(xhr.responseText);        if(obj.code){          oDiv.innerHTML = obj.message;        }        else{          oDiv.innerHTML = obj.message;        }      }    }      };  //xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');  //xhr.send('username='+encodeURIComponent(this.value));    //'username=dada&age=12'    //xhr.setRequestHeader('Content-Type', 'application/json');  //xhr.send('{"username":"dada","age":12}');  //xhr.send(JSON.stringify({"username":"dada","age":12}));    //{"username":"dada","age":12} ->  $.param()  ->  'username=dada&age=12'  };</script></body></html>

ajax4.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title><script src="jquery-2.1.3.min.js"></script><script>$.ajax({  url : 'jquery.php',  type : 'POST',  data : {username:"dada"},  dataType : 'json',  async : false,  success : function(data){   //xhr.responseText    console.log(data);    //var obj = JSON.parse(data);    //console.log(obj);  },  error : function(err){    console.log(err.status);    console.log(err.statusText);  }});console.log(123);</script></head><body></body></html>

ajax5.html

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>無標(biāo)題文檔</title><script src="jquery-2.1.3.min.js"></script><script>$.ajax({  url : 'data.php',  type : 'POST',  data : {username:"dada"},  dataType : 'json',  async : false,  success : function(data){   //xhr.responseText    console.log(data);    //var obj = JSON.parse(data);    //console.log(obj);  },  error : function(err){    console.log(err.status);    console.log(err.statusText);  }});console.log(123);</script></head><body></body></html>

connect.php

<?PHP  header("Content-type: text/html; charset=utf-8");  $con = mysql_connect('localhost','root','');  mysql_select_db('ajaxitem');  mysql_query('set names utf8');?

data.php

<?PHP  require_once('connect.php');    //$sql = "delete from reg where username = 'da1'";  //$query = mysql_query($sql);    $sql = "update reg set username = 'da1' where id = 4";  $query = mysql_query($sql);    $sql = "select * from reg limit 2";  $query = mysql_query($sql);    //print_r($query);  //print_r(mysql_num_rows($query));    //$row = mysql_fetch_row($query);  //print_r($row);    /*while($row = mysql_fetch_row($query)){    //數(shù)組下標(biāo)的方式輸入    print_r($row);  }*/    /*while($row = mysql_fetch_assoc($query)){    //數(shù)組鍵值的方式輸入    print_r($row);  }*/    /*while($row = mysql_fetch_array($query)){    //數(shù)組整體的方式輸入    print_r($row);  }*/    /*while($row = mysql_fetch_object($query)){    //對象鍵值的方式輸入    print_r($row);  }*/  /*while($row = mysql_fetch_assoc($query)){    //數(shù)組鍵值的方式輸入    print_r($row['username']);  }*/  /*while($row = mysql_fetch_object($query)){    //對象鍵值的方式輸入    print_r($row -> username);  }*/  while($row = mysql_fetch_assoc($query)){    //數(shù)組鍵值的方式輸入    $data[] = $row;  }    //print_r(json_encode($data));    echo json_encode($data);  ?>

user.php

<?PHP  require_once('connect.php');    $username = $_REQUEST['username'];    $sql = "select * from reg where username = '$username'";  $query = mysql_query($sql);    if($query && mysql_num_rows($query)){    echo '{"code":0 , "message" : "已經(jīng)有人注冊過啦"}';   }  else{    echo '{"code":1 , "message" : "可以注冊"}';   }?>

jquery.php

<?PHP //echo 'red'; echo '{"color":"red","width":"200px"}';?>

reg.php

<?PHP  //username -> hello    require_once('connect.php');  $username = $_POST['username'];  $sql = "select * from reg where username = '$username'";  $query = mysql_query($sql);      if($query && mysql_num_rows($query)){    echo "<script>alert('已經(jīng)有人注冊過啦')</script>";    echo "<script>history.back()</script>";  }  else{    $sql = "insert into reg(username) values('$username')";    $query = mysql_query($sql);    if($query){      echo "<script>alert('注冊成功')</script>";      echo "<script>window.location = 'index.html'</script>";    }  }?>

總結(jié)

在博客平臺里，未來的路還很長，也希望自己以后的文章大家能多多支持，多多批評指正，我們一起進(jìn)步，一起走花路。

非常感謝讀者能看到這里，如果這個文章寫得還不錯，覺得「達(dá)達(dá)」我有點東西的話，覺得我能夠堅持的學(xué)習(xí)，覺得此人可以交朋友的話，求點贊求關(guān)注?? 求分享對暖男我來說真的

非常有用?。?！

?? 不要忘記留下你學(xué)習(xí)的腳印 [點贊 + 收藏 + 評論]

作者Info：

【作者】：Jeskson

【原創(chuàng)公眾號】：達(dá)達(dá)前端小酒館。

【福利】：公眾號回復(fù) “資料” 送自學(xué)資料大禮包（進(jìn)群分享，想要啥就說哈，看我有沒有）！

【轉(zhuǎn)載說明】：轉(zhuǎn)載請說明出處，謝謝合作！~

大前端開發(fā)，定位前端開發(fā)技術(shù)棧博客，PHP后臺知識點，web全棧技術(shù)領(lǐng)域，數(shù)據(jù)結(jié)構(gòu)與算法、網(wǎng)絡(luò)原理等通俗易懂的呈現(xiàn)給小伙伴。謝謝支持，承蒙厚愛?。?！

若本號內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問題），請及時聯(lián)系我們進(jìn)行整改即可，會在第一時間進(jìn)行處理。

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關(guān)注達(dá)達(dá)的CSDN！

這是一個有質(zhì)量，有態(tài)度的博客

http://weixin.qq.com/r/9zmKktTEd4kIrZDx92zl (二維碼自動識別)

關(guān)鍵詞：入門,實例,講解,實戰(zhàn),項目

網(wǎng)站
營銷
設(shè)計
運營
優(yōu)化
效率
專注
電商
方案
推廣

解決方案&服務(wù)

客戶&案例

營銷資訊

關(guān)于我們

解決方案&服務(wù)

客戶&案例

營銷資訊

關(guān)于我們

微信公眾號

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。點擊下載Chrome瀏覽器

關(guān)閉

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

快捷入口

【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼

?? 不要忘記留下你學(xué)習(xí)的腳印 [點贊 + 收藏 + 評論]

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關(guān)注達(dá)達(dá)的CSDN！

網(wǎng)站域名備案常用問題解釋（一）

金航標(biāo)Kinghelm/薩科微Slkor年度培訓(xùn)進(jìn)行時，2023大有可為！

淘寶新老鏈接該如何維護(hù)

國內(nèi)優(yōu)秀的網(wǎng)站設(shè)計公司有哪些？

小白新手使用LuManager快速建設(shè)自己網(wǎng)站

什么樣的網(wǎng)站客服外包服務(wù)機構(gòu)更專業(yè)

做企業(yè)網(wǎng)站建設(shè)都有哪些功能

（微變傳奇）3月13號上午10點首服一區(qū)不刪檔公測

模板系統(tǒng)OR 源碼系統(tǒng)

正確的選擇空間服務(wù)器

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

快捷入口

【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼

?? 不要忘記留下你學(xué)習(xí)的腳印 [點贊 + 收藏 + 評論]

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關(guān)注達(dá)達(dá)的CSDN！

推薦文章

【達(dá)達(dá)前端】Ajax實戰(zhàn)項目源碼講解（快速入門的實例）Github源碼

網(wǎng)站設(shè)計與網(wǎng)頁制作項目教程（第2版）內(nèi)容簡介

ajax基礎(chǔ)及簡單實例（僅學(xué)習(xí)）

.NET商業(yè)圖表庫SciChart開發(fā)實例

【高項管師章節(jié)重點】第13章項目合同管理知識點筆記整理

騰云悅智丨騰訊云“WeCity”中標(biāo)杭州城市超級大腦項目

網(wǎng)頁制作與網(wǎng)站建設(shè)實戰(zhàn)大全基本介紹

PHP開發(fā)學(xué)習(xí)資料集合(入門進(jìn)階必備，建議收藏)

Java Web開發(fā)實戰(zhàn)—JDBC基礎(chǔ)—JDBC入門

爬蟲系列教程五：動態(tài)網(wǎng)頁api分析實例之爬取dropbox上的pdf

網(wǎng)站域名備案常用問題解釋（一）

金航標(biāo)Kinghelm/薩科微Slkor年度培訓(xùn)進(jìn)行時，2023大有可為！

淘寶新老鏈接該如何維護(hù)

國內(nèi)優(yōu)秀的網(wǎng)站設(shè)計公司有哪些？

小白新手使用LuManager快速建設(shè)自己網(wǎng)站

什么樣的網(wǎng)站客服外包服務(wù)機構(gòu)更專業(yè)

做企業(yè)網(wǎng)站建設(shè)都有哪些功能

（微 變 傳 奇）3月13號上午10點首服一區(qū)不刪檔公測

模板系統(tǒng)OR 源碼系統(tǒng)

正確的選擇空間服務(wù)器

請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

歡迎關(guān)注達(dá)達(dá)的CSDN！

金航標(biāo)Kinghelm/薩科微Slkor年度培訓(xùn)進(jìn)行時，2023大有可為！

國內(nèi)優(yōu)秀的網(wǎng)站設(shè)計公司有哪些？

（微變傳奇）3月13號上午10點首服一區(qū)不刪檔公測