扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
举个例子:你想在用户点击时,把 apple 这个字符串,通过前端传给后端。
十载的高港网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整高港建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“高港网站设计”,“高港网站推广”以来,每个客户项目都认真落实执行。
前端,用 jQuery 举例:
$('button').click(function () {
$.ajax({
url: '/xxx',
method: 'post',
dataType: 'json',
data: {fruit: 'apple'}
}).done(function (res) {
// 成功后的回调
}).fail(function (err) {
// 失败后的回调
});
});
后端 PHP 处理:
$fruit = $_POST['fruit']; // 获取从 ajax 传过来的 fruit 的值,这里是 apple。
如果你想在前端重新显示这个字符串 apple,那么你要用 PHP 把数据返回给页面,然后在上面 “// 成功后的回调” 里面,补充逻辑代码。
例如 PHP 把 apple 返回给前端:
return json_encode(array('fruit' = 'apple'));
前端回调处理:
// 成功后的回调
alert(res.fruit); // 弹框显示 “apple”
实际上,$_POST 能够获取所有从前端用 post 方式提交过来的数据,不管你是页面刷新方式,还是 ajax(jQuery 才叫 ajax,实际上它是 XMLHttpRequest,异步非阻塞的请求方式)
返回数据代码如下:
如果在php里有echo的值的话,可以用AJAX来接收:
有多个输出的话,是不可能指定输出的
需要把想要输出的内容放到一个数组中,然后json_encode一下,在到js里循环,找到自己想要的值
比如:
//需要输出的内容
echo 'aaa'; echo 'bbb';echo ''ccc;
//合成数组
$data = array(‘name1’='aaa',‘name2’= 'bbb',‘name2’= 'ccc');
//json_encode
$data = json_encode($data);
//输出
echo $data;
js:
$.post('aa.php',‘’,function(mes){
var data = eval('(' + msg + ')');
var name1 = data['name1'];
var name2 = data['name2'];
var name3 = data['name3'];
})
上面引入jquery
script
$(document).ready(function(){
$("#login").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "POST",
url: "denglu.php",
data: "username="+username+"act=loginpassword="+password,
success: function(msg){
if(msg==1){
$("#message").show().html('登录成功').fadeOut(1000);
window.location = "index.php";
}else{
$("#message").show().html(msg).fadeOut(1000);
}
}
});
});
});
/script
用户名:input type="text" id="username" name="username"
密码:input type="password" id="password" name="password"
input type="button" value="登录" id="login" /
div id="message"/div
你如果想让后台以json格式返回数据,那么php就一定要用标准的json格式来输出数据,不要混杂其他无关数据。比如你的“返回的数据:”这几个字就属于多余数据,ajax在接收到返回数据后就会转换失败。所以你的 echo "返回的数据:"; 应该删掉(如果还有其他类似的输出语句也要删掉),确保输出的数据只有 ["jeff-A-01.png","jeff-d-01.png"] 这样的内容。
其实就是发送一个网络请求,服务端输出的内容就是响应的内容,如jQuery
$.ajax(
{
url: '', // 请求URL
data: '', // 请求时携带的参数
type: '', // 请求方式, GET/POST
dataType: '',// 响应数据格式, text/json
success: r = {
// 请求成功时回调函数,参数 r 为服务端响应的内容
console.log(r); // 就是你说的后台数据
},
error: () = {
console.error('fail'); // 请求失败
}
}
)
// 服务端响应内容
$data = []; // 从数据库中获取的数据
echo json_encode($data); // 响应客户端, 数据格式为 JSON
本篇将继续通过该实例讲解与数据库的交互方式。实例中用到的是MySQL,也可以根据自己的需要替换为其他数据库,其连接方式可以参考PHP相关手册。
在下面源程序包中dbconnector.php
提供了与MySQL的连接函数。
复制代码
代码如下:
?php
//定义数据连接变量
define
("MYSQLHOST",
"localhost");
define
("MYSQLUSER",
"root");
define
("MYSQLPASS",
"root");
define
("MYSQLDB",
"test");
function
opendatabase(){
//连接数据库所在服务器
$db
=
mysql_connect
(MYSQLHOST,MYSQLUSER,MYSQLPASS);
try
{
if
(!$db){
//若无法连接则提示错误
$exceptionstring
=
"Error
connection
to
database:
br
/";
$exceptionstring
.=
mysql_errno().":
".mysql_error();
throw
new
exception
($exceptionstring);
}
else{
//连接数据库(test)
mysql_select_db
(MYSQLDB,$db);
}
return
$db;
}catch
(exception
$e){
echo
$e-getmessage();
die();
}
}
?
当鼠标放到某个日期上时会调用functions.js中的checkfortasks函数。同时checkfortasks会加载taskchecker.php程序,它会到MySQL中查询该日期下所有的备忘录信息,并将结果返回到页面中。
复制代码
代码如下:
?php
//调用数据库连接程序
require_once
("dbconnector.php");
//连接数据库
$db
=
opendatabase();
//在MySQL查询备忘录
$querystr
=
"SELECT
description
FROM
task
WHERE
thedate='"
.
addslashes
($_GET['thedate'])
.
"'";
//执行SQL
if
($datequery
=
mysql_query
($querystr)){
//判断查询是否有值
if
(mysql_num_rows
($datequery)
0){
?
div
style="width:
150px;
background:
#FFBC37;
border-style:
solid;
border-color:
#000000;
border-width:
1px;"
div
style="padding:
10px;"
?php
//显示备忘录信息
while
($datedata
=
mysql_fetch_array
($datequery)){
if
(!get_magic_quotes_gpc()){
echo
stripslashes
($datedata['description']);
}
else{
echo
$datedata['description'];
}
}
?
/div
/div
?php
}
}
else{
//数据库查询错误
echo
mysql_error();
}
//关闭数据库
mysql_close
($db);
?
对于Ajax的使用和上一篇的原理是一样的:1.
通过事件调用Ajax函数;2.
通过函数请求其他PHP程序,PHP程序中可以对数据库之类的数据源进行读、写、改操作;3.
将处理结果加载到事件激发页面。在下图中鼠标放到26号时,Ajax会在MySQL中查询到“Football
Match”事件并加载到当前页面。
源代码下载
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流