1

2 つのフィールドを持つフォームを持つ HTML ファイルがあります。これらのフィールドの値は PHP にポストする必要があり、この PHP は JQuery を使用して HTML から取得する必要があります。これは私が実装したものです。

私のHTMLファイル：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function(){
           $("button").click(function(){
                $("#first").load("result_jquery.php");
            });
        });     

    </script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
        Name: <input type="text" name="name"/><br/>
        Number: <input type="text" name="number"/><br/>
        <button>submit</button>
        </form>
    </div>
</body>

これは私のresult_jquery.phpです

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>

送信ボタンをクリックすると、こんにちはが印刷されます。しかし、名前は印刷されていません。これで私を助けてくれませんか。どこが間違っているのかわかりません。

4

4 に答える 4

2

ボタン要素の使用が心配だと思います。今配置するコードは、必要に応じて適切に機能しているので、これを試して結果を教えてください:)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function(){
       $("#button").click(function(){
            var n = $('[name="namee"]').val();
            var nb = $('[name="number"]').val();
            $("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
        });
    });     

</script>
</head>
<body>
    <div id="first"></div>
    <div>
        <form method="POST" id="myForm">
            Name: <input type="text" name="namee"/><br/>
            Number: <input type="text" name="number"/><br/>
            <input type="button" value="Submit" id="button" />
        </form>
    </div>
</body>
</html>
于 2013-03-28T21:02:03.227 に答える
1

このコードをコピーしてください：

<script type="text/javascript">
$(document).ready(function() {
    $("#send").click(function() {
        $.ajax({ 
            type: "POST", 
            data : "name="+$( '#name' ).val(),
            url: "result_jquery.php", 
            success: function(msg) {
                $('#first').html(msg);
            }
        }); 
    });
});
</script>

これを形に変える

<form method="POST" id="myForm">
    Name: <input type="text" id="name" name="name"/><br/>
    Number: <input type="text" id="number" name="number"/><br/>
    <input type="button" id="send" value="Submit">
</form>
于 2013-03-28T20:43:19.047 に答える
0

のjQueryドキュメントからload：

この方法は、サーバーからデータを取得する最も簡単な方法です。$.get(url, data, success) とほぼ同じですが、グローバル関数ではなくメソッドであり、暗黙的なコールバック関数がある点が異なります。成功した応答が検出されると (つまり、textStatus が "success" または "notmodified" の場合)、.load() は一致した要素の HTML コンテンツを返されたデータに設定します。これは、メソッドのほとんどの使用が非常に簡単であることを意味します。

POST ではなく、そのメソッドで HTTP GET を実行しています。

私の提案は、情報を含む AJAX リクエストをサーバーに送信する場合は、長い形式の jQuery AJAX の使用に慣れることです。

$.ajax({
    data: 'url=encoded&query=string&of=data&or=object',
    url: 'path/to/server/script.php',
    success: function( output ) {
        // Handle response here
    }
});

詳細については、jQuery のドキュメントを参照してください: http://api.jquery.com/jQuery.ajax/

于 2013-03-28T20:02:52.537 に答える
0

それを試して、結果を教えてください:)

var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});

name フィールドの要素名を「name」から「namee」に変更し、必要に応じて変更を適用してください。次のようになります。

var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});

および result_jquery.php ファイル:

<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
于 2013-03-28T20:27:20.107 に答える