Проблема с отображением результата Jquery Ajax - PullRequest
Новая
       1

Проблема с отображением результата Jquery Ajax

1 голос
/ 21 июня 2019

Мне просто нужно отобразить имена массива, используя ajax. Следующий код работает, но результат (Nilantha Ruwan Nimal Shamitha Alex) просто отображается и исчезает.

Index.php 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    </head>
    <body>
    <div class="container" style="margin-top:50px";>
    <form >
    <div class="form-group">
    <input type="text" id="name" class="form-control" placeholder="Enter Name....">
    </div>
    <div class="form-group">
    <button class="btn btn-success" id="btn">Enter</button>
    </div>
    </form> 
    <div class="msg"></div>     
    </div>
    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#btn").click(function(){
    var name = $("#name").val();
    $.post("ajax.php",{ajax_name:name},function(response){
    $(".msg").html(response);
    })
    .fail(function(error){
    alert(error.statusText);
        })
      })
    })
    </script>

</body>
</html>

ajax.php 

<?php 

    if(isset($_POST['ajax_name'])){
    $store = array("Nilantha","Ruwan","Nimal","Shamitha","Alex");
    foreach($store as $names) {
    echo $names,"<br>";
     }
    }

?>

Ответы [ 2 ]

1 голос
/ 21 июня 2019

Попробуйте следующий код. 

  <script type="text/javascript">
        function submit() {
            jQuery("form").submit(function(e) {
                e.preventDefault();
                var name = jQuery("#name").val();
                jQuery.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    data: {ajax_name:name},
                    success: function(response) {
                        jQuery(".msg").html(response);
                        jQuery('#name').val('');
      },
      error: function() {
        console.log("Something wrong");
      }
    });});
        }

        jQuery(document).ready(function() {
            submit();
        });
    </script>
0 голосов
/ 21 июня 2019

Я бы посоветовал взглянуть на вкладку сети Chrome Devtools и убедиться, что вызов AJAX не выполняется дважды. Я бы подумал, что если запрос выполняется дважды, но ко второму не было прикреплено никакого имени, он вернется пустым, как только первый получит свой ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...