0

私はajaxとjQueryが初めてです。ajaxとjQueryを使用してhtmlフォームの値を取得しようとしています。値を取得していますが、その値を別のphpファイルに渡すことができません。何が欠けているのかわからない..誰かが私を助けてくれる..

これが私のform.phpファイルコードです:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Form</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#submit').click(function(){
                var srt = $("#input").serialize();
                // alert is working perfect
                alert(srt);
                $.ajax({
                    type: 'POST',
                    url: 'database.php',
                    data: srt,
                    success: function(d) {
                        $("#someElement").html(d);
                    }
            });
         });
       });
    </script>
</head>
<body>
<form id="input" method="post" action="">
    First Name:<input type="text" name="firstName" id="firstName">
    Last Name: <input type="text" name="lastName" id="lastName">
   <input type="submit" id="submit" value="submit " name="submit">
</form>
<div id="someElement"></div>
</body>
</html>

ここに私のdatabase.phpファイルコードがあります:

<?php
if(isset($_POST['submit']))
{
    $firstName = $_POST['firstName'];

    $lastName = $_POST['lastName'];

    echo $firstName;

    echo $lastName;
}
4

4 に答える 4

2

以下を追加する必要があります。

return false;

clickハンドラの最後まで。それ以外の場合は、デフォルトの送信ボタン アクションが実行され、ページが更新されます。

また、次の行を削除します。

if (isset($_POST['submit']))

送信ボタンは、フォームを呼び出すときには含まれず.serialize()、送信ボタンが通常のブラウザー送信を実行しているときにのみ送信されます (複数の送信ボタンがある場合、これにより、サーバーはどれが使用されたかを知ることができます)。

于 2013-07-26T04:37:51.397 に答える
0

次のことを行う必要があります

 $('#submit').click(function(){
                var srt = $("#input").serialize();
                // alert is working perfect
                alert(srt);
                $.ajax({
                    type: 'POST',
                    url: 'database.php',
                    data: srt,
                    success: function(d) {
                        $("#someElement").html(d);
                    }
            return false;
});

return false を使用しないと、フォームのデフォルト イベントが発生します。

于 2013-07-26T04:40:12.293 に答える
0

以下のように使用できます

$("#input").submit(function(event) {
    var srt = $("#input").serialize();
    // alert is working perfect
    alert(srt);
    $.ajax({
        type: 'POST',
        url: 'database.php',
        data: srt,
        success: function(d) {
            $("#someElement").html(d);
        }
    })
    return false;
});
于 2013-07-26T04:45:16.770 に答える
0

クリック イベントの既定のアクションを防止する必要があります。そうしないと、フォームが既定のフォーム アクションを使用して処理され、ajax 呼び出しが完了しません。

$("#input").submit(function(event) {
    event.preventDefault(); // prevent default action
    var srt = $("#input").serialize();
    // alert is working perfect
    alert(srt);
    $.ajax({
        type: 'POST',
        url: 'database.php',
        data: srt,
        success: function(d) {
            $("#someElement").html(d);
        }
    });    
});
于 2013-07-26T04:49:11.870 に答える