0

同様の質問をいくつか見たことがありますが、これについて具体的に語っているものは見たことがありません。非常に単純なサンプルを作成しました。動作するはずですが、動作しません。要点は、単純なものを見て、他の類似したものが明確になるようにすることです。

これは非常に「基本的」であり、これ以上簡単にするのは難しいと思います。だから、人々はそれが究極の初心者の足がかりであることを知って、それを支持することができるはずです:

HTML と JS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="javascript"></script>
<script type="text/javascript" src="/javascript/jquery-1.8.2.js">
$(document).ready(function(){
    $("submit").click(function(){
        var req = $.ajax({
                type: 'POST',
                url: 'form.php',
                data: {
                        message: $('#message').val(),
                        author: $('#author').val()
                },
                timeout: 20000,
                beforeSend: function(msg) {
                        $("#sent").html(msg);
                }
        });

        req.fail(function(xhr, ajaxOptions, thrownError) {
                alert("AJAX Failed");
        });

        req.done(function(res) {
                 $("#received").html(res);
        });
    });
});
</script>
</head>
<body>
<div id="sent"></div>
<div id="form">
<form>  
    Your message:  <input type="text" name="message" value="Hi!" /><br />
    Your name: <input type="text" name="author" value="Michael" /><br />
    <input type="submit" name="submit" value="Submit me!" />
</form>
</div>
<div id="received"></div>
</body>
</html>

そしてPHP：

<?php 
  echo "The file is located at ".$_POST["message"].".<br>";
  echo "The file is named ".$_POST["author"].".";
4

3 に答える 3

1

入力フィールドにidを割り当てる代わりに、serializeを使用できます。

<html>
<head>
<script type="javascript"></script>
<script type="text/javascript" src="/javascript/jquery-1.8.2.js">
$(document).ready(function(){
$("#submit").click(function(){
    var req = $.ajax({
            type: 'POST',
            url: 'form.php',
            data: $('#frm').serialize(),
            timeout: 20000,
            beforeSend: function(msg) {
                    $("#sent").html(msg);
            },
            success: function(data){
                alert('Success!Data was received by php.Message from the php script:'+data.res);
            }
    });

    req.fail(function(xhr, ajaxOptions, thrownError) {
            alert("AJAX Failed");
    });

    req.done(function(res) {
             $("#received").html(res);
    });
});});

</script>
</head>
<body>
<div id="sent"></div>
<div id="form">
<form id="frm">  
Your message:  <input type="text" name="message" value="Hi!" /><br />
Your name: <input type="text" name="author" value="Michael" /><br />
<input type="submit" id="submit" value="Submit me!" />
</form>
</div>
<div id="received"></div>
</body>
</html>

PHPスクリプト：

<?php 
if(isset($_POST['message']) && isset($_POST['author']))
{
    $arr_to_pass_as_json = array('res'=>'This is your message:'.$_POST['message'].' and your author '.$_POST['author']);
    echo json_encode($arr_to_pass_as_json)
}
else
    echo json_encode(array('res'=>'Message and Author is required'));

phpからjavascriptへの結果を表示する際にjsonを使用します。これがお役に立てば幸いです。

于 2012-11-28T01:42:01.343 に答える
0

使用してから

message: $('#message').val(),
author: $('#author').val()

入力tgsでIDを指定する必要があります。

<form>  
    Your message:  <input type="text" name="message" value="Hi!" id="message" /><br />
    Your name: <input type="text" name="author" value="Michael" id="author" /><br />
    <input type="submit" name="submit" value="Submit me!" />
</form>

html id selectyorを見つけてそこから値を取得するように要求すると、「name」はIDと同じではありません。

または、htmlフォームにIDを入力して.sezialize（）を使用することもできますが、このステップではIDを追加する方が簡単です。 http://api.jquery.com/serialize/

于 2012-10-30T00:14:54.017 に答える
0

これで違いを確認してください：

$(document).ready(function(){
    $("submit").click(function(){
        var req = $.ajax({
                type: 'POST',
                url: 'form.php',
                data: {
                        message: $('#message').val(),
                        author: $('#author').val()
                },
                timeout: 20000,
                beforeSend: function(msg) {
                        $("#sent").html(data);
                }
        })

        .fail(function(xhr, ajaxOptions, thrownError) {
                alert("AJAX Failed");
        })

        .done(function(res) {
                 $("#received").html(res);
        });
    });
});

これが機能するかどうかを確認します（ http://api.jquery.com/jQuery.ajax/#jqXHRによると、そうすべきです）

于 2012-10-30T00:07:57.793 に答える