Ajax 不起作用，而是启动默认方法和操作

Question

所以我的问题是 ajax（或其他东西）不适用于表单，最奇怪的是有一种表单可以完美地与 AJAX 一起使用。我已经尝试了很多东西：将input 更改为button 并使用"submit" to "button" 的类型，尝试使用jQuery .post() 和.get() 中的另一种方法，尝试使用xmlHttpRequest。我现在很困惑。也许你能看到我看不到的东西。谢谢

编辑：所以，我对其进行了一些修改，并在控制台中出现了这个错误（现在那里没有任何错误）。 Error

HTML格式

<form action="./contactAction.php" method="POST" class="contact_form" id="cform"name="contactForm">
        <input type="text" name="contactFname" placeholder="Prenumele" />
        <input type="text" name="contactLname" placeholder="Numele" />
        <input type="text" name="contactEmail" placeholder="Emailul tau" />
        <textarea name="contactSubject" placeholder="Scrie mesajul tau" style="height: 200px"></textarea>
        <button type="submit" name="contactBtn">Submit</button>
      </form>

JS

$(document).ready(function () {
$("#contactBtn").click(() => {
    contactFormValidation();
});

});

function contactRequest() {
let fname = $("#contactFname");
let lname = $("#contactLname");
let email = $("#contactEmail");
let subj = $("#contactSubject");

$.ajax({
    type: "POST",
    url: "../../contactAction.php",
    data: ({"constactFname": fname, "contactLname": lname, "contactEmail": email, "contactSubject": subj}),
    dataType: "html",
    success: (response) => {
        alert("Request success");
        //$("#loginPage").html(response);
    },
    error: () => {
        alert("Error :(");
    }
});
return false;

}

function contactFormValidation() {
let $form2 = $("#contactForm");
$form2.validate({
    wrapper: "div",
    debug: false,
    rules: {
        contactFname: {
            required: true
        },
        contactLname: {
            required: true
        },
        contactEmail: {
            required: true,
            email: true
        },
        contactSubject: {
            required: true
        }
    },
    submitHandler: () => {
        alert("Submit calledd");
        contactRequest();
    }
});

}

Answer 1

您的代码中有一些语法错误。

1. 您的选择器无效。

从外观上看，您正在尝试根据name 属性获取值。为此，您需要专门针对它的选择器语法。

1. 使用您当前的逻辑，您也永远不会真正获取输入字段的值。你只是持有对元素的引用。您需要访问输入字段的值才能检索它。

2. 您没有使用有效的变量声明。您需要使用var、let、const 来指定变量声明。

以正确方式获取值的示例是：

const fname   = $('input[name="contactFname"]').val();
const lname   = $('input[name="contactLname"]').val();
const email   = $('input[name="contactEmail"]').val();
const subject = $('input[name="contactSubject"]').val();

另一种方法是使用 jQuery 中的 serialize() 方法。更多关于 here.

Answer 2

你可以试试这个方法。

    <form action="./contactAction.php" method="POST" class="contact_form" id="cform" name="contactForm">
        <input type="text" id="contactFname" placeholder="Prenumele" />
        <input type="text" id="contactLname" placeholder="Numele" />
        <input type="text" id="contactEmail" placeholder="Emailul tau" />
        <textarea name="contactSubject" placeholder="Scrie mesajul tau" style="height: 200px"></textarea>
        <button type="submit" name="contactBtn">Submit</button>
    </form>
    <div id="contactPage">Hello</div>

Javascript

<script>
    $('#cform').submit(function() {
      contactFormValidation();
      return false;
    });
    
    function contactRequest() {
    fname = $("#contactFname").val();
    lname = $("#contactLname").val();
    email = $("#contactEmail").val();
    subj  = $("#contactSubject").val();
    $.ajax({
        type: "POST",
        url: "../../contactAction.php",
        data: {contactFname: fname, contactLname: lname, contactEmail: email, contactSubject: subj},
        dataType: "html",
        success: function (response) {
            $("#contactPage").html(response);
        }
    });
    return false;
    }
    
    function contactFormValidation() {
        $('#contactFname').attr('required',true);
        $('#contactLname').attr('required',true);
        $('#contactEmail').attr('required',true);
        return false;
    }
</script>