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

Question

所以我的问题是 ajax（或其他）不适用于一种形式，最奇怪的是有一种形式可以与 AJAX 完美配合。我已经尝试了很多东西：用 button 改变了 input 并且它的类型来自 "submit" to "button"，尝试使用 jQuery .post() 的另一种方法并且.get()，尝试使用 xmlHttpRequest。我现在很困惑。也许你能看到我能看到的东西't.Thanks

编辑：因此，我对其进行了一些修改，并在控制台中出现了此错误（到目前为止，那里没有任何错误）。 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

你可以这样试试

    <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>

Answer 2

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

您的选择器无效。

从表面上看，您正在尝试获取基于 name 属性的值。为此，您需要特定的选择器语法。

根据您当前的逻辑，您也永远不会真正获取输入字段的值。您只是持有对该元素的引用。您需要访问输入字段的值才能检索它。
您没有使用有效的变量声明。您需要使用 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.

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

Ajax does not work, instead starts default method and action

jquery

ajax

form-submit