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之后怎么处理等等，在这里我没有考虑。

以上！