javascript - 如何从 JavaScript 调用 PHP 脚本？

Question

有人问我这个问题，但我不确定如何正确表达，所以无论如何我都会在这里问。

我正在编写一个简单的计算器脚本(为了学习，我是新手)，我将其分为两部分 - 使用 JS 进行前端表单验证和使用 PHP 进行计算。

更具体地说，这是三个部分:

HTML (index.php)

<form action = "calculator.php" method = "post">

第一个数字:此处输入字段

运算符(operator):下拉

第二个数字:此处输入字段

提交按钮

</form> 

JavaScript (验证.js)

validate() - 正则表达式检查第一个和第二个数字是否都是数字

PHP (计算器.php)

提取第一个和第二个数字，计算结果并显示在页面上

这是我的问题 - 我希望在按下提交按钮时，只有在所有正则表达式测试都通过后，页面才会传递到服务器。

类似于:

validate() {
    // testing code
    ...
    if first_num_valid == true && second_num_valid == true
        redirect to calculator.php
}

我如何在 Javascript 中执行此操作？

或者，如果这不可能，您能建议替代方案吗？

谢谢!

编辑 1:尝试过@joe 的解决方案但不确定如何让它发挥作用？

$("#calculator").onsubmit(function() {
    if (first_valid && second_valid)
        return true;
    else 
        return false;
});

我假设@joe 试图说表单仅在返回值为真时才提交，但我试过了，但是无论值是否为真，表单都提交了？

编辑 2:澄清

索引.php

<form id = "calculator" action = "./calculation.php" method = "post" >
    <table>
    <tr>
    <td>First number</td>
    <td><input type = "text" name = "first_num" id = "first_num"/></td>
    </tr>

    <tr>
    <td>Operator</td>
    <td>
    <select name = "operator">
        <option value = "+" name = "add">+</option>
        <option value = "-" name = "minus">-</option>
        <option value = "*" name = "multiply">*</option>
        <option value = "/" name = "divide">/</option>
    </select>
    </td>
    </tr>

    <tr>
    <td>Second number</td>
    <td><input type = "text" name = "second_num" id = "second_num" /></td>
    </tr>

    <tr>
    <td>
    <input type = "submit" name = "submit" id = "submit" onclick = "validate()"/>
    </td>
    </tr>
</table>
</form>

验证.js

function validate() {
    var first_num = $("#first_num").val();
    var second_num = $("#second_num").val();

    var regex = new RegExp("^[\\d]+$");

    var first_valid = regex.test(first_num);
    var second_valid = regex.test(second_num);

    var alert_string = "";


    if (!first_valid && second_valid) 
        alert_string += "First number invalid!<br />";
    else if (first_valid && !second_valid)
        alert_string += "Second number invalid!";
    else if (!first_valid && !second_valid)
        alert_string += "Both numbers invalid!";

    if (!first_valid || !second_valid)
        alert(alert_string);

    $("#calculator").onsubmit(function() {
        if (first_valid && second_valid)
            return true;
        else 
            return false;
    });
}

编辑 3:将所有代码放入处理程序中，不起作用？

$("#calculator").on('submit', function() {
    var first_num = $("#first_num").val();
    var second_num = $("#second_num").val();

    var regex = new RegExp("^[\\d]+$");

    var first_valid = regex.test(first_num);
    var second_valid = regex.test(second_num);

    var alert_string = "";

    if (!first_valid && second_valid) 
        alert_string += "First number invalid!";
    else if (first_valid && !second_valid)
        alert_string += "Second number invalid!";
    else if (!first_valid && !second_valid)
        alert_string += "Both numbers invalid!";

    if (!first_valid || !second_valid)
        alert(alert_string);

    if (first_valid && second_valid)
        return true;
    else 
        return false;
});

Answer 1

这是您的表单验证问题的答案。

首先，给你的表单一个id，这样你就可以识别它。

<form id="calculator_form" action="calculator.php" method="post">

然后，为该表单附加一个提交处理程序。如果提交处理程序失败，表单将不会提交。

document.getElementById('calculator_form').onsubmit = function() {
  if (!first_num_valid) {
    return false;
  }
  if (!second_num_valid) {
    return false;
  }
  return true;
}

---

好的，现在你的问题编辑有 jquery。这改变了我在这里的答案。

$("#calculator").on('submit', function() {
    if (first_valid && second_valid) {
        return true;
    }
    return false;
});