PHP jQuery ajax 表单提交小示例(含insert, select)

WBOY
Release: 2016-06-23 13:57:24
Original
939 people have browsed it

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

index.html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>货物销售记录</title><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"><p><strong>销售方功能模拟:</strong></p><p>登记销售记录>></p>
Copy after login
客户姓名  
客户电话  
购货日期  
货物编号  
货物名称  
购货数量  
这里显示结果

查询销售记录>>

选择类别:

查询值:

这里显示销售方查询结果

顾客方功能模拟:

货物验证>>

客户姓名 *  
客户电话 *  
货物编号 *  
这里显示验证结果

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();			txtGoodsID=$("#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="
Copy after login
"; $.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);?>
Copy after login

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);?>
Copy after login

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; //返回查询到的记录条数?>
Copy after login

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

效果

图1- 新增记录

图2-查询全部

图3-条件查询

图4-客户功能 失败

图5-客户功能 成功


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template