Question

我只需要使用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>";
     }
    }

?>

Answer 1

尝试以下代码。

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

Answer 2

我建议您查看Chrome Devtools的网络标签，并确保AJAX调用不会运行两次。我认为，如果查询运行了两次，但第二个查询没有附加任何名称，则第一个查询收到响应后，它将返回空白。

显示Jquery Ajax结果的问题

2 个答案: