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

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

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

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

下图是我画的一个大致流程：

再放一张效果图：

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

先贴上代码：

1）对于这三行代码：

第一行是接收从网页上传过来的关键字的，所以在网页的输入框这里，就要和$_GET[‘keyWord’]里面的一样。

第二三行同理，接收来自网页的页数和大小，不过我们这里把这两个参数写固定了。

2）关于这个：

localhost后面填的是服务器的端口号。

3）返回的是json串。

html主要实现网页的展示，而js主要实现逻辑功能，包括请求服务器、解析json串、用js动态创建img。

1）html：

其他地方都是常规的关于页面样式的，我主要学习到的是图中标号1、2、3的地方。

1.1）第一处地方：

第一行代码，因为我用了一个jquery框架，所以去jquery官网了引用了这个。 第二行代码，因为我单独把js代码放在了另一个文件里，所以在这里引入了ourGet.js文件。

1.2）第二处：

在这个div里面，输入框的id=”ourKeyWord”,根据后面ourGet.js里面的下面这句代码，把输入框的内容赋值给var key

再通过ourGet.js里面的下面这句代码：

把输入的关键字传递给PHP代码的：

$keyWord = $_GET['keyWord']

当然，要实现把关键字传递给PHP并提交到服务器，是在我们点击了Search按钮之后的。 我在Search按钮处给它写了个点击事件，每次我点击，就调用ourGet.js里面的getData()函数：

onClick="getData()"

具体的getData()函数就是整个outGet.js的内容，如下：