Question

我见过一些类似的问题，但我没有看到任何具体的问题。我创建了一个非常简单的示例，我觉得它应该可以工作，但事实并非如此。关键是看到一些简单的东西，以便其他相似的东西是清楚的。

我觉得这是非常'基本的'，而且很难简化;因此，人们应该能够支持它，因为它知道它是最终的noobie垫脚石：

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"].".";

Answer 1

您可以使用序列化而不是将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 SCRIPT：

<?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。希望这会有所帮助。

Answer 2

检查区别：

$(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它应该）

Answer 3

因为你的使用

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/

如何让我的jQuery和PHP与ajax一起工作？

3 个答案: