我们今天来用php来做一下前台与后台的交互效果，首先我们先打开这个软件。

看一下电脑右下角的小图标

当变成之后鼠标左键

打开这个之后点击第二个之后会打开一个网站

点击右面页面的数据库打开新建数据库，填入数据库名称和模式

后点击创建，出现创建成功弹出框后，点击右面页面中我们新创建的数据库

在新建数据库中新建一个数据表，填入数据表的名字和字段数

因为我只想要密码和用户名两条数据，所以我只要连个字段数之后点击执行，弹出一个页面框，我们把自己想要的数据名和格式填入表中

创建之后我们将滚动条往下翻，找到保存，别点击执行，因为那是当你想要的数据过多时，字段数不够时，另添加几条字段数的。完事之后我们新建一个网页和PHP文件和一个ajax文件

之后我们就要写前端的东西了

这是ajax文件

//将数据转换成 a=1&b=2格式;

function json2url(json){

var arr = [];

//加随机数防止缓存;

json.t = Math.random();

for(var name in json){

arr.push(name+'='+json[name]);

}

return arr.join('&');

}

function ajax(json){

//考虑默认值:

if(!json.url){

alert('请输入合理的请求地址!');

return;

}

json.type = json.type || 'get';

json.time = json.time || 5000;

json.data = json.data || {};

//1.创建一个ajax对象;

var timer = null;

if(window.XMLHttpRequest){

var oAjax = new XMLHttpRequest();

}else{

var oAjax = new ActiveXObject('Microsoft.XMLHTTP');

}

//判断用户传递的是get还是post请求:

switch (json.type.toLowerCase()){

case 'get':

//2.打开请求；

oAjax.open('get',json.url+'?'+json2url(json.data),true);

//3.发送数据:

oAjax.send();

break;

case 'post':

//打开请求;

oAjax.open('post',json.url,true);

//设置请求头;

oAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//发送数据;

oAjax.send(json2url(json.data));

break;

}

json.fnLoading && json.fnLoading();

//4.获取响应数据

oAjax.onreadystatechange = function(){

if (oAjax.readyState == 4) {

json.complete && json.complete();

if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {

//如果外边传递了成功的回调函数，那么就执行,

json.success && json.success(oAjax.responseText);

} else {

//如果外边传递了失败的回调函数，那么就弹出错误码,

json.error && json.error(oAjax.status);

}

clearTimeout(timer);//规定时间内取到数据后清除定时器;

}

};

};

这是html文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

img {

width: 20px;

height: 30px;

display: none;

}

</style>

</head>

<script src="ajax.js"></script>

<script>

window.onload = function() {

var oUser = document.getElementById('user');

var oPass = document.getElementById('pass');

var oBtn1 = document.getElementById('btn1');

var oBtn2 = document.getElementById('btn2');

var oImg = document.getElementById('img');

var oSpan = document.getElementById('span');

oBtn1.onclick = function() {

oImg.style.display = "block";

ajax({

url: 'user.php',

data: {

act: 'lgn',

user: oUser.value,

pass: oPass.value

},

fnLoading: function() {

oImg.style.display = 'block';

},

success: function(res){

var json = eval("(" + res + ")");

if(json.err) {

oSpan.innerHTML = json.msg;

oImg.style.display = "none";

} else {

oSpan.innerHTML = json.msg;

oImg.style.display = "none";

}

},

error: function(s){

alert(s);

}

});

}

}

</script>

<body>

username:<input type="text" name="user" id="user" /><br /><br /> password:

<input type="text" name="pass" id="pass" /><br /><br />

<input type="button" name="btn1" id="btn1" value="登录" />

<input type="button" name="btn1" id="btn2" value="注册" />

<img src="load.jpg" id="img" /><br /><br />

<span id="span"><br /><br />

</span>

</body>

</html>

我们要引入ajax，然后让ajax引入PHP，注意html中的图片是一个加载文件时的图片。加那个不过是为了更生动，加不加都行，加的话自己找一下那个动态图就行，网上有很多，找你自己喜欢的就行

这是php文件

<?php

header("Content-type: text/html; charset=utf-8");/*php文件以utf-8编码格式输出*/

error_reporting(E_ALL & ~E_DEPRECATED);/*忽略错误提示*/

$act=$_GET['act'];

@$user=$_GET['user'];

@$pass=$_GET['pass'];

