JQuery Ajax Request Not Working

Question

Я попытался отправить данные формы через jquery ajax request на сервер и отобразить ответ php-файла, который находится на сервере, в <div id=”response-box”></div>. Но когда я представляю форму, ничего не произошло. Какая у меня ошибка? Я попробовал три дня, чтобы решить эту проблему. Помоги мне. Спасибо!

Я испытал это на локальном хосте (WAMP сервер)

Это мой HTML-код на 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> 

Это 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);} 


     }); 


    }); 

}); 

Это мой php-код на 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

Нет, когда я нажимаю кнопку отправки, текстовые значения в текстовых полях исчезнутся

Глядя на ваш код, вы используете $ .ajax запрос при нажатии кнопки отправки. Значит, форма реагировала как обычная форма, обновляющая страницу. Если вы хотите запросить ajax, вы должны отключить поведение по умолчанию формы, используя код preventDefault(). И я не видел ошибок в вашем js-коде.

Change код в расслоение плотной это:

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

проблема решена. Кредит относится к людям, которые комментируют/отвечают в этом сообщении. Спасибо!

Ошибка была на файле 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 }); 
 

 
});

Answer 3

имена переменных не смотрят правильно $name против $fname.

Также попробуйте указать dataType html. $.ajax немного сложнее, чтобы заставить его работать исправно.