实战AJAX-------简单实例解析
|
前言：在学JQUERY的时候，当时总感觉AJAX很难，也不会用，也不知道用来干嘛的，随着逐渐的深入，水平的不断提高，再回过头来看AJAX，就没那么难了，反而被它强大的功能所吸引。我现在的理解是，以往的页面如果在实现与数据库，并且将数据库的内容显示出来，只有刷新当前页面，除非使用你已经写好的JS脚本了，不仅造成页面刷新时重复请求服务器的带宽损失，而且对用户也不友好，并且对于程序员来说，为了提高用户体验，就不得不在刷新前保存各种数据，以免刷新完了之后，用户数据丢失，所以如何在请求数据库时，不用刷新当前页面，就像当时已经写好的JS页面一样，随时响应，这时AJAX就应运而生了，而AJAX对于提升用户体验真得是起到了突破性的进展，向开发AJAX的同志们表示深深的敬意。 本篇内容：我们从一个简单的实例出发，来了解jquery的AJAX的具体使用方法，最后我将给出源代码，供大家分享交流。 将要实现功能： 先发个图：（界面比较丑，大家只关注效果好了^_^） 这里有两个标签，ID值分别是click1,click2；当点击任何一个标签时，触发它的AJAX，将它的ID值与背景值传给PHP页面去处理，PHP页面在接收到这些值后，在数据库里为它新建一行，并找到所插入行的ID号，作为JSON返回值的一部分。 数据库部分： 一、首先我这里本地服务器，用户名为：root 密码为：admin，如果不一样，请到页面里去改成自己的，这个应该不用再讲了。 二、新建一个数据库，命名为tryDB，编码格式为：utf8_general_ci 三、新建一个表，建表命令如下： CREATE TABLE `try`( `id` int(11) NOT NULL auto_increment,`class_id` varchar(25),`background` varchar(100),PRIMARY KEY (`id`) ); 下面是代码讲解： 首先是显示的PHP页面的代码，这个页面我命名为：tryAJAX.php <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
#click1,#click2{
width:100px;
}
div{
width:500px;
}
</style>
<script type="text/javascript">
<!--
$(function(){
$("#click1,#click2").click(function(){
$.ajax({
url: "ajax_php.php",type: "POST",data:"id="+$(this).attr('id')+"&bg="+$(this).get(0).style.background,success: function(json,status){//如果调用php成功
var tempNode="<div style='background:"+json.bg+";'>生成此HTML的标签ID为"+json.class_id;
tempNode+=",新生成的数据库的ID值为"+json.sqlId+"</div>";
$("body").append(tempNode);
}
});
})
});
//-->
</script>
</head>
<body>
<h3>点击下面标签访问DB，并插入数据并返回</h3>
<div id="click1" style="background: #fff000;">标签一</div>
<br><br>
<div id="click2" style="background:#000fff;">标签二</div>
<br><br>
</body>
</html>
这段代码非常简单，我相信大家都可以看懂，只是这里有几个注意事项，我说下 1、调用ajax函数时，注意用的是$.ajax()，不是$(this)！ 2、Ajax中的success部分讲解 3、Ajax中的data部分讲解 下面是PHP处理页面代码讲解： 先贴出代码： <?php
header('Content-type:text/json'); //这句是重点，它告诉接收数据的对象此页面输出的是json数据；
$conn=mysql_connect("localhost","root","admin") or die("数据库服务器连接错误".mysql_error());
$class_id=$_POST['id'];
$bg=$_POST['bg'];
mysql_select_db("tryDB",$conn);
mysql_query("insert try(class_id,background)values('$class_id','$bg')");
$sqlId=mysql_insert_id();//获取刚才插入的ID值
//为了增加JSON使用效果，我们不仅将新生成的ID号返回，同时也将传过来的DIV 标签的$class_id值与$bg返回去；
//当然，你在实际应用中，可以使用其它变量，我讲的只是使用json返回数值的方法
$json=json_encode(array('sqlId'=>$sqlId,'class_id'=>$class_id,'bg'=>$bg));
echo $json;
讲解： 1、 注意第一句：header('Content-type:text/json');如果你用的不是JSON，这句要变成对就的比如text/html啥的，想知道还有哪些类型，问度娘； 2、 再值得讲的就是倒数第二句了，注意要生成JSON对象，要使用json_encode函数，将要生成的序列，先生成一个ARRAY数组，然后由json_encode函数自已转化成JSON对象； 3、 注意PHP处理页面的返回方式，是用echo而不是用return! 转载请大家标明转载地址：http://www.52php.cn/article/p-toethyvb-bae.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |