?Briella 2012-05-30 22:46 采纳率: 0%
浏览 44

jQuery AJAX和PHP

Alright, I have a similar question up, but wanted to expand on it to see if I can get a better answer:

I'm trying to make a Jquery Ajax Post call to a PHP file that stores an email address in a table. After the successful ajax call I'm trying to change a buttons html.

Here is my HTML/Javascript in its entirety:

<!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>

Here is the PHP file that is writing the email address to a table:

<?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");?>

I'm having a couple of problems:

  1. if I type in a full email address it won't write to the table, however, any other gibberish will write to the table

  2. The button's html does not change upon the data being written to the table

Let me know what I am doing wrong - I have two books and have scoured the jquery api and I can't quite figure out what I'm doing wrong.

  • 写回答

1条回答 默认 最新

  • weixin_33743248 2012-05-30 23:05
    关注

    Not sure it will help, but start by getting rid of all that inline JS, and multiple functions for same events etc.

    Place the javascript in the head, and remove the inline handlers:

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

    In your PHP, the includes could be inside the tags, and just return success or error:

    <?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");
?>
    评论

报告相同问题？

悬赏问题

  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像，如何解决？
  • ¥15 求daily translation（DT）偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的？
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示