Question

我正在添加一个看不见的recaptcha;出于某种原因，它不再检查必填字段。以前，我会收到Chrome发来的通知，说明这些字段不能为空。现在，它只是忽略了这一点，让我提交空表格。

我使用ajax提交请求。我的猜测是data-callback并不意味着用于发送ajax请求。

＆＃13;

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Submit a quote</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/forms.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="../js/quotes/ajax.js"></script>
    <meta name="description" content="Submit your awesome quote today!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0aff0a">
    <meta name="msapplication-navbutton-color" content="#0aff0a">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0aff0a">
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
    <div id="status-message"></div>
    <div class="container">
        <form id="form" action="../php/quoteSubmit.php" method="post">
            <h3>Submit your quote</h3>
            <fieldset>
                <textarea rows="20" name="quote" title="quotes" placeholder="Type your quote here...." tabindex="5" required></textarea>
            </fieldset>
            <fieldset>
                <input placeholder="Author" name="author" title="quotes" type="text" tabindex="1" required>
            </fieldset>
            <fieldset>
                <!--<button name="submit" type="submit" id="contact-submit">Submit</button>-->
                <button name="submit" type="submit" id="contact-submit" class="g-recaptcha" data-callback="onSubmit" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI">Submit</button>
            </fieldset>
        </form>
    </div>
    <script>
        function onSubmit(e) {
            //$("#form").submit(function (e) {
                var url = $("#form").attr('action'); // the script where you handle the form input.
                ajaxSendData(url, $("#form").serialize());
            //});
        }
    </script>
</body>
</html>

＆＃13;

似乎取消了提交操作。

$("#form").submit(function (e) {
    var url = $("#form").attr('action');
    ajaxSendData(url, $("#form").serialize());
    e.preventDefault();
});

上述代码段仅在使用recaptcha API 不时触发。

如何正确地将ajax请求发送到PHP页面？

我的完整代码（如果需要）：

<?php
include_once "connect.php";
session_start();
if(isset($_POST["quote"], $_POST["author"], $_POST["g-recaptcha-response"])){
    if(!isValid()){
        http_response_code(400);
        exit();
    }

    $stmt = $conn->prepare("INSERT INTO pending (quote, author) VALUES (?, ?)");
    $stmt->bind_param("ss", $quote, $author);

    $quote = htmlspecialchars($_POST["quote"]);
    $author = htmlspecialchars($_POST["author"]);
    $stmt->execute();

    echo"Added to pending! Thank you for submitting";
    $stmt->close();
    $conn->close();
    //$_SESSION["lastRequest"] = time();
}else{
    http_response_code(400);
    exit();
}
function isValid()
{
    try {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $data = ['secret'   => '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe',
            'response' => $_POST['g-recaptcha-response'],
            'remoteip' => $_SERVER['REMOTE_ADDR']];

        $options = [
            'http' => [
                'header'  => "Content-type: application/x-www-form-urlencoded\r\n",
                'method'  => 'POST',
                'content' => http_build_query($data)
            ]
        ];

        $context  = stream_context_create($options);
        $result = file_get_contents($url, false, $context);
        if($decoded = json_decode($result, true)){
            return $decoded['success'];
        }
    }
    catch (Exception $e) {
        return null;
    }
}

Answer 1

尝试将recaptcha放在单独的div中

<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

function onSubmit(e) {
   //$("#form").submit(function (e) {
   var url = $("#form").attr('action'); // the script where you handle the form input.
   ajaxSendData(url, $("#form").serialize());
   //});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>
    
<div id="status-message"></div>
<div class="container">
	<form id="form" action="../php/quoteSubmit.php" method="post">
		<h3>Submit your quote</h3>
		<fieldset>
			<textarea rows="20" name="quote" title="quotes" placeholder="Type your quote here...." tabindex="5" required></textarea>
		</fieldset>
		<fieldset>
			<input placeholder="Author" name="author" title="quotes" type="text" tabindex="1" required>
		</fieldset>
		<fieldset>
			<!--<button name="submit" type="submit" id="contact-submit">Submit</button>-->
      <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
			<button name="submit" type="submit" id="contact-submit" data-callback="onSubmit">Submit</button>
		</fieldset>
	</form>
</div>

隐形recaptcha v2不检查所需的输入字段

1 个答案: