php - 触发 onclick 事件后没有任何反应

Question

jquery 中的新手在这里：当我单击提交按钮时，我希望它会回显某些内容，但它没有。我不知道我的代码有什么问题。请帮忙

这是我的js

    <script src="http://code.jquery.com/jquery-1.8.1.js"></script>
        <script>
            function add_contact(){
            $.post( "add.php", { 
                "name": $("#txtName").val(),
                "contact": $("#txtContact").val(),
                "email": $("txtEmail").val()
                }, 
                function(msg){
                    $("#message").html(msg);
            });
            return false;
            }
        </script>

这是我的html

    <label for="txtName">Name</label>
                    <input id="txtName" type="text">
                <label for="txtContact">Contact Number</label>
                    <input id="txtContact" type="text">
                <label for="txtEmail">E-mail</label>
                    <input id="txtEmail" type="text">
                <label id="message"></label>
                    <input type="submit" value="Save" onclick="return add_contact()">

这是我的 add.php

        <?php
    if(isset($_POST['name'])&&isset($_POST['contact'])&&isset($_POST['email'])){
        echo 'Good';
    }
    ?>

Answer 1

缺少#号！

"email": $("txtEmail").val()

将其更改为

"email": $("#txtEmail").val()

Answer 2

尝试

onclick="add_contact();"

代替

onclick="return add_contact()"

[编辑：]

我对这种情况进行了一些处理，并稍微修改了您的代码。查看http://jsfiddle.net/Pbf2T/16/

这是JS

$(function(){
    var add_contact = function() {
        $.ajax({
            url: "add.php",
            data: {
                "name": $("#txtName").val(),
                "contact": $("#txtContact").val(),
                "email": $("#txtEmail").val()           
            },
            success: function(data) {
                alert("success");
                $("#message").html(data);
            },
            error: function(x,t,error) {
                alert("error: " + error);
                console.log(error);                
            }            
        })
    }


    $('input[type="submit"]').click(function(e){
        e.preventDefault();
        add_contact();
    })
})

如果您尝试此操作，请回复您看到的错误。

[EDIT2:] 好的，请尝试上述方法，然后报告。在成功处理程序中，我输入了返回的数据。​</p>

Answer 3

您不应该在通过邮件发送的数据周围加上引号，即"name": $("#txtName").val()应该只是. 而不是name: $("#txtName").val().

Answer 4

尝试使用 type="button" 而不是提交

<input type="submit" value="Save" onclick="return add_contact()">

当您使用 ajax 进行提交时。