這篇文章主要為大家詳細介紹了js結合json實現ajax簡單實例的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前期準備

1、安裝wampserver或者其他相似軟件來搭建本地集成安裝環境，我安裝的是phpstudy

2、html、js、css等文件需要放置在PHPstudy中的WWW目錄中，默認運行index頁面

3、bootstrap.css

界面截圖：

phpstudy用起來很方便，如果你的電腦沒有安裝過php，那要先配置系統環境變量，將php.exe(在PHPstudy的安裝目錄里找)的路徑添加進去，然后在cmd里輸入 php -v ,出現php的安裝版本等信息則說明安裝成功。

然后新建一個項目在PHPstudy的WWW文件夾下，這里我取名為AjaxDemo。

index.html

index

.container{ width: 50%; margin-top: 30px; }

.text-danger{ margin-top: 6px; }

員工查詢

員工編號：

查詢

查詢結果：

員工增加

員工編號：

員工姓名：

員工性別：

員工職位：

增加員工

結果：

staffManage.js

實例化Ajax可分為五點，比較好記：

1、new一個XMLHttpRequest實例注意兼容低版本的IE瀏覽器

2、open(method,url,asyn)XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET還是POST，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是true，所以不用寫。

3*若是post請求還要加上請求頭 setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”)

4、send

調用send()方法才真正發送請求。GET請求不需要參數，POST請求需要把body部分以字符串或者FormData對象傳進去。

5、onReadyStateChange

6、responseText

serverjson.php<?php

//設置頁面內容是html編碼格式是utf-8

header("Content-Type: text/plain;charset=utf-8");

//header("Content-Type: application/json;charset=utf-8");

//header("Content-Type: text/xml;charset=utf-8");

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

//header("Content-Type: application/javascript;charset=utf-8");

//定義一個多維數組，包含員工的信息，每條員工信息為一個數組

$staff = array

(

array("name" => "洪七", "number" => "101", "sex" => "男", "job" => "總經理"),

array("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "開發工程師"),

array("name" => "黃蓉", "number" => "103", "sex" => "女", "job" => "產品經理")

);

//判斷如果是get請求，則進行搜索；如果是POST請求，則進行新建

//$_SERVER是一個超全局變量，在一個腳本的全部作用域中都可用，不用使用global關鍵字

//$_SERVER["REQUEST_METHOD"]返回訪問頁面使用的請求方法

if ($_SERVER["REQUEST_METHOD"] == "GET") {

search();

} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){

create();

}

//通過員工編號搜索員工

function search(){

//檢查是否有員工編號的參數

//isset檢測變量是否設置；empty判斷值為否為空

//超全局變量 $_GET 和 $_POST 用于收集表單數據

if (!isset($_GET["number"]) || empty($_GET["number"])) {

echo '{"success":false,"msg":"參數錯誤"}';

return;

}

//函數之外聲明的變量擁有 Global 作用域，只能在函數以外進行訪問。

//global 關鍵詞用于訪問函數內的全局變量

global $staff;

//獲取number參數

$number = $_GET["number"];

$result = '{"success":false,"msg":"沒有找到員工。"}';

//遍歷$staff多維數組，查找key值為number的員工是否存在，如果存在，則修改返回結果

foreach ($staff as $value) {

if ($value["number"] == $number) {

$result = '{"success":true,"msg":"找到員工：員工編號：' . $value["number"] .

'，員工姓名：' . $value["name"] .

'，員工性別：' . $value["sex"] .

'，員工職位：' . $value["job"] . '"}';

break;

}

}

echo $result;

}

//創建員工

function create(){

//判斷信息是否填寫完全

if (!isset($_POST["name"]) || empty($_POST["name"])

|| !isset($_POST["number"]) || empty($_POST["number"])

|| !isset($_POST["sex"]) || empty($_POST["sex"])

|| !isset($_POST["job"]) || empty($_POST["job"])) {

echo '{"success":false,"msg":"參數錯誤，員工信息填寫不全"}';

return;

}

//TODO: 獲取POST表單數據并保存到數據庫

//提示保存成功

echo '{"success":true,"msg":"員工：' . $_POST["name"] . ' 信息保存成功！"}';

}

?>

總結

整個過程大概如圖：

上面是我整理給大家的，希望今后會對大家有幫助。

相關文章：

ajax三級聯動實現代碼

ajax實現加載數據功能

ajax的使用方法_例題、ajax的數據處理

總結

以上是生活随笔為你收集整理的js中的json ajax,js结合json实现ajax简单实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。