2017-01-11 4 views
-2

Обновлено: По-прежнему не работает после добавления «#».Как получить результат от php to html использовать ajax?

Я новичок в ajax. Я тренируюсь, чтобы отправить значение в php-скрипт и вернуть результат.

Прямо сейчас, я встретил одну проблему, и я не могу показать свой результат на моей странице html. Я попробовал ответы на вопросы онлайн, но я все еще не могу исправить эту проблему.

My index.html принимает значение из формы и отправляет информацию о форме в getResult.php.

My getResult.php будет выполнять вычисления и результат эха. Как показать результат в index.html?

Hers является HTML код

index.html

<html> 
<body> 
    <form name="simIntCal" id="simIntCal" method="post" 
     > 
     <p id="Amount" >Amount(USD)</p> 
     <input id="amount_value" type="text" name="amount_value"> 

     <p id="annual_rate" >Annual Rate of Interest 
      (%)</p> 
     <input id="rate_value" type="text" name="rate_value"> 

     <p id="time_years" >Time (years)</p> 
     <input id="time_value" type="text" name="time"> 
     <input id="calculate" type="submit" value="Calculate"> 
    </form> 
    <p id="amount_inteCal" >The Amount (Acount 
     + Interest) is</p> 
    <input id="result" type="text"> 
</body> 
</html> 

Ajax скрипт:

<script> 
     $('#simIntCal').on('submit', function (e) { 

      e.preventDefault(); 

      $.ajax({ 
       type: 'post', 
       url: 'getResult.php', 
       data: $('#simIntCal').serialize(), 
       success: function (result) { 
        $("#result").text(result);// display result from getResult.php 
        alert('success'); 
       } 
      }); 

     }); 
</script> 

getResult.php

<?php 
if ($_SERVER ["REQUEST_METHOD"] == "POST") { 

//do some calculation 
    $result=10;//set result to 10 for testing 
    echo $result; 
} 
?> 
+0

Должен быть '$ (" # result ")' в вашем обратном вызове. – ccKep

+0

$ ("# result"). Val (результат); –

+0

@ ccKep @ Иван Бараев, он все еще не работает после добавления #. – jpp

ответ

0

index.php

----php start---------  
    if(isset($_POST['name'])){ 
     echo 'Thank you, '.$_POST['name']; exit(); 
    } 
----php end --------- 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script> 
function test(){ 
    var formDATA = {'name': $('#input_name').val()} 
    $.ajax({ 
     type: 'POST', 
     url: 'index.php', 
     data: formDATA, 
     success: function(response){ 
      $('#result').html(); 
     } 
    }); 
} 
</script> 
<input id="input_name" type="text" value=""> 
<button onclick="test();">Test Ajax</button> 
<div id="result"></div> 

Попробуйте что-нибудь простое, это очень базовая версия AJAX и PHP все на одной странице. Поскольку кнопка запускает функцию, вам даже не нужна форма (не означает, что вы не должны ее использовать). Но я оставил его простым, чтобы вы могли следить за всем.

Извините, когда я добавил открытые и закрывающие теги php, он не отображался как код. Также не забудьте указать ваши ресурсы jquery.

1

Вы пропускаете '#' в перед вашим css sel ector для результата.

$("result").text(result);// display result from cal.php

Должно быть

$("#result").text(result);// display result from cal.php

+0

Он по-прежнему не работает после добавления «#». – jpp

0

В вашем html-файле, где вы хотите, чтобы результат отображался, вы, вероятно, захотите использовать div.

В настоящее время код используется поле ввода:

<input id="result" type="text"> 

А что вы, вероятно, хотите что-то вроде этого:

<div id="result"></div> 

Если вы не собирались иметь результат появляется во входе поле внутри вашей формы, и в этом случае поле ввода не находится внутри вашего кода формы.

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