我们今天来用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. 并发登录人数控制--Shiro系列(二)

    为了安全起见,同一个账号理应同时只能在一台设备上登录,后面登录的踢出前面登录的.用Shiro可以轻松实现此功能. shiro中sessionManager是专门作会话管理的,而sessinManage ...

  2. [转]IIS6 伪静态 IIS文件类型映射配置方法 【图解】

    1.右键点击 要设置网站的网站 2.属性 -->主目录 -->配置--> 3.如右侧窗口,找到 .aspx 扩展名-->编辑-->复制 可执行文件的路径-->关闭 ...

  3. JS自定义去除字符串左右两边的指定字符

    function ltrim(str,char){ var pos = str.indexOf(char); var sonstr = str.substr(pos+1); return sonstr ...

  4. Java Main如何被执行？

    java应用程序的启动在在/hotspot/src/share/tools/launcher/java.c的main()函数中,而在虚拟机初始化过程中,将创建并启动Java的Main线程.最后将调用J ...

  5. Windows Phone 提升开发效率（一）使用d:DataContext添加设计时Binding

    [问题的提出]   在开发过程中我们经常会遇到将UI同学提供的效果图转化成实际的页面,而在这过程中,多数时候Blend等设计工具默认情况下并不能提供很好的可视化支持. 举个简单的例子来说下吧:     ...

  6. PDF文件的加载及展示

    项目需要显示PDF文件,于是遍寻了网络,发现的方法以下几种: 1.使用UIWebView加载,没啥说的,根据文件路径,网络或者本地皆可,创建一个NSURLRequest,然后用webView加载就可以 ...

  7. java web hello world（二）基于Servlet理解监听

    java web最开始实现是通过Servlet实现,这里就来实现下,最原始的监听是如何实现的. 第一步,创建一个基本的web项目 ,参见(java web hello world(一)) 第二步,we ...

  8. ReentrantReadWriteLock读写锁的使用<转>

    Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...

  9. 《javascript征途》学习笔记

    基础 1. 只有函数有作用域 2. 如果在<script src>的src 中设置了src特性,则script元素包含的任意代码就无效了.应该分开放到不同的script块中. 3. 外部j ...

  10. 前端gulp自动化构建配置

    为了节省http请求次数.节约带宽,加速页面渲染速度,达到更好用户体验的目的.现在普遍的做法是在上线之前做静态资源的打包构建,也就是静态资源的合并压缩: 这里使用的是gulp,当然现在有更强大的模块化 ...