Jquery Ajax 请求无效

Question

我试图通过 jquery ajax request 向服务器发送表单数据，并在 <div id=”response-box”></div> 中显示位于服务器上的 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>

这是 Jquery Ajax app.js

的请求

$(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（localhost/wamp 服务器）

上的 php 代码

<?php

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

echo $name $lname;

// Code for Data Sending to the MySql Data Base

Answer 1

No when I click submit button, Text Values in the text boxes are Disappeared

查看您的代码，您在单击提交按钮时使用了 $.ajax 请求。这意味着，表单的反应与刷新页面的正常表单一样。如果您想请求一个 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;

Answer 2

问题已解决。 归功于comment/answer下post的人。谢谢！

app.js 文件出错。添加了 event.preventDefault(); 并添加了 dataType :"html", 到 ajax 请求。

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

     event.preventDefault(); //Added 
   


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

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

        dataType :"html", //Added 

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

  });


 });

});

Answer 3

变量名看起来不正确 $name vs $fname.

另外，尝试指定 dataType html。 $.ajax 有时要让它正常工作有点棘手。

Jquery Ajax 请求无效

Jquery Ajax Request Not Working

html

javascript

php

ajax

jquery