PHP jQuery ajax 表单提交小示例（含insert, select）

功能描述：能够通过表单向MySQL数据库新增记录，能够表单提供关键词进行查询

index.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />货物销售记录<script src="JS/jquery-1.8.2.min.js"></script><script language="javascript" src="JS/function.js"></script><link rel="stylesheet" type="text/css" href="css/style.css"/><body>销售方功能模拟：
登记销售记录>>
          客户姓名                        
          客户电话                        
          购货日期                        
          货物编号                        
          货物名称                        
          购货数量                        
          这里显示结果     
  
查询销售记录>>
    
  选择类别：          客户姓名      客户电话      货物编号      货物名称      购物日期      
  查询值：      
        
 这里显示销售方查询结果
顾客方功能模拟：
货物验证>>
            客户姓名                       *            
          客户电话                       *            
          货物编号                       *            
                      
  
这里显示验证结果

index.html效果图

function.js

// JavaScript Document//插入记录$(function(){	$("#button").click(function(){		$("#insertStatus").text("正在保存，请稍候..."); //显示提醒		//获取用户值		txtUserName=$("#txtUserName").val(); 		txtUserTel=$("#txtUserTel").val();		txtDate=$("#txtDate").val();		txtGoodsID=$("#txtGoodsID").val();		txtGoodsName=$("#txtGoodsName").val();		txtGoodsNum=$("#txtGoodsNum").val();		//以ajax方式与后台程序交互		$.ajax({			url:'insert.php',  		    type:'post',  		    dataType:'html',			data:{postUserName:txtUserName,postUserTel:txtUserTel,postGoodsID:txtGoodsID,postGoodsName:txtGoodsName,postGoodsNum:txtGoodsNum,postDate:txtDate},         		    success:function(data)				{					if(data==1)						$("#insertStatus").text("保存成功");					else						$("#insertStatus").text("保存失败");				}			})		})	})// 查询全部记录$(function(){	$("#button2").click(function(){		$("#queryResult").text("正在查询，请稍候...");		$.ajax({			url:'query.php',  		    type:'post',  		    dataType:'json',			data:{queryType:'all'}, // 设置查询类型变量，让后台程序区分是全部查询还是条件查询					   //查询成功，调用函数返回结果		    success:showQueryResult,				//查询失败，显示提示			error:function(){				$("#queryResult").html("没有查询到结果。");					}			})		})	})	// 条件查询$(function(){	$("#button3").click(function(){		$("#queryResult").text("正在查询，请稍候...");		txtField=$("#queryField").val();		txtKeyword=$("#queryKeywords").val();		$.ajax({			url:'query.php',  		    type:'post',  		    dataType:'json',			data:{queryFields:txtField,queryKeywords:txtKeyword},			//查询成功，调用函数返回结果		    success:showQueryResult,				//查询失败，显示提示			error:function(){				$("#queryResult").html("没有查询到结果。");					}			})		})	})		//客户验证	$(function(){		$("#button5").click(function(){			$("#validateResult").text("正在验证，请稍候...");			txtUserName=$("#txtUserName2").val();			txtUserTel=$("#txtUserTel2").val();			txtGood来&源gao@dai!ma.com搞$代^码%网搞gaodaima代码sID=$("#txtGoodsID2").val();			$.ajax({				url:"validate.php",				type:"POST",				dataType:"html",				data:{postUserName:txtUserName,postUserTel:txtUserTel,postGoodsID:txtGoodsID},				success:function(data){							if(parseInt(data)>0)	//后台程序会将查询结果记录的条数返回到这里，根据此值检查是否查询到记录							$("#validateResult").html("验证成功！根据您提供的信息，我们认定为有效交易，");						else 							$("#validateResult").html("对不起，我们无法验证您输入的信息的有效性，验证失败。");					},					error: function(){							$("#validateResult").html("查询出错，请联系网站管理员");						}				})						})		})						//隐藏查询结果	$(function(){		$("#button4").click(function(){			$("#queryResult").html("");			})		})			//显示查询结果		function showQueryResult(data)	{			  			var str="";	 	$.each(data,function(index,info)	 	 {  	  		 str+="";		})		$("#queryResult").html(str+"编号 客户姓名 客户电话 货物编号 货物名称 货物数量 交易日期
"+info["ID"]+" "+info["userName"]+" "+info["userTel"]+" "+info["goodsID"]+" "+info["goodsName"]+" "+info["goodsNum"]+" "+info["tradeDate"]+"
");				}

insert.php //新增记录后台程序

<?php$insertSQL="insert into tradeDetails values(null,'".$_POST['postUserName']."','".$_POST['postUserTel']."','".$_POST['postDate']."','".$_POST['postGoodsID']."','".$_POST['postGoodsName']."','".$_POST['postGoodsNum']."')";mysql_connect('localhost','root','root');mysql_query("set names utf8");mysql_select_db("test");echo mysql_query($insertSQL);?>

query.php //查询功能后台程序

<?phpmysql_connect("localhost","root","root");mysql_query("set names utf8");mysql_select_db("test");$querySql="";if(isset($_POST['queryType'])==true) //获取查询类型，如果queyType变量存在，则说明是全部查询{	$querySql="select * from tradeDetails order by ID";}else // 否则，是条件查询{	$querySql="select * from tradeDetails where ".$_POST['queryFields']."='".$_POST['queryKeywords']."'";}$myrs=mysql_query($querySql);while($row=mysql_fetch_array($myrs,MYSQL_ASSOC))	{		$arr[]=$row;	}echo json_encode($arr);?>

validate.php //客户功能后台程序

<?phpmysql_connect("localhost","root","root");mysql_query("set names utf8");mysql_select_db("test");$querySql="SELECT ID FROM tradeDetails WHERE userName = '".$_POST['postUserName']."' and userTel='".$_POST['postUserTel']."' AND goodsID ='".$_POST['postGoodsID']."'";$rs=mysql_query($querySql);$totalRows_myrs=mysql_num_rows($rs); echo $totalRows_myrs; //返回查询到的记录条数?>

====================================================================================================

效果

图1- 新增记录

图2-查询全部

图3-条件查询

图4-客户功能失败

图5-客户功能成功

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：PHP jQuery ajax 表单提交小示例（含insert, select）

客户姓名
客户电话
购货日期
货物编号
货物名称
购货数量
这里显示结果

编号	客户姓名	客户电话	货物编号	货物名称	货物数量	交易日期
"+info["ID"]+"	"+info["userName"]+"	"+info["userTel"]+"	"+info["goodsID"]+"	"+info["goodsName"]+"	"+info["goodsNum"]+"	"+info["tradeDate"]+"

Hi，您需要填写昵称和邮箱！