首页 > Web > 一个php+AJAX的开发实例

一个php+AJAX的开发实例

2013-04-29 16:07 星期一    浏览: 1,496    绿 发表评论 阅读评论

前段时间现学现用,用php写了个简单的网站后台系统,其中涉及到AJAX的运用,等到五一假期终于有点时间将其记录下来。

该后台系统中一个小功能是更新数据库记录状态。不希望在更新状态时,去刷新整个页面,因而采用AJAX实现。
这样,在点击更新按钮后,整个页面不需要更新,而是该记录状态得到更新。

显示并编辑一条数据库记录的php代码放在文件editor.php脚本中。更新记录状态只是对该条数据库记录中的一个字段的更改。
一个
在editor脚本中,首先指明了所使用的javascript脚本update.js,然后调用其里面的getXMLHTTPRequest函数,返回一个HTTPRequest对象或
ActiveXObject对象。有过Android客户端开发经验的同学知道,它是用于向HTTP服务器发送HTTP请求。
editor.php前面的代码如下:

<head>
<script src="update.js" type="text/javascript"></script>
<script type="text/javascript">
var myReq = getXMLHTTPRequest();
</script>

</head>

update.js脚本中的getXMLHTTPRequest函数的代码如下(直接摘自《PHP和MySQL Web开发》):

function getXMLHTTPRequest() {
var req = false;
try {
/* for Firefox */
req = new XMLHttpRequest();
} catch (err) {
try {
/* for some versions of IE */
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err) {
try {
/* for some other versions of IE */
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err) {
req = false;
}
}
}

return req;
}

在其中间的表单代码如下,有5种状态可供选择,单选(注意:选项元素的名称为”status”):

function updateStatus()
{
global $orderId;

echo "<div><font color='red'>
<form name='form' id='form' >
更改订单状态: <input type='radio' name='status' value='0' /> 状态0
<input type='radio' checked='checked' name='status' value='1' /> 状态1
<input type='radio' name='status' value='2' /> 状态2
<input type='radio' name='status' value='3' /> 状态3
<input type='radio' name='status' value='-1' /> 状态-1
<input type=button value=更新 onClick=\" javascript:updateStatus($orderId); \" />
<input type='reset' value='重置' /></form></font></div>";
}

其中处理按钮“更新”的鼠标点击事件的函数是javascript:updateStatus($orderId);
其中$orderId是该条数据库记录的id号,来自网页跳转时通过GET方式获取。
update.js脚本中的updateStatus函数代码如下,其中前面的for循环用于获取上面的表单选择结果(注意:它是通过文档对象doucument借助于名称为”status”的元素获取哪一项被选中);再接着,对选择结果进行非空检查。最后,使用HTTP请求对象发送更新请求。


function updateStatus(id) {

var status = 0;
for (var i = 0; i < document.getElementsByName(“status”).length; i++)
{
if(document.getElementsByName(“status”)[i].checked)
{
status = document.getElementsByName(“status”)[i].value;
}
}

var ret=checkIsEmpty(status);
if(ret)return;

var url = “update.php”;
var params = “operation=updateStatus”+”&id=”+encodeURI(id)+”&status=” + encodeURI(status);
myReq.open(“POST”, url, true);
myReq.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
myReq.setRequestHeader(“Content-length”, params.length);
myReq.setRequestHeader(“Connection”, “close”);
myReq.onreadystatechange = updateStatusResponse;
myReq.send(params);

// alert(params);

}

上面的url变量指出了由谁去处理,params是请求的内容,即该字符串变量被发送给HTTP服务器,其包含的参数由"&"隔开,如同浏览器地址栏中的请求。open函数使用了POST方式,后面的setRequestHeader指定了HTTP请求头,可参见HTTP协议说明。onreadystatechange是得到HTTP回复后的回调处理函数,其代码如下:

function updateStatusResponse() {
if (myReq.readyState == 4) {
if(myReq.status == 200) {
result = myReq.responseText;
document.getElementById('status').innerHTML = result;
} else {
alert('更新状态失败');
}
}
}

其检查状态以及HTTP回复是否OK无误,进而获取文档中的"status"元素,将服务器返回的字符串结果值赋值给其innerHTML变量。这样,就可以实现不刷新整个页面的情况下,只刷新页面中的"status"网页元素。

上面都是在客户端执行。再看下服务器端的update.php文件。在判读客户端送来的操作类型后,取得状态,然后进行更新:
update.php中的部分代码如下:

$orderManager = new OrderManager();
switch ($operationID)
{
case "updateStatus":
$status=strip_tags(trim($_REQUEST['status']));
if(!empty($status)){
$ret=$orderManager->updateStatus($orderid,$status);
if($ret)
showStatus($status);
else
echo "<div id='status'>订单状态:更新失败</div>";
}
else
echo "无效状态";
break;
}

在更新操作无误后,将更新结果回送给客户端;若更新失败,则回送更新失败的错误提示。
其中,更新无误后的结果回送代码如下:

function showStatus($status)
{
/
switch ($status){
case '-1':
$statusStr="状态-1";
break;
case '0':
$statusStr="状态0";
break;
case '1':
$statusStr="状态1";
break;
case '2':
$statusStr="状态2";
break;
case '3':
$statusStr="状态3";
break;
default:
$statusStr="状态-1";
break;

}

echo "<div id='status'>状态:".$statusStr."</div>";
}

可见,上面将根据结果,回送少量的字符,就可以实现客户端页面的更新。注意:上面的代码在状态更新后,并没有从数据库读取更新后的状态返回给客户端,只是在认为对数据库操作成功后,就假设数据库操作真的成功。

对于更改价格的操作,则是在文本框中输入价格,然后通过表单获取:this.form.totalPrice.value
完整代码如下:

function updateTotalPrice()
{

global $orderId;

echo "<font color='red'>
<form name='form' id='form'>
更改总价:<input type='text' name='Price' size='10' maxlength='20' />
<input type='button' value='更新' onClick=\"javascript:updatePrice($orderId,this.form.Price.value);\">
<input type='reset' value='重置' /></form></font>";
}

 

另附:注意事项

1.服务器端任何php的语法错误、数据库操作错误,都将导致AJAX操作失败。这时,需要查看错误日志:tail /var/log/apache2/error.log(ubuntu下)获知是哪儿出现语法错误。

2 js的脚本错误如语法错误,将导致函数不能不执行,即没有任何响应,似乎没有调用一样。这时,最好仔细排查javascript中是否有错误,如语法错误。

3.php脚本文件中的全局变量在函数内部不可见,必须在函数内部使用global关键字声明才可见:global $orderId;

 

本文链接地址: http://blog.redwolf-soft.com/?p=2266

原创文章,版权©红狼博客所有, 转载随意,但请注明出处。

    分享到:

相关文章:

  • 无相关文章
分类: Web 标签: ,
  1. 本文目前尚无任何评论.
订阅评论
  欢迎参与讨论,请在这里发表您的看法、交流您的观点。