我们今天来用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. WCF实现RESTFul Web Service

    共同学习了前面一些概念,终于开始正题了哈.RESTful的Web Service调用直观,返回的内容容易解析.这里先会描述一个简单的场景--Web Service提供一个方法来搜索个人信息,传入人名, ...

  2. MS SQL表字段自增相关的脚本

    --查询表是否有自增字段 SELECT OBJECTPROPERTY(OBJECT_ID('[表名]'), 'TableHasIdentity') --查询表的自增字段 SELECT COLUMN_N ...

  3. Spring Cloud概述

    Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁 ...

  4. 父级和 子集 controller 之间的通讯

    在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式 基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通 ...

  5. 安卓-启动下一个Activity

    Intent intent = new Intent(NotebookActivity.this, MessageActivity.class); startActivity(intent); 通过意 ...

  6. ECN

    ECN是工程变更管理,主要用来管理BOM的生效日期,及记录BOM的更改内容:在SAP系统中,需先创建ECN更改号码,凭ECN号码去更改管理BOM

  7. vue知识点2018.6.3

    文件夹和文件名称 简介 build 构建脚本目录 config 应用程序的配置文件 index.html 入口页面 node_modules 存放 NPM 依赖模块 package-lock.json ...

  8. 0062 Spring MVC的文件上传与下载--MultipartFile--ResponseEntity

    文件上传功能在网页中见的太多了,比如上传照片作为头像.上传Excel文档导入数据等 先写个上传文件的html <!DOCTYPE html> <html> <head&g ...

  9. forward declaration of class 错误

    在使用Qt的时候遇到这个错误,查了一下发现,是因为我没有正确的使用前置声明. #ifndef FIRSTPAGE_H #define FIRSTPAGE_H #include "ui_dia ...

  10. 基于html5制作3D拳击游戏源码下载

    今天给大家分享一款基于HTML5实现的3d拳王游戏源码.这款实例适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览 ...