0

わかりました、私は同様の質問をしていますが、より良い答えが得られるかどうかを確認するためにそれを拡張したかったのです:

テーブルに電子メール アドレスを格納する PHP ファイルに対して Jquery Ajax Post 呼び出しを実行しようとしています。ajax 呼び出しが成功した後、ボタンの html を変更しようとしています。

これが私のHTML/Javascript全体です。

<!DOCTYPE html>
<html>
    <head>

        <!--Meta tags-->
        <meta charset="utf-8">

        <!--Title-->
        <title>Startup Winnipeg</title>

        <!--Stylesheets-->
        <link rel="stylesheet" href="css/master.css">

        <!--Script-->
        <script type="text/javascript">

            function empty() {
                document.getElementById("email").value="";
            }

            function determine() {
                if (document.getElementById("email").value.length==0){
                    document.getElementById("email").value="Email Address";
                }
            }

            function validate() {
                document.getElementById("registerform").submit();
            }

        </script>

    </head>
    <body>
        <div id="container"></div>
        <div id="topbar"></div>
        <div id="header"></div>
        <div id="register">
            <div id="formcontainer">
                <form action="" id="registerform" name="registerform" method="post" >
                    <input type="text" id="email" name="email" value="Email Address" onClick="empty()" onBlur="determine()" />
                    <button type="submit" id="join" name="join" onClick="validate()">Sign Up</button>
                </form>
            </div>
            <div id="info">
                <a href="http://www.facebook.com" target="_blank"><div id="fb"></div></a>
            </div>
            <div id="bar"></div>
        </div>

        <!--jQuery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type="text/javascript">

            //listen for click
            $('form').on('submit', function(e) {
                $.post('register.php', $("#registerform").serialize(), function() {
                    $('#join').html("Success!")             
                });        
                //disable default action
                e.preventDefault();
            });
        </script>
    </body>
</html>

電子メール アドレスをテーブルに書き込む PHP ファイルは次のとおりです。

<?php include("database_connection.php");?>

<?php 

$email = $_POST['email'];
$email = mysql_real_escape_string($email);

mysql_select_db("suw",$con);

$sql="INSERT INTO emails (email) VALUES ('$email')";

mysql_query($sql,$con);

echo mysql_error();

 ?>

 <?php include ("close_database_connection.php");?>

私はいくつかの問題を抱えています：

  1. 完全な電子メールアドレスを入力すると、テーブルに書き込まれませんが、他の意味不明なものはテーブルに書き込まれます

  2. ボタンの html は、データがテーブルに書き込まれるときに変更されません

私が間違っていることを教えてください - 私は 2 冊の本を持っていて、jquery API を精査しましたが、何が間違っているのかよくわかりません。

4

1 に答える 1

4

それが役立つかどうかはわかりませんが、すべてのインライン JS と同じイベントなどの複数の関数を取り除くことから始めます。

javascript をヘッドに配置し、インライン ハンドラを削除します。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $("#email").on({
            click: function() {
                this.value = "";
            },
            blur: function() {
                if (this.value.length===0) this.value = "Email Address";
            }
        });

        $("#join").on('click', function(e) {
            e.preventDefault();
            $.post('register.php', $("#registerform").serialize(), function(data) {
                $('#join').html(data)             
            });
        });
      });
    </script>
</head>
<body>
    <form action="" id="registerform" name="registerform" method="post" >
         <input type="text" id="email" name="email" value="Email Address" />
         <button type="submit" id="join" name="join">Sign Up</button>
    </form>
</body>

PHP では、インクルードはタグ内にあり、成功またはエラーを返すだけです。

<?php 
    include("database_connection.php");

    mysql_select_db("suw",$con);
    $email = mysql_real_escape_string($_POST['email']);
    $sql="INSERT INTO emails (email) VALUES ('$email')";
    mysql_query($sql,$con);
    if (mysql_errno()) {
        echo mysql_error(); // or just "error"
    }else{
        echo "Success!";
    }

    include ("close_database_connection.php");
?>
于 2012-05-30T23:05:16.420 に答える