Javascript Jquery Ajax请求不工作

我试图通过

jqueryajax请求

将表单数据发送到服务器，并在

中显示位于服务器上的php文件的响应。但当我提交表格时，什么也没发生。我犯了什么错？我试了三天来解决这个问题。帮助我。谢谢大家!

我在本地主机（wamp服务器）上测试了这一点

这是我在index.html上的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>

这是我在submit.php（localhost/wamp服务器）上的php代码

否当我单击“提交”按钮时，文本框中的文本值将消失

查看代码，单击submit按钮时使用的是$.ajax请求。也就是说，表单的反应与刷新页面的正常表单一样。如果要请求ajax，则应使用
preventDefault（）
code禁用表单的默认行为。我在你的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);}


    });


});

});

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

echo $fname.$lname;

问题解决了在此帖子下发表评论/回答的人将获得好评。谢谢

app.js
文件中出现错误。添加了
event.preventDefault（）
并将
数据类型：“html”
添加到ajax请求中


$（文档）.ready（函数（事件）{
event.preventDefault（）；//已添加
$（'form#myform'）。在（'submit'，function（）上{
$.ajax({
url:“submit.php”，
类型：“POST”，
数据类型：“html”，//已添加
数据：{fname:$（'#fname'）.val（），lname:$（'#lname'）.val（），
成功：功能（数据）{
$（“#响应框”）.html（数据）；}
});
});
});
变量名看起来不正确
$name
vs
$fname

另外，请尝试指定
数据类型html
<代码>$。ajax

有时要让它正常工作有点棘手

$(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);}


    });


});

});

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

echo $fname.$lname;