switch($act){

case 'lgn':

mysql_connect('localhost','root','');

//引入的数据库名称

mysql_select_db('2017-6-25');

$sql="SELECT * FROM user WHERE

username='".$user."'";//这个是创建的数据表名

$res=mysql_query($sql);

$row=mysql_fetch_row($res);

if($row){

if($row[1]==$pass){

echo '{err:0, msg:"登录成功"}';

}else{

echo '{err:1,msg:"用户名或者密码错误!"}';

}

}else{

echo '{err:1,msg:"用户名不存在"}';

}

break;

case 'add':

mysql_connect('localhost','root','');

//引入的数据库名称

mysql_select_db('2017-6-25');

$sql="SELECT * FROM user WHERE username='".$user."'";//这个是创建的数据表名

$res=mysql_query($sql);

$row=mysql_fetch_row($res);

if($row){

echo '{err:1,msg:"用户名已存在!"}';

}else{

$I_SQL="INSERT INTO user VALUES('".$user."','".$pass."')";

mysql_query($I_SQL);

echo '{err:0,msg:"注册成功!"}';

}

};

?>

注意一下php中有你要查看的后台数据库和数据表的名字，只要把我们刚刚创建的数据库和数据表就行。之后我们只要打开一个浏览器之后在地址栏上添加127.0.0.1之后打开wampmanager程序页面找到我们刚刚创建的文件夹

之后打开我们新建的网页就行了（注意一定要把文件夹拖到wampmanager程序下的www文件夹才行）之后我们就可以看一下效果了

用wamp实现前端和php的交互效果的更多相关文章

  1. 前端与后台服务交互--json处理的流程以及用到的工具代码

    现在的开发趋势基本上是前后端分离,并且前端和后端的交互一般是用json: 前端: 前端一般传输的是对象,那把对象变成json,需要引用的是json2.js这个js文件中的JSON.stringfy() ...

  2. web前端与后台数据交互

    1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...

  3. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  4. ScrollMagic – 酷毙了！超炫的页面滚动交互效果

    ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...

  5. 微信网页悬浮窗交互效果的web实现

    一.微信的悬浮窗交互效果 微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了 ...

  6. 多功能前台交互效果插件superSlide

    平时我们常用的"焦点图/幻灯片""Tab标签切换""图片滚动""无缝滚动"等效果要加载n个插件,又害怕代码冲突又怕不兼容 ...

  7. AxureRP7.0各类交互效果汇总帖（转）

    了便于大家参考,我把这段时间发布分享的所有关于AxureRP7.0的原型做了整理. 以下资源均有对应的RP源文件可以下载. 当然 ,其中有部分是需要通过完成解密游戏[攻略]才能得到下载地址或者下载密码 ...

  8. 类似UC天气下拉和微信下拉眼睛头部弹入淡出UI交互效果（开源项目）。

    Android-PullLayout是github上的一个第三方开源项目,该项目主页是:https://github.com/BlueMor/Android-PullLayout  原作者项目意图实现 ...

  9. 【新手指南】App原型设计：如何快速实现这6种交互效果？

    做App原型设计,那么页面切换.进度条.页面滚动.图片轮播,下拉菜单,搜索框这些交互效果必不可少.如何简单快速地实现这些效果呢?以下小编根据经验为大家提供了一些简单的设计方法,以供参考. 1.页面跳转 ...

随机推荐

  1. Ubuntu14.04单机版kubernetes安装指导

    转:http://dockone.io/article/950 概述本文主要讲述如何在Ubuntu系统上安装kubernetes,网络上也有许多相关的文章,感觉都不是很清晰,这里我将自己的安装实践给大 ...

  2. Docker背景介绍

    背景介绍 Docker是PasS提供商DoctCloud开源的一个基于LXC的高级容器引擎,源代码托管在Github上,基于go语言并遵从Apache2.0协议开源.Docker近期非常火热,无论是从 ...

  3. Windows剪贴板操作简单小例

    1.复制文字到剪贴板 CString strText = L"须要拷贝到剪贴板的文字"; if ( ::OpenClipboard(m_hWnd) ) { if ( ::Empty ...

  4. vue-cli中实现全选、单选计算总价格（vue2.0）

    <template> <div> <table> <tr> <td><input type="checkbox" ...

  5. Hystrix使用Commond的三种方式

    目录(?)[-] 1 依赖引入 2 使用 21 Hystrix command 211 同步执行 212 异步执行 213 反应执行 214 三种模式使用区别 22 Fallback 23 Error ...

  6. vs2015开发so动态库linux

    #include <stdio.h> #include <dlfcn.h> typedef int(*fn_max)(int a, int b); int main() { p ...

  7. 基于jQuery页面窗口拖动预览效果

    今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  8. PHP——分页显示的完善（加查询，用类简化sql语句）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 如何解决redis高并发客户端频繁time out？

    解决方案:https://www.zhihu.com/question/24781521

  10. zabbix监控数据库

    Zabbix通过percona监控MySQL   因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用,业界的同学们都使用Percona Monitoring Plugin ...