Ajax 函数虽然在脚本中定义，但无法识别

Question

我正在尝试使用一个按钮提交两个单独的表单。经过几天的研究，我得出的结论是，如果不使用 AJAX.

就无法做到这一点

第一种形式提交给 Mikrotik 路由器（这样用户就可以访问 HotSpot），它会检查用户名和密码。 Mikrotik 登录页面需要这个 "path"：$(link-login-only).

第二个表单必须发送用户输入的电子邮件，但它必须在 cca 之后发送。 0.5 秒，因为用户访问互联网大约需要那么长时间。

到目前为止，我遇到了两个无法解决的错误：

第 1：在这一行：<input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br /> - Uncought ReferenceError: SendAjax is not defined

2cnd：在这一行上 url: "$(link-login-only)", - Uncought SyntaxError: Unexpected Identifier

完整代码：

!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" name="dst" value="$(link-orig)" />
        <input type="hidden" name="popup" value="true" />
        <input type="hidden" name="username" type="text" value="username" />
        <input type="hidden" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">


    function SendAjax() {
        var email = $("#email").val();
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }
        // AJAX code to submit form
        else {$.ajax({
                type: "POST"
                url: "$(link-login-only)",                
                data: $("#hotspot").serialize(),
            });

            function callback(){
            $.ajax ({
                    url: $("#mail").attr('action'),
                }

            });
            }
            setTimeout(callback(), 1000);
        }
    }
</script>
</html>

在发布前查看代码后，在第一个表单上添加一个隐藏按钮，并使用 ajax 在延迟 0.5 秒之前发送第一个表单然后执行第二种形式？

Answer 1

请试试这个：

!DOCTYPE html>
<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" id="dst" name="dst" value="$(link-orig)" />
        <input type="hidden" id="popup" name="popup" value="true" />
        <input type="hidden" id="username" name="username" type="text" value="username" />
        <input type="hidden" id="password" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" id="email" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">

    $(document).on('click', '#submit', function(event) {

        if (!$("#email").val()) {
            alert("Please enter your email.");
            return false;
        }

        // AJAX code to submit form #hotspot
        $.ajax({

            type: "POST"
            url: "$(link-login-only)",                
            data: $("#hotspot").serialize(),
            success: (data => {
                console.log(data)

                // After getting response of #hotspot, Subbmitting the second form #mail
                $.ajax ({
                    url: $("#mail").attr('action'),
                    data: $("#mail").serialize(),
                    success: (dataMail => {
                        console.log(dataMail);
                    }),
                    error: (errorMail => {
                        console.log(`#hotspot successfuly submitted but #mail getting error: ${errorMail}`)
                    })
                })
            }),
            error: (error => {
                console.log(`#hotspot not submitted because #mail getting error: ${error}`);
            })
        });
    });
</script>
</html>

Answer 2

我觉得你的代码没问题你有语法错误检查下面这个对于第一个错误，您需要在按钮事件上调用该函数。

$(document).on('click', '#submit', function(event) {
        event.preventDefault();         
        var email = $("#email").val();
        // Check if fields are empty 
        if (email=="") {
            alert("Please enter your email.");
        }else {
            $.ajax({
                type: "POST"
                url: "$(link-login-only)",                
                data: $("#hotspot").serialize(),
            })
            .always(function() {
                console.log("first call completed");
            });
            function callback(){
             $.ajax ({
              url: $("#mail").attr('action'),
          // } you need to remove this parenthesis
      });
         }
         setTimeout(callback(), 1000);
     }
});

第二个错误是因为你多了一个右括号}

Answer 3

未定义 SendAjax 的原因是您的脚本可能与您的代码不在同一个文件中。 SendAjax 的工作原理如下：

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous">
 </script>
<title>Post with delay</title>

</head>
<body>

    <form name="hotspot" action="$(link-login-only)" method="post" id="hotspot"
        $(if chap-id) onSubmit="return doLogin(); return false;" $(endif)>
        <input type="hidden" name="dst" value="$(link-orig)" />
        <input type="hidden" name="popup" value="true" />
        <input type="hidden" name="username" type="text" value="username" />
        <input type="hidden" name="password" type="password" value="password" />
    </form>

    <form name="mail" action="http://myserveraddress/verifysanitize.php" method="post" id="mail">
        <h1>Hotspot</h1>
        <h2>To gain internet access, enter your email.</h2>
        <br />
        <input type="text" name="email" autofocus="autofocus">
        <br />
        <input type="button" value="Submit" id="submit" onclick="SendAjax()"> <br />
    </form>


</body>
<script rel="javascript"  type="text/javascript">


    function SendAjax() {
        alert('OK');
    }
</script>
</html>

Ajax 函数虽然在脚本中定义，但无法识别

Ajax function is not recognized although it is defined in the script

jquery

ajax

mikrotik