我知道一些 PHP,现在我想使用 ajax/jquery 组合它。只是为了学习目的,我制作了一些脚本。我想制作一个检查可用性等的注册表单。但是在我开始制作这样的脚本之前,我想做一些更简单的事情来检查它是如何工作的。
我的目标是使用 ajax 的联系表格,它可以工作。数据被发送到 php 验证脚本。错误保存在一个数组中,它返回错误列表或发送消息。
但我有几个问题:
- 如果浏览器不支持javascript怎么办。有没有办法仍然发送消息?
提交触发 ajax 发布功能。在进入 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>