Question

例如，如果我有一个带有输入按钮的表单：

    <?php include_once '../php/library.php'; ?>
<script language="JavaScript" type="text/javascript" src="<?php root(); ?>ajax_captcha.js"></script>
    <form id="frmCaptcha" name="frmCaptcha">
        <table> 
            <tr>
                <td align="left">
                    <label for="captcha">Captcha</label>
                </td>
                <td>
                    <input id="txtCaptcha" type="text" name="txtCaptcha" value="" maxlength="10" size="32" />
                </td>
                <td> 
                    <img id="imgCaptcha" src="../image.php" />
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input id="btnCaptcha" type="button" value="Captcha Test" name="btnCaptcha" 
                        onclick="getParam(document.frmCaptcha)" />
                </td>
            </tr>
        </table> 
        <div id="result">&nbsp;</div>
    </form>

并在php中：

<?php
//Continue the session
session_start();
//Make sure that the input come from a posted form. Otherwise quit immediately
if ($_SERVER["REQUEST_METHOD"] <> "POST") 
    die("You can only reach this page by posting from the html form");

//Check if the securidy code and the session value are not blank 
//and if the input text matches the stored text
if ( ($_REQUEST["txtCaptcha"] == $_SESSION["string"]) && (!empty($_REQUEST["txtCaptcha"]) && !empty($_SESSION["string"])) ) {
    echo "<h1>Test successful!</h1>";
} else {
    echo "<h1>Test failed! Try again!</h1>";
}
?>

最后我想使用Ajax调用javaScript中的函数向用户发送响应，导致如果图像与文本不匹配则提醒用户，如果匹配，则继续执行表单操作标记。

ajax脚本：

//Gets the browser specific XmlHttpRequest Object 
function getXmlHttpRequestObject() {
 if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Mozilla, Safari ...
 } else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP"); //IE
 } else {
    //Display our error message
    alert("Your browser doesn't support the XmlHttpRequest object.");
 }
}

//Our XmlHttpRequest object
var receiveReq = getXmlHttpRequestObject();

//Initiate the AJAX request
function makeRequest(url, param) {
//If our readystate is either not started or finished, initiate a new request
 if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
   //Set up the connection to captcha.php. True sets the request to asyncronous(default) 
   receiveReq.open("POST", url, true);
   //Set the function that will be called when the XmlHttpRequest objects state changes
   receiveReq.onreadystatechange = updatePage; 

   receiveReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   receiveReq.setRequestHeader("Content-length", param.length);
   receiveReq.setRequestHeader("Connection", "close");

   //Make the request
   receiveReq.send(param);
 }   
}

//Called every time our XmlHttpRequest objects state changes
function updatePage() {
 //Check if our response is ready
 if (receiveReq.readyState == 4) {
   //Set the content of the DIV element with the response text
   document.getElementById('result').innerHTML = receiveReq.responseText;
   //Get a reference to CAPTCHA image
   img = document.getElementById('imgCaptcha'); 
   //Change the image
   img.src = '../image.php?' + Math.random();
 }
}

//Called every time when form is perfomed
function getParam(theForm) {
  alert("clicked");
 //Set the URL
 var url = 'http://4rtificial.co.za/ai-captcha/email/';
 //Set up the parameters of our AJAX call
 var postStr = theForm.txtCaptcha.name + "=" + encodeURIComponent( theForm.txtCaptcha.value );
 //Call the function that initiate the AJAX request
 makeRequest(url, postStr);
}

提交按钮无法更新表单原因

0 个答案: