html與js和php之間實現資料互動
一、總述
標題取得假大空，主要還是為了記錄一下課設做的圖片搜尋引擎。
之前的python是用來爬取圖片搜尋引擎的圖片資源的，然後把圖片放在伺服器，圖片對應的tag（關鍵字）和存放路徑放在mangoDB裡面。
這篇部落格主要記錄一下我完成前端（html+js）和後臺（PHP）實現互通的一個過程，以及對應步驟的解決方案。
我們是把index.html,ourGet.js,search.php放在伺服器的統一目錄下的。ourGet.js是我單獨寫的請求伺服器、解析json串、用js動態建立img的程式碼。
下圖是我畫的一個大致流程：
再放一張效果圖：
當然這個圖片搜尋引擎裡面所有的圖片資源都是我們傳上去的。
二、PHP
先貼上程式碼：
<?php
$keyWord = $_GET['keyWord'];//查詢關鍵詞
$page = 1；//intval($_GET['page']);//頁數
$size = 20；//intval($_GET['size']);//大小
$manager = new MongoDB\Driver\Manager("mongodb://localhost:埠號");
$bulk = new MongoDB\Driver\BulkWrite;
$filter = ['tag' => $keyWord];
$options = [
'projection' 1）對於這三行程式碼：
$keyWord = $_GET['keyWord'];//查詢關鍵詞
$page = 1；//intval($_GET['page']);//頁數
$size = 20；//intval($_GET['size']);//大小第一行是接收從網頁上傳過來的關鍵字的，所以在網頁的輸入框這裡，就要和$_GET[‘keyWord’]裡面的一樣。
第二三行同理，接收來自網頁的頁數和大小，不過我們這裡把這兩個引數寫固定了。
2）關於這個：
$manager = new MongoDB\Driver\Manager("mongodb://localhost:埠號");localhost後面填的是伺服器的埠號。
3）返回的是json串。
三、html和js
html主要實現網頁的展示，而js主要實現邏輯功能，包括請求伺服器、解析json串、用js動態建立img。
1）html：
其他地方都是常規的關於頁面樣式的，我主要學習到的是圖中標號1、2、3的地方。
1.1）第一處地方：
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="ourGet.js"></script>第一行程式碼，因為我用了一個jquery框架，所以去jquery官網了引用了這個。
第二行程式碼，因為我單獨把js程式碼放在了另一個檔案裡，所以在這裡引入了ourGet.js檔案。
1.2）第二處：
<div class="top3">
<input id="ourKeyWord" type="text" class="form1" name="keyWord" value="請輸入關鍵字"
onfocus="javascript:if(this.value=='請輸入關鍵字')this.value='';">
<input type="button" class="form2" name="submit" onClick="getData()" value="Search">
</div>在這個div裡面，輸入框的id=”ourKeyWord”,根據後面ourGet.js裡面的下面這句程式碼，把輸入框的內容賦值給var key
var key = document.getElementById('ourKeyWord').value.trim();再通過ourGet.js裡面的下面這句程式碼：
url:"search.php?keyWord="+key把輸入的關鍵字傳遞給PHP程式碼的：
$keyWord = $_GET['keyWord']
當然，要實現把關鍵字傳遞給PHP並提交到伺服器，是在我們點選了Search按鈕之後的。
我在Search按鈕處給它寫了個點選事件，每次我點選，就呼叫ourGet.js裡面的getData()函式：
onClick="getData()"
具體的getData()函式就是整個outGet.js的內容，如下：
function getData(){
var key = document.getElementById('ourKeyWord').value.trim();
$.ajax({
url:"search.php?keyWord="+key,
//data是成功返回的json串
success:function(data,status){
$('#divPicture').html("");//清空上一個div
var obj = eval( '(' + data + ')' );//把json串解析成json物件
var len = obj.length;
for(var i=0;i<len;i++){
var img = document.createElement("img");//建立一個img物件
img.src = obj[i];
var div = document.getElementById("divPicture");
div.appendChild(img);
}
},
error:function(data,status){
alert('失敗');
}
});
//alert('nihao');
}1.3）第三處：
<body>
<div id="divPicture"></div>
</body>這個body裡面的div和img標籤是在ourGet.js裡面動態建立的，根據程式碼：
var img = document.createElement("img");//建立一個img物件
img.src = obj[i];
var div = document.getElementById("divPicture");
div.appendChild(img);這裡比較複雜，首先：
1.3.1）在通過url把關鍵字傳遞到伺服器之後，返回到資料是以json字串的形式存放在下面語句的data裡面的。
success:function(data,status)所以，此時data就是個json字串，我們首先要做的就是解析json串：
var obj = eval( '(' + data + ')' );//把json串解析成json物件通過js裡面的eval函式就可以輕鬆實現。此時的obj就是一個json陣列了，可以對它進行陣列的所有操作。然後就是1.3開頭講到的用js動態建立div和img標籤，並用迴圈給img的src屬性賦值，這樣就把圖片填在了img標籤裡：
img.src = obj[i];當然，ourGet.js函式還有改進的地方，比如obj是否為空的判斷，如果error之後怎麼處理等等，在這裡我沒有考慮。
以上！