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' => ['_id' => 0, 'localurl' => 1],
'skip' => $page * $size,
'limit' => $size
];
//查询数据
$query = new MongoDB\Driver\Query($filter, $options);
$localUrl = $manager->executeQuery('test.col', $query);
$returnData = array();
$localUrl = iterator_to_array($localUrl);
foreach($localUrl as $k => $row){
array_push($returnData, $row->localurl);
}
echo json_encode($returnData, JSON_UNESCAPED_UNICODE);
?>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之后怎么处理等等，在这里我没有考虑。
以上！