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

我见过一些类似的问题，但我没有看到具体说明这一点。我创建了一个非常简单的示例，我觉得它应该可以工作，但事实并非如此。关键是要看到一些简单的事情，以便其他类似的事情很清楚。如何让我的jQuery和PHP与ajax一起工作？

我觉得这是非常“基本”的，很难简单得多;因此，人们应该能够得到它的后面，知道这是最终的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"].".";

来源

2012-10-30 Wolfpack' 08

什么是或不是它在做什么？从它的外观来看，我怀疑它实际上是提交表单并重新加载页面，而不是停止使用ajax请求。 –

@MichaelBerkowski我正在更新它的一些内容...截至目前，点击提交不会做任何事情。我试图看到发生的事情是点击提交输出数据到'＃发送'，然后到'＃收到' –

您可以使用序列化，而不是在输入字段分配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'));

我们在显示结果从PHP到JavaScript中使用JSON。希望这会有所帮助。

来源

2012-11-28 01:42:01 Orvyl

我仍然需要测试这个，但是从阅读代码看，它看起来不错。尽管如此，请回答我吧。我可以在keyup中序列化吗？如果我这样做，是不是在服务器上的负载很重，因为我每次发送密钥而不是一个字段的内容时发送整个表单？ –

是的..你可以在每个keyup中调用它。如果你有很多领域，你的PHP脚本有很多事情要做（我的意思是一堆代码），这将真正影响页面的加载时间。但你可以给出一个消息，如“请稍等......”，你知道我的意思。 – Orvyl

先生，希望我的回答能帮助你。如果是这样，希望你把支票给我的答案。谢谢你^ _^ – Orvyl

检查的区别与此：

$(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-30 00:07:57 ChrisH

实际上，这一个不起作用。我对我是否应该使用msg或数据感到困惑... –

因为您使用

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-30 00:14:54

我应该使用'.html（data）'还是'.html（msg）'，并且我应该使用'（“submit”）'或者'（ “#submit”）'？ –

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

回答

相关问题