静的ページでデータベースにフォームを送信するのは非常に簡単です
<form action="test.php" method="post"> </form>
欠点は、ページが更新されてページがジャンプすることです。今日紹介するテクノロジーは、ajax フォーム送信です。利点は、ページを更新せず、ページにジャンプせず、サイレントに送信されることです。
まず、フォーム送信ページを用意する必要があります:
index.html
このページは 2 つの部分で構成されます
1. フォーム コントロール
2. jQuery+ajax 処理スクリプト
jQuery スクリプトは、送信後フォーム データを取得します。それをapi.phpに
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>login test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> function insert() { $.ajax({ type: "POST",//方法 url: "api.php" ,//表单接收url data: $('#form1').serialize(), success: function () { //提交成功的提示词或者其他反馈代码 var result=document.getElementById("success"); result.innerHTML="成功!"; }, error : function() { //提交失败的提示词或者其他反馈代码 var result=document.getElementById("success"); result.innerHTML="失败!"; } }); } </script> </head> <body> <p id="form-p"> <form id="form1" onsubmit="return false" action="##" method="post"> <p><input name="title" id="title" type="text" value="title"/></p> <p><input name="url" id="url" type="text" value="url"/></p> <p><input type="button" value="插入" onclick="insert()"></p> <p><p id="success"></p></p> </form> </p> </body> </html>
以下はフォーム受信ページです
api.php
このページは実はとてもシンプルです
データベースに接続して
データベースに挿入するだけです
挿入される2つの値データベースは
タイトルとURLです
<?php $title = $_POST['title']; $url = $_POST['url']; $con = mysql_connect("localhost","root","root"); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("test", $con); mysql_query("INSERT INTO testdata (title, url) VALUES ('$title', '$url')"); mysql_close($con); ?>
次に、データベースを確立する必要があります
データベース名はtest、テーブル名はtestdataです
以下はデータベースのスクリーンショットです
この時点で, この件は完了です。
もちろん、上記のコードは単に Ajax フォーム送信を実装しているだけです
しかし、フォーム検証、データ暗号化など、最適化する必要がある詳細がまだたくさんあります。自分で拡張、学習、改善することができます。
関連する推奨事項:
Ajax 送信フォーム フォーム ページは j ソリューションを引き続き更新します
js フォーム フォームを送信し、フォーム フォームのリクエスト パスを設定する実装方法
以上がajax フォームをデータベース インスタンスに送信するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。