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

您可以使用 serialize 而不是将 id 分配给输入字段：

<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'));

我们使用 json 将结果从 php 显示到 javascript。希望这会有所帮助。

于 2012-11-28T01:42:01.343 回答
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 回答
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，并从中获取值，“名称”与 ID 不同。

或者，您可以在 html 表单中添加 id 并使用 .sezialize()，但在此步骤中简单地添加 id 会更简单。 http://api.jquery.com/serialize/

于 2012-10-30T00:14:54.017 回答