Не могу получить ответ от ajax

Я работаю над попыткой отправить сообщение в файл ajax с jquery и показать результат на странице, опубликованной с. Сообщение отправлено, но я не получаю ответа от ajax. Я что-то пропустил?Не могу получить ответ от ajax

файл формы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test Ajax</title> 
<script src="js/jquery-1.10.2.js"></script> 
</head> 

<body> 
<form id="myform" /> 
<input type="text" id="youTyped" value=""/> 
<input type="submit" value="Submit"> 
</form> 
<div id="answer"></div> 
<script type="text/javascript"> 
     $('#myform').submit(function(){ 
     var youTyped = $("#youTyped").val(); 
     var data = {youTyped:youTyped}; 
     $.ajax({ 
      type: "POST", 
      url: "scripts/ajaxTest.php", 
      data: data, 
      success: function(response){ 
      $("#answer").html(response); 
      } 
}); 
}); 
</script> 
</body> 
</html>

Аякса файл

<?php 
if(isset($_POST['youTyped'])){ 
    $youTyped = $_POST['youTyped']; 
} 
echo $youTyped; 
?>

источник

2013-08-04 DSmith

попробовать добавить '' –

форма не является самостоятельной запирающий элемент? Попробуйте это следующим образом -> http://jsfiddle.net/qhLu3/1/ .......... – adeneo

Кроме того, если разметка была действительной, форма была отправлена, поскольку вы не default form submit, см. скрипку выше. – adeneo

Ну, в первую очередь, вы не написать форму правильно, то элементы, которые вы хотите отправить не в форме.

Во-вторых, ваша функция js не позволяет удалить форму для отправки, поэтому вы перегружаете страницу при отправке формы.

Таким образом, чтобы исправить это, и получить ответ, просто изменить код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test Ajax</title> 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
</head> 

<body> 
<form id="myform"> 
    <input type="text" id="youTyped" value=""/> 
    <input type="submit" value="Submit"> 
    <div id="answer"></div> 
</form> 

<script type="text/javascript"> 
$('#myform').submit(function(e){ 
    // Avoid send the form as a normal request 
    e.preventDefault(); 

    var youTyped = $("#youTyped").val(); 
    var data = {youTyped:youTyped}; 
    $.ajax({ 
     type: "POST", 
     url: "scripts/ajaxTest.php", 
     data: data, 
     success: function(response){ 
     $("#answer").html(response); 
     } 
    }); 
}); 
</script> 

</body> 
</html>

Одна последняя вещь. Чтобы протестировать его, когда вы отправляете и получаете AJAX, если вы используете Chrome, вы можете использовать инструменты разработки, чтобы знать, правильно ли отправляете запросы. Просто нажмите F12, а затем перейдите на вкладку «Сеть». Если вы правильно использовать AJAX, вы увидите, как новые строки добавляются при нажатии кнопки отправки:

enter image description here

источник

2013-08-04 15:39:53 Chococroc

Chococroc благодарю вас за полный ответ. Я вытаскиваю свои волосы, пытаясь выяснить, что случилось! – DSmith

Вы должны return false на подчиненной формы. Форма отправляется перед запросом ajax. Также добавьте закрывающий тег для формы.

<script type="text/javascript"> 
    $('#myform').submit(function() { 
     var youTyped = $("#youTyped").val(); 
     var data = { 
      youTyped: youTyped 
     }; 
     $.ajax({ 
      type: "POST", 
      url: "scripts/ajaxTest.php", 
      data: data, 
      success: function (response) { 
       $("#answer").html(response); 
      } 
     }); 
     return false; 
    }); 
</script>

источник

2013-08-04 15:28:37 Konsole

О, спасибо большое. Это была опечатка :) – Konsole

Попробуйте, если этот код работает:

<body> 

<input type="text" id="youTyped" value=""/> 
<input type="submit" id="submit" value="Submit"> 
<div id="answer"></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
      $('#submit').click(function(){ 
      var youTyped = $("#youTyped").val(); 

      $.post('scripts/ajaxTest.php',{"youTyped" : youTyped},function(response) 
     { 
       $("#answer").html(response); 
     }); 
}); 
}); 
</script> 
</body> 
</html>

источник

2013-08-04 15:35:51 Aditya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test Ajax</title> 
    <script src="js/jquery.min.js"></script> 
     <script type="text/javascript"> 
    $('#myform').submit(function(event){ 
     event.preventDefault(); 
    var youTyped = $("#youTyped").val(); 
    var data = {youTyped:youTyped}; 
    $.ajax({ 
     type: "POST", 
     url: "ajaxTest.php", 
     data: data, 
     success: successMsg, 
     error: errorMsg 
    }); 
}); 

function successMsg(response){ 
    alert(response); 
    $("#answer").html(response); 
} 

function errorMsg(){ 
    alert("Invalid Ajax Call"); 
} 

</script> 

</head> 

<body> 
    <form id="myform" /> 
    <input type="text" id="youTyped" value=""/> 
    <input type="submit" value="Submit"> 
    <div id="answer"></div> 

</body> 
</html>

источник

2013-08-04 15:47:55 munna

Объяснение вашего ответа всегда полезно. – devrooms

Как я носился с идеей, думал, что это будет сделать хорошее дополнение/вклад на вопрос.

Я добавил и изменил несколько вещей.

один из которых:

Если ничего не было напечатано в поле формы ввода, он вернется «Вы набрали: ничего».

PHP:

<?php 

if(!empty($_POST['youTyped'])){ 

    $youTyped = $_POST['youTyped']; 

echo "You typed: " .$youTyped; 
} 

else if (empty($_POST['youTyped'])){ 

echo "You typed: Nothing"; 

} 

?>

источник

2013-08-04 23:25:23

Не могу получить ответ от ajax

ответ

Смежные вопросы