PHP jQuery ajax フォーム送信の小さな例 (挿入、選択を含む)

機能の説明: フォームを通じて 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>

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

查询销售记录>>

选择类别： 客户姓名 客户电话 货物编号 货物名称 购物日期

查询值：

这里显示销售方查询结果

---

顾客方功能模拟：

货物验证>>

客户姓名	*
客户电话	*
货物编号	*

这里显示验证结果

Index.html renderings

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 //新しいレコードバックグラウンドプログラム================================================= ================================================

効果

図 1 - レコードの追加

図 2 - すべてのクエリ

図 3 - 条件付きクエリ

図 4 - Customer 関数の失敗

図 5 -顧客関数が成功しました