2

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

4 に答える 4

1

エラーは JavaScript にはありません。フォームのアクション属性にある php ページが原因です。doc type タグの後に json を出力しました。doctype タグを削除して試してください。まだ問題がある場合はお知らせください。

応答には、このような json のみが含まれている必要があります。

{"status":"success","message":"You have been signed up!"}
于 2011-06-07T06:05:25.527 に答える
1

チュートリアルの 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;
    }
    ?>
于 2013-01-23T19:56:16.437 に答える
1

ここから Firebug をダウンロードします: https://addons.mozilla.org/en-US/firefox/addon/firebug/

  • インストール
  • Firefox を開いて目的の Web ページをロードし、ブラウザ ウィンドウの右下隅にある小さな火のような甲虫をクリックします。

火炎虫のアイコン

次に、コンソール タブを選択して Web サイトを更新し、コンソールが正しく読み込まれるようにする必要があります。あとは、アプリから ajax アクションを要求したら、コンソールを監視するだけです。 コンソール タブ

GET または POST (使用しているフォーム メソッドに応じて) のいずれかで読み込みバーが表示されます。これにより、送信されたデータと php ファイルからのエラーを知ることができます。

于 2011-02-27T12:47:13.807 に答える
0

問題は、応答にページからのHTMLが含まれていることであるようです。これは無効なJSONコードです。応答にこれのみが含まれていることを確認してください。

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

コードには、例で投稿したDOCTYPEヘッダーのようなHTMLも含まれています。

応答ページにコードが表示されていないと、HTMLを削除する方法をアドバイスするのは困難です。

これがお役に立てば幸いです。

于 2011-07-07T11:11:18.163 に答える