Jquery Ajax Request Not Working

我試圖通過jquery ajax request將表單數據發送到服務器，並顯示位於服務器上的php文件的響應，地址爲<div id=」response-box」></div>。但是當我提交表單時什麼都沒有發生。我的錯誤是什麼？我試了三天解決這個問題。幫我。謝謝！Jquery Ajax Request Not Working

我測試了這個在localhost（WAMP服務器）

這是index.html的

<form id="myform"> 
    <input type="text" id="fname"> 
    <input type="text" id="lname"> 
    <input type="submit" id="data-send-button" value="Send Data"> 
</form> 

<div id="responce-box"> </div>

這是app.js jQuery的Ajax請求我的HTML代碼

$(document).ready(function(){ 

    $('form#myform').on('submit' , function(){ 

     $.ajax({ 

     url:"submit.php" , 
     type: "POST" , 
     data: {fname: $('#fname').val(), lname: $('#lname').val()} , 

     success: function(data){ 
     $('#responce-box').html(data);} 


     }); 


    }); 

});

這是我在submit.php上的php代碼（localhost/wamp server）

<?php 

$fname = $_POST['fname']; 
$lname = $_POST['lname']; 

echo $name $lname; 

// Code for Data Sending to the MySql Data Base

來源

2015-04-29 Dilan Leelarathna

沒有當我點擊提交按鈕，在文本框中的文本值都消失

你的代碼看，你正在使用$就要求點擊提交按鈕時。意味着，形式反應爲正常形式刷新頁面。如果您想要請求ajax，那麼您應該使用preventDefault()代碼禁用表單的默認行爲。我在你的js代碼中沒有看到任何錯誤。

變化JS代碼到這一點：

$(document).ready(function(){ 

$('form#myform').on('submit' , function(e){ 
    e.preventDefault();//<--add here ---^ 
    $.ajax({ 

    url:"submit.php" , 
    type: "POST" , 
    data: {fname: $('#fname').val(), lname: $('#lname').val()} , 

    success: function(data){ 
    $('#responce-box').html(data);} 


    }); 


}); 

});

在你的PHP代碼中的一些錯誤。請嘗試以下代碼：

$fname = $_POST['fname']; 
$lname = $_POST['lname']; 

echo $fname.$lname;

來源

2015-04-29 03:06:20

@Dilan Leelarathna，問題現在解決了嗎??? –

是的問題解決了。謝謝！ –

好，很高興聽到。別客氣。 –

問題已解決。 Credit發送給在此帖子下評論/回覆的人。謝謝！

錯誤發生在app.js文件中。添加event.preventDefault();並將其添加dataType :"html",到ajax請求。

$(document).ready(function(event){ 
 

 
    event.preventDefault(); //Added 
 
    
 

 

 
\t $('form#myform').on('submit' , function(){ 
 
\t \t 
 
\t $.ajax({ 
 

 
\t \t url:"submit.php" , 
 
\t \t type: "POST" , 
 

 
     dataType :"html", //Added 
 

 
\t \t data: {fname: $('#fname').val(), lname: $('#lname').val()} , 
 
\t \t \t \t \t 
 
\t \t success: function(data){ 
 
\t \t $('#responce-box').html(data);} 
 
\t \t \t \t \t 
 

 
\t \t }); 
 

 

 
\t }); 
 

 
});

來源

2015-04-29 03:36:19

變量名不看正確$name VS $fname。

此外，請嘗試指定dataType html。 $.ajax有時候會讓它正常工作有點棘手。

來源

2015-04-29 03:57:31 khuderm

Jquery Ajax Request Not Working

回答

相關問題