javascript - 带有 ajax 的 PHP、jQuery、HTML 表单无法正常工作

Question

我正在尝试使用 jQuery .post() 方法将表单数据提交给 php 脚本，而不是接收回 php 脚本数据并将其显示在表单页面上，但它不起作用。另外我正在使用 jQuery 验证插件客户端验证也是如此。这是我的代码:HTML:

<div class="contact-form">
<button class="contact-close">X</button>
    <form method="post" action="formular.php" id="quote-form">
        <div id="returned"></div>
        <div class="houndred">
            <input type="text" name="name" placeholder="Name*" class="input-half" id="name" min-width="2" autofocus required>
            <input type="email" name="email" placeholder="Email*" class="input-half" id="email" required>
            <input type="text" name="subject" placeholder="Subject" class="input-half" id="subject" required>
            <input type="url" name="url" placeholder="Website" class="input-half" id="website">
        </div>

        <div class="houndred">
            <textarea name="message" class="textarea" id="message" placeholder="message*" required></textarea>
            <br><p></p>
        </div>
        <div class="eightytwo">
            <button id="quote-button">Send</button>
        </div>
        <div id="summary"></div>
    </form>

</div><!-- .padding-fix -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/validation.js"></script>
<script src="js/ajaxform.js"></script>

发布JS:

$(document).ready(function(){

    $('form').on('submit', function(event) {
        event.preventDefault();
        $.post('formular.php', $(this).serialize(), function(data)) {
            var dataForm = data;
            $("#returned").append(dataForm);
        }
    });
)};

和PHP:

if(!empty($_POST)) {
        $errors = array();
        $name = $_POST['name'];
        $email = $_POST['email'];
        $subject = $_POST['subject'];
        $url = $_POST['url'];
        $message = $_POST['message'];

        if(empty($name) || empty($email) || empty($subject) || empty($url) || empty($message)) {
            $errors[] = 'All fields are required!';
        } else {
            if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
                $errors[] = 'Please enter a valid email address';
            }
            if(ctype_alpha($name === false)) {
                $errors[] = 'Name can only contain letters';
            }
            if (ctype_alpha($subject === false)) {
                $errors[] = 'Subject can only contain letters';
            }
            if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_PATH_REQUIRED) === false) {
                $errors[] = 'Please enter a valid url address with http in front';
            }
            if(empty($message)) {
                $errors[] = 'Please enter a message';
            }
        }

        if(!empty($errors)) {
            echo '<ul style=\"list-style: circle; color: #f74d4e\">';
            foreach($errors as $error) {
                echo '<li style=\"color: #f74d4e;\"' . $error . '</li>';
            }
            echo '</ul>';
        }

        $send_message = 'From:' . $url . '<br>' . strip_tags(addslashes($message));

        if(empty($errors)) {
            mail('something@something.com', $subject, $send_message , $email);
            echo '<h4 style=\"color: #f74d4e;\">Thank you for contacting me!</h4>';
            exit();
        }
    }

我希望这是有道理的，对我来说它有，但我在过去几个小时里一直在努力，仍然试图找出问题所在，我也尝试用 $.ajax() 和没有回应。还有一件事，表单正在使用 jquery .load() 方法加载到弹出框，这就是为什么使用 ajax 对我来说很重要

Answer 1

粗略检查一下您的代码，您似乎在这一行中添加了一个额外的右括号，如下所示:function(data))

$.post('formular.php', $(this).serialize(), function(data)) {

尝试

$.post('formular.php', $(this).serialize(), function(data) {

代替

HTH