PHP函数返回值后如何保留网页样式

Question

当我提交表单时，我的信息被传递到一个 PHP 函数中，该函数查询外部数据库并返回一组结果。表单完成后，我运行以下函数：

<script>
function transitions(){
$("#form_holder").fadeToggle();
$("#Analyzing").fadeToggle();
}
</script>

这会隐藏表单并显示另一个表示查询已提交并将很快返回的 div。当它返回时，分析 div 应该隐藏，结果 div 应该出现。但是，当函数确实返回值时，页面似乎会刷新。结果，我留下了所有可见的东西，而不仅仅是结果 div。

我的最佳猜测是，这是由于表单实际已完成，因此 PHP 页面刷新，这将导致问题。

我已经研究过阻止 php 页面在通过 AJAX 提交时刷新的方法，但这种潜在的解决方案对我来说是无效的。

有什么想法吗？

更多代码

<form id="query_form" name="query_form" method="POST" onsubmit="transitions()">
    <input type="text" id="query_input" name="query_input"  required><br>
    <input type="number" min="0" step="1" name="profit_input" id="profit_input" required><br>
    <input id="send_btn" type="submit" name="send_query" value="Submit Request">
</form>

     <script>
     $("#query_form").ajaxForm({url: 'run.php', type: 'post',data: {query: '#query_input'},success: function(output) {
                      alert(output);
                  }});
    </script>

run.php中需要带参数调用的函数称为QueryData($term)

Run.php

<?php
require('RestClient.php');
$term = $_POST['qi'];
$profit = $_POST['pi'];
    try {

    $client = new RestClient('https://api.dataforseo.com/', null, '#########', '###########');

    $post_array[] = array(
    "language" => "en",
    "key" => $test
    );



    $sv_post_result = $client->post('v2/kwrd_sv', array('data' => $post_array));

    $search_volume = $sv_post_result["results"][0]['sv'];

    echo "
    <div id='results_div'>
    <table id='results_table'>
    <tr class='results_table_row'>
        <td id='SEO_Search_Volume_Cell'>
        $search_volume <span>Approximate Number Of Searches Per Month</span>
        </td>
    </tr>
    </table>
";


} catch (RestClientException $e) {
    echo "\n";
    print "HTTP code: {$e->getHttpCode()}\n";
    print "Error code: {$e->getCode()}\n";
    print "Message: {$e->getMessage()}\n";
    print  $e->getTraceAsString();
    echo "\n";
    echo "An Error Has Occured, Please Try Again Later";
    exit();
}

    $client = null;
}




  ?>

Answer 1

把它改成一个按钮：

<button id="send_btn" type="submit" name="send_query">Submit</button>

然后将其用作您的 jQuery/JavaScript 代码：

$(document).on("click", "button[id='send_btn']", function(e){ 
    e.preventDefault(); // Prevents any default actions by clicking submit in a form, e.g. page reloading, etc.
    $("#form_holder").fadeOut(); // Fades out the form.
    var qi = $("#query_input").val(); // Gets the value of an input
    var pi = $("#profit_input").val(); // Gets the value of an input 
    $.post( "https://www.yourwebsite.com/run.php", {qi:qi,pi:pi}) // Posts the values
        .done(function(data) { // if function is successful, it will take the data, add it to the analysis div, and fade it in.
            $("#Analyzing").html(data).fadeIn(); // Be sure the css for this div is set to display:none initially when the page is loaded.
        })
        .fail(function() {
             alert("The connection could not be established. Please try again.");
             $("#form_holder").fadeIn(); // in case connection failure, form is reloaded back in to view.
        });
});

PHP 代码：

<?php

    require('RestClient.php');

    // Get query input. If it is empty, echo an error.

    if (empty($_POST['qi'])) {

         echo "<p>No term was given. Please try again.</p>";

         echo "<button id='gobacktoform'>Try again</button>";

         exit;  

    } else {

        $term = $_POST['qi'];

    }

 // Get profit input. If it is empty, echo an error.

 if (empty($_POST['pi'])) {

     echo "No profit was given. Please try again.";

     echo "<button id='gobacktoform'>Try again</button>";

     exit;  

 } else {

     $profit = $_POST['pi'];

}

// If both $term and $profit are NOT empty, fetch API results.

try {

    $client = new RestClient('https://api.dataforseo.com/', null, '#########', '###########');

    $post_array = array("language" => "en","key" => $term); // This is the term to search, correct?

    $sv_post_result = $client->post('v2/kwrd_sv', array('data' => $post_array));

    $search_volume = $sv_post_result["results"][0]['sv'];

    echo "<div id='results_div'>";
        echo "<table id='results_table'>";
            echo "<tr class='results_table_row'>";
                echo "<td id='SEO_Search_Volume_Cell'>";
                    echo "$search_volume <span>Approximate Number Of Searches Per Month</span>";
                echo "</td>";
            echo "</tr>";
        echo "</table>";
    echo "</div>";

} catch (RestClientException $e) {
    echo "\n";
    print "HTTP code: {$e->getHttpCode()}\n";
    print "Error code: {$e->getCode()}\n";
    print "Message: {$e->getMessage()}\n";
    print  $e->getTraceAsString();
    echo "\n";
    echo "An Error Has Occured, Please Try Again Later";
    exit();
} 

?>