ajax自动提交表单数据，经php处理返回数据

来源：互联网发布：来自远古星星的你知乎编辑：程序博客网时间：2024/05/16 11:39

主要实现功能，通过输入卡号，姓名，查询出该公交卡号对应的余额。

前台代码如下(其中引入了一个ajax.js文件，我会把文件夹上传上去,主要实现实例化ajax)中间使用了ajax.post方法手册链接点击打开链接

由于ajax.js文件不能上传所以我就以代码的形式贴出来了

function Ajax(recvType){                          //recvType返回类型         var aj=new  Object();                    //创建对象   aj.recvType=recvType ? recvType.toUpperCase():'HTML';        //可传HTML / XML aj.targetUrl='';                        //请求目标的url aj.sendString='';                       //发送的字符串(用于 post 方式) aj.resultHandle=null;   aj.createXMLHttpRequest=function(){     //创建ajax引擎对象             var request=false;                                //window对象中有 XMLHttpRequst存在就是 非IE  包括{IE7 8}            if(window.XMLHttpRequest){                      request=new XMLHttpRequest();              if(request.overrideMimeType){                      request.overrideMimeType("text/html");              }                     //window对象中有ActiveXObject属性存在就是IE            }else if(window.ActiveXObject){                      var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP'];                  for(var i=0;i<versions.length;i++){                       try{                            request=new ActiveXObject(versions[i]);                        if(request){                                  return request;                         }                       }catch(e){                            request=false;                         }                  }           }                return request;   }                                     //ajax请求返回的对象就是request aj.XMLHttpRequest=aj.createXMLHttpRequest();    aj.processHandle=function(){      if(aj.XMLHttpRequest.readyState==4){         if(aj.XMLHttpRequest.status==200){      if(aj.recvType=="HTML")            aj.resultHandle(aj.XMLHttpRequest.responseText);  else if(aj.recvType=="XML")            aj.resultHandle(aj.XMLHttprequest.responseXML); }  } }                               //targetUrl 目标的url                //resultHandle 专门处理结果的回调函数      aj.get=function(targetUrl,resultHandle){                         aj.targetUrl=targetUrl;   if(resultHandle!=null){        aj.XMLHttpRequest.onreadystatechange=aj.processHandle;        aj.resultHandle=resultHandle;   }      if(window.XMLHttpRequest){                        //非  IE                                    //用get打开服务器       aj.XMLHttpRequest.open("get",aj.targetUrl);          aj.XMLHttpRequest.send(null);      }else{       aj.XMLHttpRequest.open("get",aj.targetUrl,true);          aj.XMLHttpRequest.send();   }      }  aj.post=function(targetUrl,sendString,resultHandle){           aj.targetUrl=targetUrl;   if(typeof(sendString)=="object"){         var str=""; for(var pro in sendString){  //pro 用来获取对象的属性名的        str+=pro+"="+sendString[pro]+"&"; }                             //去掉字符串多余的一个 & aj.sendString=str.substr(0,str.length-1);   }else{         aj.sendString=sendString;   }      if(resultHandle!=null){        aj.XMLHttpRequest.onreadystatechange=aj.processHandle;        aj.resultHandle=resultHandle;   }  aj.XMLHttpRequest.open("post",targetUrl);                  aj.XMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");                    aj.XMLHttpRequest.send(aj.sendString);      }  return aj;}

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数描述url必需。规定把请求发送到哪个 URL。data可选。映射或字符串值。规定连同请求发送到服务器的数据。success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。dataType

可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）。

详细说明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script  type="text/javascript" src="./js/Ajax.js"></script><style>#main{width:900px;height:500px;margin:0 auto;border:solid 1px;background-color:#5DA6EA;}</style><script type="text/javascript">function send(){var id= document.frm.id.value;var username = document.frm.username.value;//获取到表单中的数据，然后通过ajax提交到php页面var ajax=Ajax();  ajax.post("get_post.php",{tid:id,user:username}, function(data){              /*document.getElementById(obj.id).innerHTML=data;*/              alert(data);              document.frm.money.value=data;              });}</script><title></title></head><body><div id='main'><form name="frm"><table width="810px"height="100px"><tr><td>卡号：<input type="text" name="id"></td></tr><tr><td>姓名：<input type="text" name="username" onblur="send();"></td><td>余额：<input type="text" id="a" name="money">元</td></tr></table><br><br></form></div></body></html>

前台页面效果:

数据提交到get_post.php,代码如下:

<?php require('./conn.php'); $id=mysqli_escape_string($link,$_POST['tid']); $username=mysqli_escape_string($link,$_POST['user']); $sql="select num from peo_info where id='$id' and name ='$username'"; $res=mysqli_query($link,$sql); $row=mysqli_fetch_assoc($res); echo  $row['num'];

连接数据库的页面conn.php

代码如下:

<?php $link=mysqli_connect('localhost','root','123456','subway'); //subway为库名，建库语句 create database subway charset utf8;if(!$link){echo '数据库连接失败';}$sql="set names utf8";mysqli_query($link,$sql);?>

后台数据库建表语句

 CREATE TABLE `peo_info` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `name` char(30) NOT NULL DEFAULT '',  `num` tinyint(4) NOT NULL DEFAULT '0',  PRIMARY KEY (`id`)) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

insert into peo_info values (1,'张三',30);

实现效果，鼠标离开姓名表单框以后:

0 0