html与js和php之间实现数据交互

一、总述

标题取得假大空,主要还是为了记录一下课设做的图片搜索引擎。

之前的python是用来爬取图片搜索引擎的图片资源的,然后把图片放在服务器,图片对应的tag(关键字)和存放路径放在mangoDB里面。

这篇博客主要记录一下我完成前端(html+js)和后台(PHP)实现互通的一个过程,以及对应步骤的解决方案。

我们是把index.html,ourGet.js,search.php放在服务器的统一目录下的。ourGet.js是我单独写的请求服务器、解析json串、用js动态创建img的代码。

下图是我画的一个大致流程:
html与js和php之间实现数据交互_第1张图片

再放一张效果图:
html与js和php之间实现数据交互_第2张图片

当然这个图片搜索引擎里面所有的图片资源都是我们传上去的。

二、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:
html与js和php之间实现数据交互_第3张图片

其他地方都是常规的关于页面样式的,我主要学习到的是图中标号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)第二处:
这里写图片描述

class="top3"> "ourKeyWord" type="text" class="form1" name="keyWord" value="请输入关键字" onfocus="javascript:if(this.value=='请输入关键字')this.value='';"> type="button" class="form2" name="submit" onClick="getData()" value="Search">

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

以上!

你可能感兴趣的:(技术博客,Python)