联系表格

Question

我知道一些PHP，现在我想用ajax / jquery组合它。只是为了学习目的我制作一些脚本。我想制作一个检查可用性等的注册表格。但在我开始制作这样一个脚本之前，我想做一些更容易的事情来检查它是如何工作的。

我的目标是使用ajax的联系表单，它的工作原理。数据被发送到php验证脚本。错误保存在数组中，它返回错误列表或发送消息。

但我有几个问题：

如果浏览器不支持javascript，该怎么办？有没有办法继续发送消息？

提交会触发ajax post函数。在进入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>

Answer 1

如果浏览器不支持javascript，该怎么办？有没有办法继续发送消息？

如果您正确构建它，如果客户端中没有JavaScript，表单将正常提交数据。 Progressive enhancement并且应该始终使用JavaScript。

提交触发ajax post函数。在进入php文件（客户端）之前添加jquery验证的最佳方法是什么

使用submit event在提交之前捕获表单数据。

Answer 2

如果JavaScript不可用，表单将以经典方式提交。在这种情况下，您的服务器端代码需要处理此问题并返回完整的HTML页面。

Answer 3

你为什么不使用jquery？只需要<form>标记发送数据，并在所述表单的submit（）事件中禁用/返回false。

Ajax表单 - 如果浏览器不支持javascript怎么办？

联系表格

3 个答案: