0

フォームを使用して 2 つの 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 は更新されません。別のページでほぼ同じコードを使用していますが、正常に動作します。：（ 何か案は？

本当にありがとう。

4

3 に答える 3

4

フォームが送信され、ページがリロードされます。デフォルトの送信イベントを防止する必要があります。

$('#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");
    });
});
于 2013-06-11T10:46:41.970 に答える
3

問題の原因となっている送信のデフォルトの動作を防ぐために、送信関数で false を返します。

$('#form').submit(function() {
    firstname = $("input#firstname").val();
    lastname = $("input#lastname").val();
    alert(firstname + lastname);
    $.ajax({
    ......
   }); 
   return false;
});
于 2013-06-11T10:47:42.300 に答える
1

$.param や .serialize などのメソッドを使用してデータを送信する必要があります。

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

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

于 2013-06-11T10:55:47.917 に答える