私はいくつかのPHPを知っているので、ajax/jqueryを使用してそれを結合したいと思います。学習目的のためだけに、いくつかのスクリプトを作成しています。空き状況などを確認する登録フォームを作成したかったのですが、そのようなスクリプトを作成する前に、動作を確認するためだけにもっと簡単なことをしたいと思いました。
私の目標はajaxとの連絡フォームで、それは機能します。データはphp検証スクリプトに送信されます。エラーは配列に保存され、エラーのリストを返すか、メッセージを送信します。
しかし、いくつか質問があります。
- ブラウザがjavascriptをサポートしていない場合はどうなりますか。それでもメッセージを送信する方法はありますか?
送信により、ajaxpost関数がトリガーされます。phpファイルに行く前にjquery検証を追加する最良の方法は何ですか(クライアント側)
AJAXフォームにお問い合わせください
<script language="JavaScript" type="text/javascript"> function ajax_post(){ // Create our XMLHttpRequest object var hr = new XMLHttpRequest(); // Create some variables we need to send to our PHP file var url = "functions/validation.php"; var name = document.getElementById("name").value; var subject = document.getElementById("subject").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; var vars = "name="+name+"&subject="+subject+"&email="+email+"&message="+message; hr.open("POST", url, true); // Set content type header information for sending url encoded variables in the request hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Access the onreadystatechange event for the XMLHttpRequest object hr.onreadystatechange = function() { if(hr.readyState == 4 && hr.status == 200) { var return_data = hr.responseText; document.getElementById("status").innerHTML = return_data; } } // Send the data to PHP now... and wait for response to update the status div hr.send(vars); // Actually execute the request document.getElementById("status").innerHTML = "processing..."; } </script>
お問い合わせフォーム
文章
<label>Name <span id="nameInfo" class="small">Add your name</span> </label> <input type="text" name="name" id="name" /> <label>subject <span id="subjectInfo" class="small">Add a subject</span> </label> <input type="text" name="email" id="subject" /> <label>Email <span id="emailInfo" class="small">Add a valid email address</span> </label> <input type="text" name="email" id="email" /> <label>message <span id="messageInfo" class="small">Your message min 20 chars</span> </label> <input type="text" name="message" id="message" /> <button type="submit" onClick="javascript:ajax_post();">Send</button> <div class="spacer"></div> <div id="status"></div>