我们今天来用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. 每日英语：Why Chinese Companies Lack Homegrown Luxury Brand Power

    Chinese companies build iPads, high-speed trains and world-class telecom gear, but they can't seem t ...

  2. Java 之进制转换

    //十进制转十六进制 import java.util.Scanner; public class Main{ public static void main(String[] args){ Scan ...

  3. js 实现依赖注入的思想，后端框架思想搬到前端来

    前述:咱们写一些页面的时候,很多需要用ajax来实现,显示又有很多表单提交的add或者update操作,太烦了,能不能有什么方法能够简单些呢? 说实话我都是被公司给逼的 应用场景: 前后端一一对应.表 ...

  4. FreeRTOS基础知识

    前面一篇文章介绍了一些命名规范之类的基础知识,但是我觉得还缺少一定前言知识,就是裸机和操作系统有什么区别,为什么我们需要学freertos,因为招聘要求?那么为什么招聘网又会有这个要求呢?所以我们为什 ...

  5. FreeRtos——移植

    现在准备的简单程序LED灯的工程目录中增加freertos文件夹: 在 source目录下的portable目录下只留下下面的文件夹: 为什么呢? 把对应文件移植在工程中之后,添加头文件路径如下图: ...

  6. Makefile 12——改善编译效率

    从Makefile的角度看,一个可以改善编译效率的地方与其中的隐式规则有关.为了了解make的隐式规则,我们把之前的simple项目的Makefile做一点更改,删除生成.o文件的规则(与隐式规则相对 ...

  7. Groovy学习（）Groovy是啥？

    Groovy是啥? groovy是英文中的一个单词,有marvelous.wonderful和excellen的意思. groovy是轻量级的,动态的,面向对象的,并且运行在JVM上的. groovy ...

  8. Unix系统编程（）虚拟内存管理

    在之前学到过进程的内存布局中忽略了一个事实:这一布局存在于虚拟文件中. 因为对虚拟内存的理解将有助于后续对fork系统调用.共享内存和映射文件之类的主题阐述,这里还要学习一下有关虚拟内存的详细内容. ...

  9. php 模板框架之smarty 的下载和安装

    Smarty 官网: http://www.smarty.net/ Smarty 下载: https://github.com/smarty-php/smarty/releases/tag/v3.1. ...

  10. 扩展KMP - HDU 4333 Revolving Digits

    Revolving Digits Problem's Link Mean: 给你一个字符串,你可以将该字符串的任意长度后缀截取下来然后接到最前面,让你统计所有新串中有多少种字典序小于.等于.大于原串. ...