Question

使用HTML5编码的登录表单，按下提交按钮后，请求服务器检查凭据而不重新加载文档的最佳方法是什么？我可以使用脚本要求服务器验证凭据并返回（例如） a sessionID，如果返回null（如果此类凭据无效），则显示一条错误消息，让用户更正他的凭据？ ......或类似的情景。

显示此类行为的简单HTML5 /脚本代码将不胜感激。

Answer 1

This是一个非常好的插件，由jQuery和其他贡献者的创建者编写。

您必须使用javascript才能调用服务器而无需重新加载整个页面。

正如文档所指出的，以下代码足以通过AJAX提交表单：

$(document).ready(function() { 
var options = { 
    target:        '#output1',   // target element(s) to be updated with server response 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse  // post-submit callback 

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
}; 

// bind form using 'ajaxForm' 
$('#myForm1').ajaxForm(options); 
});

myForm1是HTML表单的ID。

修改

正如评论所指出的，如果您不使用jQuery，以下javascript代码也可以正常工作：

<script type="text/javascript"> function sendToServer() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { // This is when you receive a response from the server document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST","your_page.php?name=your_name&surname=your_surname",true); xmlhttp.send(); } </script> <form method="POST"> <input type="submit" onclick="return sendToServer();"> </form>

提交表单而不重新加载文档

1 个答案: