Question

我正在尝试使用表单将两个javascript变量提交到php脚本，并通过ajax函数将输出返回到同一页面上的新Div。它不起作用。

这是我的代码

的JavaScript / HTML

<link href="style/background.css" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.9.1.js"></script>

<script type="text/javascript">
    fbPageOptions = {
        shadowType: 'halo',
        resizeDuration: 5.5,
        imageFadeDuration: 4.5,
        overlayFadeDuration: 0,
        navType: 'both',
        width: 580,
        height: 405
    };
</script>

<body>
    <div id ="userForm">Add New User
        <br>
        <br>
        <form id ="form">
            First name: <input type="text" name="firstname" id="firstname"><br>
            Last name: <input type="text" name="lastname" id="lastname" ><br>
            <input type="submit" value="Submit" id="submit">
        </form> 
    </div>

    <script  type="text/javascript">
        var firstname = "";
        var lastname = "";
        $('#form').submit(function() {
            firstname = $("input#firstname").val();
            lastname = $("input#lastname").val();
            alert(firstname + lastname);
            $.ajax({
                type: "POST",
                url: "my url is in here",
                data: {firstname: firstname, lastname: lastname},
                success: function(data) {
                    $("#submitted").html(data);
                    alert("success");
                }

            });
        });
    </script>
    <br>
    <div id="submitted"></div>
</body>

这是php代码

<?php


$firstname = $_POST["firstname"];
echo "First name added is $firstname";
echo "<br>";

$lastname = $_POST["lastname"];
echo "Last name added is $lastname";

?>

当我提交表单时，警告框会触发但div不会更新。我在另一个页面上使用几乎相同的代码，它工作正常。 :(任何想法？

非常感谢。

Answer 1

表单提交，重新加载页面，您需要阻止默认的提交事件：

$('#form').on('submit', function (e) {
    e.preventDefault();

    var firstname = $("#firstname").val(),
        lastname = $("#lastname").val();

    $.ajax({
        type: "POST",
        url: "my url is in here",
        data: {
             firstname: firstname,
             lastname: lastname
        }
    }).done(function (data) {
        $("#submitted").html(data);
        alert("success");
    });
});

Answer 2

在提交函数中返回false以防止导致问题的提交的默认行为。

$('#form').submit(function() {
    firstname = $("input#firstname").val();
    lastname = $("input#lastname").val();
    alert(firstname + lastname);
    $.ajax({
    ......
   }); 
   return false;
});

Answer 3

您应该使用$ .param或.serialize等方法向您发送数据。

http://api.jquery.com/jQuery.param/

http://api.jquery.com/serialize/

为什么我的Ajax功能不起作用？

3 个答案: