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

回答

相关问题