Ajax & PHP 结合讲解之四 表单

核心提示：通过上一篇文章已经了解到如何利用Ajax和PHP对数据库进行数据读取，这样可以动态的获取到数据库的最新数据，Ajax & PHP 结合讲解之四 表单，本篇则继续介绍通过表单（Form）向数据库中写入数据，谈到Form就涉及到一个发送请求方式问题（GET和POST），否则提示哪项未填写，当检查通过后会调用proc

通过上一篇文章已经了解到如何利用Ajax和PHP对数据库进行数据读取，这样可以动态的获取到数据库的最新数据。本篇则继续介绍通过表单（Form）向数据库中写入数据。

谈到Form就涉及到一个发送请求方式问题（GET和POST），对于GET和POST的使用和区别在本文就不详细说明了，一般对于Web开发由于 POST传值为隐式且传输数据量较大所以比较常用。在本例中对functions.js进行下修改，将创建XMLHttp对象程序创建为一个函数 processajax。

function　processajax　(serverPage,　obj,　getOrPost,　str){
　　//将创建XMLHttpRequest对象写到getxmlhttp()函数中，并获取该对象
　　xmlhttp　=　getxmlhttp　();
　　//GET方式（和前面几篇一样）
　　if　(getOrPost　==　"get"){
　　　　xmlhttp.open("GET",　serverPage);
　　　　xmlhttp.onreadystatechange　=　function(){
　　　　　　if　(xmlhttp.readyState　==　4　&&　xmlhttp.status　==　200){
　　　　　　　　obj.innerHTML　=　xmlhttp.responseText;
　　　　　　}
　　　　}
　　　　xmlhttp.send(null);
　　}　
　　//POST方式
　　else{
　　　　//第三个true参数将打开异步功能
　　　　xmlhttp.open("POST",　serverPage,　true);
　　　　//创建POST请求
　　　　xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;　charset=GB2312");
　　　　xmlhttp.onreadystatechange　=　function()　{
　　　　　　if　(xmlhttp.readyState　==　4　&&　xmlhttp.status　==　200)　{
　　　　　　　　obj.innerHTML　=　xmlhttp.responseText;
　　　　　　}
　　　　}
　　　　//表单（Form）传值
　　　　xmlhttp.send(str);
　　}
}

在下图中当点击“Submit”按钮后会激发submitform函数（functions.js），在该函数中会通过getformvalues函数检查Form内容是否都填写完毕，否则提示哪项未填写。当检查通过后会调用process_task.php程序，它会将Form值写入数据库。

notask

submitform 函数：

function　submitform　(theform,　serverPage,　objID,　valfunc){
　var　file　=　serverPage;
　//检查Form值
　var　str　=　getformvalues(theform,valfunc);
　//Form全部填写
　if　(aok　==　true){
　　obj　=　document.getElementById(objID);
　　//运行Ajax进行传值
　　processajax(serverPage,　obj,　"post",　str);
　}
}

getformvalues 函数：

function　getformvalues　(fobj,　valfunc){
　var　str　=　"";
　aok　=　true;
　var　val;　
　//遍历Form中所有对象
　for(var　i　=　0;　i　<　fobj.elements.length;　i++){
　　　if(valfunc){
　　　　　if　(aok　==　true){
　　　　　　　val　=　valfunc　(fobj.elements[i].value,fobj.elements[i].name);　
　　　　　　　if　(val　==　false){
　　　　　　　　　aok　=　false;
　　　　　　　}
　　　　　}
　　　}
　　　str　+=　fobj.elements[i].name　+　"="　+　escape(fobj.elements[i].value)　+　"&";
　}
　//将Form值以String形式返回
　return　str;
}

process_task.php 程序：

　　<?php
require_once　("dbconnector.php");
opendatabase();
//对数据预处理
$yourname　=　strip_tags　(mysql_real_escape_string　({$selection}　POST['yourname']));

　　$yourtask　=　strip_tags　(mysql_real_escape_string　(　{$selection}　POST['yourtask']));
　　$thedate　=　strip_tags　(mysql_real_escape_string　(　{$selection}　POST['thedate']));
　　//创建Insert语句
　　$myquery　=　"INSERT　INTO　task　(name,　thedate,　description)　
　　VALUES　('$yourname','$thedate','$yourtask')";
　　//执行SQL语句
　　if　(!mysql_query　($myquery)){
　　header　("Location:　theform.php?message=There　was　a　problem　with　the　entry.");
　　exit;
　　}
　　//返回成功信息
　　header　("Location:　theform.php?message=Success");
　　?>

出处: {GnieTech} (http://www.cnblogs.com/gnielee/)

本文示例源代码或素材下载

编缉推荐阅读以下文章

• Ajax & PHP 结合讲解之三 数据库
• Ajax & PHP 结合讲解之二 实例
• Ajax & PHP 结合讲解之一 Ajax基础