我想將數據發送到 php 文件進行處理並使用 ajax 接收響應而不刷新頁面

Question

我想從 xml 文件中讀取和打印標簽屬性名稱，然后使用 ajax 在屏幕上打印出來。 out 保存在數據數組中。請伙計們我需要幫助解決這個問題。數據庫文件，xml 文件都很好。它只是 ajax 調用是問題。提前謝謝

這是我用於接收數據的 index.php 代碼

<?php 
require('connect.php'); 
?>



<html>
<head>
    <title>Bellcom Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-9" style="margin:0 auto; float:none;">
                <span id="message"></span>

                    <div class="form-group">
                        <label>Upload files</label>
                        <input type="file" name="file" id="file">
                    </div>
                    <br>
                    <div class ="form-group">
                        <label>Search for a File Number</label>
                        <input type="text" id="file_name" name="file_name">
                    </div>
                    <br>
                    <div class="form-group">
                        <button type="button" name="submit" id="submit" class="btn btn-info" >Fetch</button>
                    </div>

                <div class="table-responsive" id="display" style="display:none">
                    <table class="table table-bordered">
                        <tr>
                            <td width="10%" align="right"><b>Attribute Name</b></td>
                            <td width="90%"><span id="name"></span></td>
                        </tr>

                         <tr>
                            <td width="10%" align="right"><b>System ID</b></td>
                            <td width="90%"><span id="sysid"></span></td>
                         </tr>
                         <tr>
                            <td width="10%" align="right"><b>Date</b></td>
                            <td width="90%"><span id="date"></span></td>
                         </tr>
                    </table>
                </div>
            </div>

        </div>
    </div>
</body>
</html>

<script>
    $(document).ready(function(){ 
        $('#submit').click(function(){
            var id= $('#file_name').val();
                  if(id != '')
                  {
                    $.ajax({ 
                        url:"file_controller.php",
                        type: "POST",
                        data:{id:id},
                        dataType:"JSON",
                        success:function(data)
                            {
                                 $('#meeting_details').css("display", "block");
                                 $('#name').text(data.name);
                                 $('#sysid').text(data.sysid);
                                 $('#date').text(data.date);
                            },
                        error: function (data) {
                          alert("data is not received");
                        }
                    })
                  }else{
                    alert("Please Select a file");
                    $('#meeting_details').css("display", "none");
                  }
        });
    });
</script>

這是我用於處理數據的 php 文件。

<?php 

require('connect.php'); 

    $f_name = "";


    if (isset($_POST['id'])) {
        $f_name = strip_tags($_POST['id']);//remvove html tags
        $f_name = str_replace(' ', '', $f_name);//remove spaces
        $f_name = strtolower($f_name);//lower case
        $arr = array('XML_','.xml');
        $f_name = implode("$f_name",$arr);

        $database_file = mysqli_query($conn,"SELECT * FROM xml_files WHERE file_name='$f_name'");
        $row = mysqli_fetch_array($database_file);
        $database_file_name=$row['file_name'];



        if (file_exists("files/$database_file_name")) {
            $xml=simplexml_load_file("$database_file_name") or die("Error: Cannot create object");


            foreach ($xml->children() as $node) {
                foreach ($node->children() as $nodechild) {
                    foreach ($nodechild->children() as $nodegrandchild){
                        $arr = $nodegrandchild->attributes();   // returns an array

                        if (!empty($arr["name"])) {
                            $data['name'] = $arr["name"];   //save the attribute name in an array format 
                            print ("name=".$arr["name"]);     // get the value of this attribute
                            print ("<br>");
                            print ("<p><hr>");
                        }
                        if (!empty($arr["sysid"])) {
                            $data['sysid'] = $arr["sysid"];
                            print ("sysid=".$arr["sysid"]);
                            print ("<br>");
                            print ("<p><hr>");
                        }
                         if (!empty($arr["date"])) {
                            $data['date'] = $arr["date"];
                            print ("date=".$arr["date"]);
                            print ("<br>");                 
                            print ("<p><hr>");
                        }
                    }
                }
            }
        }
    echo json_encode($data);
    }       
 ?>

Answer 1

嘗試添加event.preventDefault() ：

$('#submit').click(function(event){
     event.preventDefault()

我想將數據發送到 php 文件進行處理並使用 ajax 接收響應而不刷新頁面

問題描述

1 個解決方案

解決方案1
0 2020-03-01 14:37:05

我想將數據發送到 php 文件進行處理並使用 ajax 接收響應而不刷新頁面

問題描述

1 個解決方案

解決方案1 0 2020-03-01 14:37:05

解決方案1
0 2020-03-01 14:37:05