Форма регистрации электронной почты AJAX + .htaccess проблема с чистыми URL - PullRequest
Новая
       11

Форма регистрации электронной почты AJAX + .htaccess проблема с чистыми URL

2 голосов
/ 26 февраля 2011

Я успешно установил эту форму регистрации на основе jQuery здесь: http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/

Но когда я применил его к своему основному макету, который основан на PHP и использует чистые URL, форма работает просто так: Я отправляю электронное письмо, и оно остается в состоянии «Пожалуйста, подождите ...». Я предполагаю, что он останавливает линию $.ajax({.

Код JS указан ниже: 

<script type="text/javascript">
    // code using jQuery
    $(document).ready(function(){

        $('#newsletter-signup').submit(function(){

            //check the form is not currently submitting
            if($(this).data('formstatus') !== 'submitting'){

                //setup variables
                var form = $(this),
                    formData = form.serialize(),
                    formUrl = form.attr('action'),
                    formMethod = form.attr('method'), 
                    responseMsg = $('#signup-response');

                //add status data to form
                form.data('formstatus','submitting');

                //show response message - waiting
                responseMsg.hide()
                           .addClass('response-waiting')
                           .text('Please Wait...')
                           .fadeIn(200);

                //send data to server for validation
                $.ajax({
                    url: formUrl,
                    type: formMethod,
                    data: formData,
                    success:function(data){

                        //setup variables
                        var responseData = jQuery.parseJSON(data), 
                            klass = '';

                        //response conditional
                        switch(responseData.status){
                            case 'error':
                                klass = 'response-error';
                            break;
                            case 'success':
                                klass = 'response-success';
                            break;  
                        }

                        //show reponse message
                        responseMsg.fadeOut(200,function(){
                            $(this).removeClass('response-waiting')
                                   .addClass(klass)
                                   .text(responseData.message)
                                   .fadeIn(200,function(){
                                       //set timeout to hide response message
                                       setTimeout(function(){
                                           responseMsg.fadeOut(200,function(){
                                               $(this).removeClass(klass);
                                               form.data('formstatus','idle');
                                           });
                                       },3000)
                                    });
                        });
                    }
                });
            }

            //prevent form from submitting
            return false;
        });
    });

 // end noConflict wrap
</script>

HTACCESS выглядит примерно так: 

<IfModule mod_rewrite.c>

    RewriteEngine On

    # COMPANY NAVIGATION

        #Sends URI to index.php for parsing
        RewriteRule !\.(css|gif|jpg|png|ico|txt|xml|js|pdf|htm|zip)$ /path/to/main/folder/index.php [NC]

</IfModule>

Который передает переменные в index.php. В index.php я разбил все на массив и проанализировал URL следующим образом: 

    function create_url_array($url) {
        strip_tags($url);
        $url_array = explode("/", $url);
        array_shift($url_array); // First one is empty
        return $url_array;
    }
    $url = $_SERVER['REQUEST_URI'];
    $url_array = create_url_array($url);

if($url_array[1] == "folder") { 
// include relevant page/s etc
}

Я пытался решить эту проблему часами и до сих пор не нашел решения.

Любые подсказки / полезная информация будут великолепны.

/ * РЕДАКТИРОВАТЬ: Включенный анализ Firebug * /

Спасибо, Натан! Я попробовал ваше предложение и обнаружил следующую ошибку при запуске теста (попытался отправить форму): 

"uncaught exception: Invalid JSON: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
... 
{"status":"success","message":"You have been signed up!"}"

Это в основном дает мне код для всей страницы, вплоть до сообщения об успехе. Запись успешно появляется в MySQL.
Я думаю, что проблема в том, что передается JSON ... с которым я не очень хорошо знаком. Кажется, что происходит сбой, когда происходят htaccess / clean URL.
Я не уверен, куда идти, чтобы исправить это. У вас есть предложения?

Ответы [ 4 ]

1 голос
/ 23 января 2013

Поместите код PHP из учебника в самый верх вашего документа.

Убедитесь, что этот код НАЧИНАЕТ ваш документ, а - нетследовать за любым jQuery, HTML, CSS и т. д. 

<?php
//email signup ajax call
if($_GET['action'] == 'signup'){

mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');  
mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');

//sanitize data
$email = mysql_real_escape_string($_POST['signup-email']);

//validate email address - check if input was empty
if(empty($email)){
    $status = "error";
    $message = "You did not enter an email address!";
}
else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/', $email)){ //validate email address - check if is a valid email address
        $status = "error";
        $message = "You have entered an invalid email address!";
}
else {
    $existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");   
    if(mysql_num_rows($existingSignup) < 1){

        $date = date('Y-m-d');
        $time = date('H:i:s');

        $insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
        if($insertSignup){ //if insert is successful
            $status = "success";
            $message = "You have been signed up!";  
        }
        else { //if insert fails
            $status = "error";
            $message = "Ooops, Theres been a technical error!"; 
        }
    }
    else { //if already signed up
        $status = "error";
        $message = "This email address has already been registered!";
    }
}

//return json response
$data = array(
    'status' => $status,
    'message' => $message
);

echo json_encode($data);
exit;
    }
    ?>
1 голос
/ 07 июня 2011

Ошибка не в вашем javascript, это из-за php-страницы, которую вы имеете в атрибуте действия формы. Вы напечатали JSON после тега типа документа. удалите тег doctype и попробуйте. дайте мне знать, если проблема не устранена.

Ответ должен содержать только json, как это. 

{"status":"success","message":"You have been signed up!"}
1 голос
/ 27 февраля 2011

Загрузите Firebug отсюда: https://addons.mozilla.org/en-US/firefox/addon/firebug/

  • Установите
  • Откройте Firefox и загрузите нужную веб-страницу и нажмите маленького жука огненного типа в правом нижнем углуокно браузера

Firebug Icon

Затем вам нужно выбрать вкладку консоли и обновить веб-сайт так, чтобы консоль загружалась правильно, все, что вам нужно сделать сейчас, это один раз посмотреть консольВы запросили действие AJAX в своем приложении!Console Tab

Вы увидите полосу загрузки, отображающую либо GET, либо POST (в зависимости от того, какой метод формы у вас есть), она сможет сказать вам, какие данные были отправлены, и любые ошибки изphp файл.

0 голосов
/ 07 июля 2011

Кажется, проблема в том, что ваш ответ содержит HTML-код страницы, который является недействительным кодом JSON. Убедитесь, что ответ включает только это: 

{"status":"success","message":"You have been signed up!"}

Ваш код также включает HTML, например, заголовок DOCTYPE, который вы разместили в примере.

Не видя код на странице ответов, сложно посоветовать, как удалить HTML.

Надеюсь, это полезно.

...