Ajax & PHP 边学边练 之四 表单-阿里云开发者社区

开发者社区> 范大脚脚> 正文

Ajax & PHP 边学边练 之四 表单

简介:
+关注继续查看

通过上一篇文章已经了解到如何利用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 ($_POST['yourname']));
$yourtask = strip_tags (mysql_real_escape_string ($_POST['yourtask']));
$thedate = strip_tags (mysql_real_escape_string ($_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"); ?>

源代码下载





本文转自Gnie博客园博客,原文链接:http://www.cnblogs.com/gnielee/archive/2009/11/27/1612035.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
2171 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3956 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9307 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
10712 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
3807 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
2901 0
+关注
2785
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载