jQuery Ajax请求不起作用

Question

I tried to send form data via a jquery ajax request to the server and display response of the php file that located on the server, in the <div id=”response-box”></div> . But when I submit the form nothing happened. What is my mistake? I tried three days to solve this. Help me. Thank You!

I tested this on localhost (wamp server)

This is my html code on 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>

This is Jquery Ajax Request on 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);}


        });


    });

});

This is my php code on submit.php (localhost/wamp server)

<?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

Looking at your code, you are using $.ajax request when clicking submit button. Means that, the form reacted as normal form that refresh the page. If you want to request an ajax, then you should disable default behavior of the form by using preventDefault() code. And i did't see any error in your js code.

Change js code into this :

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


    });


});

});

Some error in your php code. Try following code :

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

echo $fname.$lname;

Answer 2

Problem Solved. Credit goes to the people who comment/answer under this post. Thank You!

Error was on the app.js file. Added event.preventDefault(); and added dataType :"html", to the ajax request.

 $(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

The variable names dont look correct $name vs $fname .

Also, try specifying dataType html . $.ajax is a little tricky to get it working properly sometimes.