Designsor

AJAX简单应用，提交和查询。

1月 10th, 2010

很久没有回来更新自己的BLOG了，真的是不知道写些什么，可是不写真的不知道自己的进步，因为转行了，所以很多新的东西要学习，那么从现在开始，我也要写一些简单的技术和教程记录了。

对了，忘记告诉很多朋友，我已经不是WEB设计师了，现在的目标职业是WEB前端开发工程师。

现在开始正文，我们先明确一下自己的准备。这篇教程属于初级教程，面对的是一点AJAX方面经验没有的和一些网页爱好者。

先看一下最终的成品效果图：

下面是一些准备工具的截图和下载地址：

http://www.designsor.com/download/jiaoxue/SmartApache.zip

集成了php,mysql,apache的傻瓜包，这里不单独讲解如何配置PHP环境。

http://www.designsor.com/download/jiaoxue/phpMyAdmin.zip

PHPmyadmin下载地址。

http://www.designsor.com/download/jiaoxue/jquery.rar

JqueryCHM手册和文件。

希望你能自己了解一下上面的工具的来源和具体作用，安装完全之后，请先测试本机是否可以运行PHP环境。

当然基本的PHP语法语句也不在这里讲解，我PHP也不太好，会用而已。请确定本机是否安装好了PHP环境，不论你用什么方法，请一定确认。也可以使用google.cn进行相关PHP环境搭建的教程！

HTML部分：

<form>
<fieldset>
<legend>一个AJAX+PHP的POST表单</legend>
<label for="name">姓名：</label>
<input name="name" type="text" id="name"/>
<label for="work">工作：</label>
<input name="work" type="text" id="work"/>
<label for="age">年龄：</label>
<input name="age" type="text" id="age"/>
<input class="sub" type="submit" value="提交" />
<input class="rest" type="reset" value="重写" />
</fieldset>
</form>
<div id="list">
<h1>最新的一条录入</h1>
<div id="lastnews">小爝 前端开发工程师 22岁</div>
</div>

CSS部分：

*{
margin:0px;
padding:0px;
font-family:Arial;
font-size:14px;
}
form,#list{
margin:20px;
}
fieldset{
width:300px;
padding:20px;
line-height:30px;
}
input{
border:#ccc solid 1px;
height:17px;
padding:2px;
}
.sub,.rest{
letter-spacing:2px;
height:22px;
}
#lastnews{
margin-top:10px;
}

下面HTML部分的基础工作已经做好。我们来建立我们的MYSQL数据库来储存我们的信息，表结构如下图。

很简单不做什么解释，如果看不懂可以自己google一些phpadmin的相关用法和一些数据库知识尝试。

下面开始编写PHP方面脚本，首先是连接数据库。

 $link=mysql_connect("localhost","root","gochina");
 mysql_select_db("www");
 mysql_query("set sql_mode = '' ");
 mysql_query("set names 'utf-8'");

然后是action的判断与数据操作。

 $action=$_GET['action'];
 $name=htmlspecialchars_decode($_GET['name']);
 $work=htmlspecialchars_decode($_GET['work']);
 $age=htmlspecialchars_decode($_GET['age']);
  //过滤一些不想要的标记，并接收下存入变量;
if($action=="add"){
 $exec = "INSERT INTO ajaxpost (name,work,age) VALUES ('$name','$work','$age')";
 $result = mysql_query($exec);
 //写入一条sql语句，执行储存功能;
 mysql_close();
 }
else if($action=="news"){
 $exec="select * from ajaxpost ORDER BY UID DESC limit 0,1";
 $result = mysql_query($exec);
 $post= mysql_fetch_array($result);
 echo "姓名:".$post['name']."职业:".$post['work']."年龄:".$post['age'];
 mysql_close();
 }

主要解释几点，就是用2个action来区别了下不同的ajax请求，常见的手段，这样一个页面可以通过一个action来做很多不同的响应反应。之后就是2个操作，一个储存，一个搜索。
之后下面是进行ajax的javascript代码，请写入下面代码前加载jquery的库文件。

$(function(){
$("form .sub").click(function(){
var name=$("input[name='name']").val();
var work=$("input[name='work']").val();
var age=$("input[name='age']").val();
//获得值
$.ajax({
type: "GET",
url: "ajax.php",
data: "action=add&name="+name+"&work="+work+"&age="+age,
success:function(){
update();
//添加成功后回调刷新的函数
 }
});
//阻止事件冒泡
return false;
});
//刷新的函数，又一个ajax请求
var update=function(){
 $.ajax({
 	type: "GET",
  	url: "ajax.php",
 	data: "action=news",
	cache: false,
 	success: function(msg){
   	$("#lastnews").html(msg);
  	}
});
//成功后把查询内容返回给容器。
}
});

差不多到这里我本地运行就已经成功了。这里提出一个小建议，最后的处理中文字符集问题，由于ajax的只支持utf-8编码，所以PHP文件，mysql数据库字符集和页面一定要统一编码，最后测试OK。
其实ajax也没什么难的，主要是jquery把它封装的比较傻瓜化，可以参见上面下载的那个chm手册有详细的一些说明。
代码写的比较烂，高手勿笑，我只是给个朋友做个范例。

Posted in 前端开发 | No Comments »