开发学院网页设计JavaScript Ajax & PHP 结合讲解之四 表单 阅读

Ajax & PHP 结合讲解之四 表单

 2009-12-01 00:00:00 来源:WEB开发网   
核心提示:通过上一篇文章已经了解到如何利用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基础

Tags:Ajax amp PHP

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接