弹出窗体ajax请求不起作用

时间:2015-10-24 13:35:08

标签: php jquery ajax

我想在我的网站中添加弹出式联系表单,我从互联网上取一个例子并对其发送邮件进行了一些更改,我将其用于将数据插入数据库。所以这里是我的第一个文件index.php

<!doctype html>
<html lang="en">
<head>

    <title>A Slick Ajax Contact Form with jQuery and PHP</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script type="text/javascript">

        var messageDelay = 2000; // How long to display status messages (in milliseconds)

        // Init the form once the document is ready
        $(init);

        // Initialize the form
        function init() {

            // Hide the form initially.
            // Make submitForm() the form's submit handler.
            // Position the form so it sits in the centre of the browser window.
            $('#contactForm').hide().submit(submitForm).addClass('positioned');

            // When the "Send us an email" link is clicked:
            // 1. Fade the content out
            // 2. Display the form
            // 3. Move focus to the first field
            // 4. Prevent the link being followed

            $('a[href="#contactForm"]').click(function() {
                $('#content').fadeTo('slow', .2);
                $('#contactForm').fadeIn('slow', function() {
                    $('#senderName').focus();
                })

                return false;
            });

            // When the "Cancel" button is clicked, close the form
            $('#cancel').click(function() {
                $('#contactForm').fadeOut();
                $('#content').fadeTo('slow', 1);
            });

            // When the "Escape" key is pressed, close the form
            $('#contactForm').keydown(function(event) {
                if (event.which == 27) {
                    $('#contactForm').fadeOut();
                    $('#content').fadeTo('slow', 1);
                }
            });

        }

        // Submit the form via Ajax
        function submitForm() {

            var contactForm = $(this);

            // Are all the fields filled in?
            if (!$('#senderName').val() || !$('#senderEmail').val() || !$('#ContactNo').val() || !$('#message').val()) {

                // No; display a warning message and return to the form
                $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
                contactForm.fadeOut().delay(messageDelay).fadeIn();

            } else {

                // Yes; submit the form to the PHP script via Ajax
                $('#sendingMessage').fadeIn();
                contactForm.fadeOut();

                $.ajax({
                    url: contactForm.attr('action') + "?ajax=true",
                    type: contactForm.attr('method'),
                    data: contactForm.serialize(),
                    success: submitFinished
                });

            }

            // Prevent the default form submission occurring
            return false;
        }

        // Handle the Ajax response
        function submitFinished(response) {
            response = $.trim(response);
            $('#sendingMessage').fadeOut();

            if (response == "success") {

                // Form submitted successfully:
                // 1. Display the success message
                // 2. Clear the form fields
                // 3. Fade the content back in

                $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
                $('#senderName').val("");
                $('#senderEmail').val("");
                $('#ContactNo').val("");
                $('#message').val("");

                $('#content').delay(messageDelay + 500).fadeTo('slow', 1);

            } else {

                // Form submission failed: Display the failure message,
                // then redisplay the form
                $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
                $('#contactForm').delay(messageDelay + 500).fadeIn();

            }

        }

    </script>

</head>
<body>

    <div id="content">
        <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">~ Send us an email ~</a></p>
    </div>

    <form id="contactForm" action="processForm.php" method="post">
        <h2>Send us an email...</h2>
        <ul>
            <li>
                <label for="senderName">Full Name</label>
                <input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" />
            </li>
            <li>
                <label for="senderEmail">Email</label>
                <input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" />
            </li>
            <li>
                <label for="ContactNo">Contact No</label>
                <input type="text" name="ContactNo" id="ContactNo" placeholder="Please type your contact no" required="required" maxlength="50" />
            </li>
            <li>
                <label for="message" style="padding-top: .5em;">Your Message</label>
                <textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea>
            </li>
        </ul>
        <div id="formButtons">
            <input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />
            <input type="button" id="cancel" name="cancel" value="Cancel" />
        </div>
    </form>

    <div id="sendingMessage" class="statusMessage">
        <p>Sending your message. Please wait...</p>
    </div>

    <div id="successMessage" class="statusMessage">
        <p>Thanks for sending your message! We'll get back to you shortly.</p>
    </div>

    <div id="failureMessage" class="statusMessage">
        <p>There was a problem sending your message. Please try again.</p>
    </div>

    <div id="incompleteMessage" class="statusMessage">
        <p>Please complete all the fields in the form before sending.</p>
    </div>

</body>
</html>

,另一个是processForm.php是。

<?php

// Read the form values
$success     = false;
$senderName  = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$ContactNo   = isset( $_POST['ContactNo'] ) ? preg_replace( "/[^\ 0-9]/", "", $_POST['ContactNo'] ) : "";
$message     = $_POST['message'];

// If all values exist, send the email
if ( $senderName && $senderEmail && $contactNo && $message ) {

    include("config.php");
    $success = mysql_query("INSERT INTO `inquiry` (`name`, `contact`, `email`, `query`) VALUES ('$senderName', '$ContactNo', '$senderEmail', '$message')");

}

// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {

    echo $success ? "success" : "error";

} else { ?>

    <html>
    <head>
        <title>Thanks!</title>
    </head>
    <body>

        <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
        <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
        <p>Click your browser's Back button to return to the page.</p>

    </body>
    </html>

<?php } ?>

问题是当我提交权限时显示消息&#34;发送消息时出现问题。请再试一次。&#34;请帮帮我。

5 个答案:

答案 0 :(得分:3)

问题可能与使用/访问非现有变量contactNo有关,因为(引用php.net

  

变量名称区分大小写。

因此它应该分别更改(post变量名$_POST['ContactNo']大小写取决于此处未显示的代码,保持原样)

$contactNo = isset( $_POST['ContactNo'] ) ? preg_replace( "/[^\ 0-9]/", "", $_POST['ContactNo'] ) : "";

最后,但并非最不重要 - 停止使用mysql扩展,因为自PHP 5.5.0起已弃用,自PHP 7.0.0起删除

答案 1 :(得分:3)

我认为你应该改变这一行。

if ( $senderName && $senderEmail && $contactNo && $message ) {

if ( $senderName && $senderEmail && $ContactNo && $message ) {

答案 2 :(得分:1)

您永远不会设置$success实际成功的位置,在查询执行后会在此行中显示:

$success=mysql_query("INSERT INTO `inquiry` (`name`, `contact`, `email`, `query`) VALUES ('$senderName', '$ContactNo', '$senderEmail', '$message')");

$success最初实际上是$query

如果false失败,那将返回布尔值query,如果是真的(我认为),那将返回一个资源,它将评估为true

答案 3 :(得分:1)

您是否尝试输出所有变量值?

Print_r('sendName:'。$ senderName。'SendEmail:'。$ senderEmail。'联系方式:'。$ contactNo。'消息:'。$ message);  在条件检查之前  if($ senderName&amp;&amp; $ senderEmail&amp;&amp; $ contactNo&amp;&amp; $ message){

//然后添加它以了解您实际连接db echo'现在插入发送...';

//然后在插入之后,尝试检查/获取mysql最后一个错误(如果存在)并回显它。

}

答案 4 :(得分:1)

PHP变量区分大小写。 在您的情况下,$ _POST [&#39; ContactNo&#39;]设置在$ ContactNo。

所以if条件应该是;

if ( $senderName && $senderEmail && $ContactNo && $message ) {