Question

My Webpage

这是我的三个班级：这个类是我结合其他两个类的地方。当我按提交时，我是右边的表格，无需更新即可更新。

        <!DOCTYPE html>
    <html>
        <head>
            <title>BugDisplayAndReport</title>
            <script src = "jquery.js"></script>
            <script>
                $(document).ready(function(){
                    $.post('BugReport.html',{},function(data){
                        $("#BugReport").html(data);
                    });
                });
                $(document).ready(function(){
                    $.post('BugDisplay.php',{},function(data){
                        $("#BugDisplay").html(data);
                    });
                });
            </script>
        </head>
        <body>
            <div id = "BugReport"></div>
            <div id = "BugDisplay"></div>
        </body>
    </html>

Here is the Issue Report code, i am not going to use the "location.reload(true)" to do what i want because i would the the page to update without refreshing:

<!DOCTYPE html>
<html>
    <head>
        <title>IssueReport</title>
        <script src = "jquery.js"></script>
        <style>
            body{
                padding:0;
                margin:0;
            }
            #box {
                padding: 5px;
                color:black;
                margin: 0 auto;
                border-style: solid;
                border-color: black;
                border-width: 1px;
                width: 162px;
                float: left;
            }
        </style>
        <script>
            $(document).ready(function(){
                $("#sub").click(function(){
                    var user_issue = $("#issue").val();
                    var user_priority = $("#priority").val();
                    var user_type = $("#type1").val();
                    $.post("BugReport.php",{issue:user_issue,priority:user_priority,type1:user_type},function(data){
                        $("#result").html(data);
                        //location.reload(true);
                    });
                });
            });
        </script>
    </head>
    <body>
        <div id="box">
        <h3 style = "margin:10px 30px 30px 30px">Issue Report</h3>
        <form action="BugReport.html" method="post">
        <textarea cols="20" rows="18" name="issue" id = "issue" placeholder = "Enter Your Issue Here" "></textarea></form><br>
        <div style = "width: 100px; margin-left: auto; margin-right: auto">Type Of Issue:</div>
            <div style = "width: 150px; margin-left: auto; margin-right: auto; padding: 2px">
            <form action="BugReport.html" method="post">
            <select name = "type1" id = "type1">
                <option value = "Listing Discrepancy">Listing Discrepancy</option>
                <option value = "PO Discrepancy">PO Discrepancy</option>
                <option value = "Pricing Discrepancy">Pricing Discrepancy</option>
                <option value = "Program Glitch">Program Glitch</option>
                <option value = "Receiving Discrepancy">Receiving Discrepancy</option>
                <option value = "RMA Discrepancy">RMA Discrepancy</option>
                <option value = "Sales Discrepancy">Sales Discrepancy</option>
                <option value = "Shipping Discrepancy">Shipping Discrepancy</option>
            </select>
            </form></div>
            <div style = "width: 50px; margin-left: auto; margin-right: auto">Priority:</div>
            <div style = "width: 70px; margin-left: auto; margin-right: auto; padding: 2px">
            <form action="BugReport.html" method="post">
            <select name = "priority" id = "priority">
                <option value = "Low">Low</option>
                <option value = "Regular" selected>Regular</option>
                <option value = "High">High</option>
                <option value = "Urgent">Urgent</option>
            </select>
            </form></div>
        <div style = "width: 50px; margin-left: auto; margin-right: auto; padding: 2px">
        <input type ="submit" name = "sub" value = "Submit" id = "sub"></div>
        <div id="result"></div>

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

以下是在右侧创建表格的代码：

<?php
    $servername = "localhost";
    $username = "username";
    $password = "password";
    $database = "database";

    $con = mysqli_connect($servername,$username,$password,$database);

    if($con->connect_error){
        die("Connection failed " . $con->connect_error);
    }

    $strSQL = "SELECT * FROM BugReport where priority = 'Urgent'";
    $strSQL1 = "SELECT * FROM BugReport where priority = 'High'";
    $strSQL2 = "SELECT * FROM BugReport where priority = 'Regular'";
    $strSQL3 = "SELECT * FROM BugReport where priority = 'Low'";
    $rs = mysqli_query($con,$strSQL);
    $rs1 = mysqli_query($con,$strSQL1);
    $rs2 = mysqli_query($con,$strSQL2);
    $rs3 = mysqli_query($con,$strSQL3);
    $i = 0;
    echo "<table style = 'float: left; position: relative; left:160px; border: 1px; border-style:solid; border-collapse: collapse;'><tr>
    <th style = 'border: 1px; border-style:solid; border-collapse: collapse;'>Priority</th>
    <th style = 'border: 1px; border-style:solid; border-collapse: collapse'>Issue Category</th>
    <th style = 'border: 1px; border-style:solid; border-collapse: collapse;width: 300px'>Issue</th>
    <th style = 'border: 1px; border-style:solid; border-collapse: collapse;'>Date</th></tr>";
    while($row = mysqli_fetch_array($rs)){
        if(($i % 2) == 0){
            echo '<tr style="border: 1px; background:#CCFF33; color: black">';
        }else {echo '<tr style="border: 1px; background:white; color: black">';}
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['priority'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['type1'] . "</td>";
        echo "<td style = 'word-break:keep-all;width: 300px; border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['issue'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['date'] . "</td>";
        echo '</tr>';
        $i = $i + 1;
    }
    while($row = mysqli_fetch_array($rs1)){
        if(($i % 2) == 0){
            echo '<tr style="border: 1px; background:#CCFF33; color: black">';
        }else {echo '<tr style="border: 1px; background:white; color: black">';}
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['priority'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['type1'] . "</td>";
        echo "<td style = 'word-break:keep-all;width: 300px; border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['issue'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['date'] . "</td>";
        echo '</tr>';
        $i = $i + 1;
    }
    while($row = mysqli_fetch_array($rs2)){
        if(($i % 2) == 0){
            echo '<tr style="border: 1px; background: #CCFF33; color: black">';
        }else {echo '<tr style="border: 1px; background:white; color: black">';}
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['priority'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['type1'] . "</td>";
        echo "<td style = 'word-break:keep-all;width: 300px; border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['issue'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['date'] . "</td>";
        echo '</tr>';
        $i = $i + 1;
    }
    while($row = mysqli_fetch_array($rs3)){
        if(($i % 2) == 0){
            echo '<tr style="border: 1px; background:#CCFF33; color: black">';
        }else {echo '<tr style="border: 1px; background:white; color: black">';}
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['priority'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['type1'] . "</td>";
        echo "<td style = 'word-break:keep-all;width: 300px; border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['issue'] . "</td>";
        echo "<td style = 'border: 1px; border-style:solid; border-collapse: collapse;'>" . $row['date'] . "</td>";
        echo '</tr>';
        $i = $i + 1;
    }
    echo "</table>";
?>

尝试在另一个文件中创建提交按钮更新另一个文件中的表而不刷新页面

0 个答案: