欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2022-05-16 16:51:39
...
功能描述:能够通过表单向MySQL数据库新增记录,能够表单提供关键词进行查询

index.html

货物销售记录

销售方功能模拟:

登记销售记录>>

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

查询销售记录>>

选择类别:

查询值:

这里显示销售方查询结果

顾客方功能模拟:

货物验证>>

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

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="
"; $.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 //新增记录后台程序


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


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


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

效果

图1- 新增记录

图2-查询全部

图3-条件查询

图4-客户功能 失败

图5-客户功能 成功