如何讓我的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一起工作？

回答

相關問題