ホームページ >ウェブフロントエンド >jsチュートリアル >ajax を使用してフォームをデータベースに送信する方法の詳細な説明 (更新なし)
ajax を使用してフォームをデータベースに送信する方法の詳細な説明 (更新なし)
- 亚连オリジナル
- 2018-05-21 16:17:222758ブラウズ
この記事では、主に、ajax を使用してデータベースにフォームを送信するための関連情報を、サンプル コードを通じて詳しく紹介します。興味がありましたら、お友達が見に来てください。
静的ページでデータベースにフォームを送信するのは非常に簡単であることは誰もが知っているはずです
<form action="test.php" method="post"> </form>
この欠点は、ページが更新されてページがジャンプすることです。
今日紹介するテクノロジーは、ajax フォーム送信です
利点は、ページを更新せず、ページにジャンプせず、サイレントに送信されることです。
ajax とは何かについては、Baidu にアクセスしてご自身で調べてください。
まず、フォーム送信ページを用意する必要があります:
index.html
このページは 2 つの部分で構成されます
1. フォーム コントロール
2. jQuery スクリプトはフォーム フォームを取得します。データはpostを通じて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つの値は
titleと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サーバーにデータを送信するにはどのような手順が必要か
ajaxログイン機能の実装
jQueryでajaxリクエストをキャンセルする方法
以上がajax を使用してフォームをデータベースに送信する方法の詳細な説明 (更新なし)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。