首頁 > 開發者 > 網站開發

PHP jQuery ajax 表單提交小樣本（含insert, select）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   blog   class   code   java   ext   

功能描述：能夠通過表單向MySQL資料庫新增記錄，能夠表單提供關鍵詞進行查詢

index.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" /><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"/></head><body><p><strong>銷售方功能類比：</strong></p><p>登記銷售記錄>></p><table width="500" border="1">    <tr>      <td width="130">客戶姓名</td>      <td width="194">      <input type="text" name="txtUserName" id="txtUserName" /></td>      <td width="154"> </td>    </tr>    <tr>      <td>客戶電話</td>      <td>      <input type="text" name="txtUserTel" id="txtUserTel" /></td>      <td> </td>    </tr>    <tr>      <td>購貨日期</td>      <td>      <input type="text" name="txtDate" id="txtDate" /></td>      <td> </td>    </tr>    <tr>      <td>貨物編號</td>      <td>      <input type="text" name="txtGoodsID" id="txtGoodsID" /></td>      <td> </td>    </tr>    <tr>      <td>貨物名稱</td>      <td>      <input type="text" name="txtGoodsName" id="txtGoodsName" /></td>      <td> </td>    </tr>    <tr>      <td>購貨數量</td>      <td>      <input type="text" name="txtGoodsNum" id="txtGoodsNum" /></td>      <td> </td>    </tr>    <tr>      <td colspan="3"><input type="button" name="button" id="button" value="儲存" /><div id="insertStatus">這裡顯示結果</div></td>    </tr>  </table><div class="divBorder"><p>查詢銷售記錄>></p><p>  <input type="button" name="button2" id="button2" value="顯示全部" />  <input type="button" name="button4" id="button4" value="隱藏結果" /></p>  <p>選擇類別：    <select name="queryField" id="queryField">      <option value="userName">客戶姓名</option>      <option value="userTel">客戶電話</option>      <option value="goodsID">貨物編號</option>      <option value="goodsName">貨物名稱</option>      <option value="tradeDate">購物日期</option>    </select>  </p>  <p>查詢值：    <input type="text" name="queryKeywords" id="queryKeywords" />  </p>  <p>    <input type="button" name="button3" id="button3" value="搜尋" />  </p><div id="queryResult"> 這裡顯示銷售方查詢結果</div></div><hr /><p><strong>顧客方功能類比：</strong></p><div class="divBorder"><p>貨物驗證>></p>  <table width="500" border="1">    <tr>      <td width="130">客戶姓名</td>      <td width="194">        <input type="text" name="txtUserName2" id="txtUserName2" />        *</td>      <td width="154"> </td>    </tr>    <tr>      <td>客戶電話</td>      <td>        <input type="text" name="txtUserTel2" id="txtUserTel2" />        *</td>      <td> </td>    </tr>    <tr>      <td>貨物編號</td>      <td>        <input type="text" name="txtGoodsID2" id="txtGoodsID2" />        *</td>      <td> </td>    </tr>    <tr>      <td colspan="3"><input type="button" name="button5" id="button5" value="查詢" />        <span id="insertStatus2"></span></td>    </tr>  </table><div id="validateResult">這裡顯示驗證結果</div></div></body></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="<table border=‘1‘><tr><td>編號</td><td>客戶姓名</td><td>客戶電話</td><td>貨物編號</td><td>貨物名稱</td><td>貨物數量</td><td>交易日期</td>"; $.each(data,function(index,info)  {     str+="<tr><td>"+info["ID"]+"</td><td>"+info["userName"]+"</td><td>"+info["userTel"]+"</td><td>"+info["goodsID"]+"</td><td>"+info["goodsName"]+"</td><td>"+info["goodsNum"]+"</td><td>"+info["tradeDate"]+"</td></tr>";})$("#queryResult").html(str+"</table>");}

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-客戶功能 成功


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More