使用jQuery load（）將php結果加載到div中時遇到問題

Question

早安，請允許我提前為我的問題困擾這個社區而道歉; 因為在談到任何類型的開發時我都是新手的新手，而且我覺得我很幸運能在達到障礙之前做到這一點。

我一直在為我們公司整理一個簡單的內部應用程序，而我正在處理的問題恰好是這個難題的最后一部分。 我正在嘗試做的是使用jQuery load（）方法在我的主頁上標識的“test”div中顯示“index2.php”的輸出。

我需要在我的主頁上打印出結果，因為我在使用iframe讓頁面無法正常工作時失敗了。 我的目標 - 當用戶在文本框中輸入搜索詞然后點擊提交按鈕; index2.php連接並查詢mysql數據庫，並將查詢結果作為表打印到“test”div中。

當點擊提交按鈕時，我當前的代碼不會將php結果拉入div; 它只是坐在那里沒有任何改變，並且在控制台中沒有錯誤或任何活動。 在瘋狂和瘋狂的搜索中; 我嘗試了其他幾種方法，例如使用'after（）'代替'load（）'，它只在我的頁面上顯示文本“index2.php”而不是表輸出。

我知道'after（）'方法不會給我我正在尋找的結果，但它確實似乎確認我的其余代碼是正確的...我想哈哈。 我再次為你可能會發現的任何明顯的虛假道歉，在這個真正的羊毛業余染色。 話雖如此，非常感謝任何人願意提供的任何幫助或見解！ :)

這是我的代碼：

Index.html內容：

    <!DOCTYPE html> 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <html><head>
        <title>My page</title>

        <!--calls jquery, applys stylesheet-->
      <script type="text/javascript" src="/js/jquery.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
      <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      </head>
    <br>

    <header><h5><center><font size="22">My Page<font size="4">®</font></font></center></h5></header>

        <!--Search box and submit button, querying db and displaying results of index2.php-->

    <center><div>
    <br>
        <form id="index2" action="" method="POST" target="test" />
            <input type="text" name="sb" id="searchBox" placeholder="" value="" maxlength="20" autocomplete="off" onmousedown="" onblur="" />
            <input type="button" id="searchBtn" value="Submit" />
    </form></div>
    </center>
    <br>
            <!--This is where the "index2.php search results should be displayed-->

    <center><div id="test"></div></center>
    <br>
    </body>

    <script type="text/javascript"> 

        //-This is the jQuery load() method to call the "index2.php" results into the "test" div when submit is clicked-//

    $(document).ready(function(){
        $('searchBtn').click(function(){
            $('#test').load('<object data=index2.php>')
//-I've tried using simply .load('index2.php') and .load('/index2.php') here as well-//
            });
        });
    </script>
    </html>

這是index2.php的代碼：

<?php
if (!isset($_GET["sb"])) {
    echo '';
} else {
    $db_host = 'some.host';
    $db_user = 'user';
    $db_pwd = 'password';
    $database = 'database_name';
    $table = 'calls';
    echo mysqli_num_rows($result) . " Results for: " . $_GET["sb"];
    $sb = $_GET["sb"];
    $q = 1;
    $con = mysqli_connect($db_host, $db_user, $db_pwd, $database);
    if (mysqli_connect_errno()) {
        echo "Failed to connect to database" . mysqli_connect_errno();
    }
    if (!mysqli_select_db($con, $database)) {
        die("Can't select database");
    }
    $result = mysqli_query($con, "SELECT `calls` FROM `calls` WHERE calls LIKE '%$sb%' LIMIT 25");
    if (!$result) {
        die("Query to show fields from table failed");
    }
    $fields_num = mysqli_num_fields($result);
    echo "<table border='1'><br><br>";
    while ($row = mysqli_fetch_row($result)) {
        if ($q % 2 != 0) {
            $rowColor = "#dddddd";
        } else {
            $rowColor = "#FFFFFF";
        }
        echo "<tr bgcolor = $rowColor>";
        $q++;
        foreach ($row as $cell) {
            echo "<td>$cell</td>";
        }
        echo "<td><a href='/calls/$cell' id='callpath'>Play Now</a></td>";
        echo "</tr>\n";
    }
    mysql_free_result($result);
}

Answer 1

.load（）將url作為參數，並將返回的HTML放入匹配的元素中。 嘗試這個：

$('#test').load('path/to/your/index2.php?sb=searchterm')

編輯：
您還必須將搜索輸入的值傳遞給index2.php

Answer 2

您的代碼中存在語法錯誤：

表單中的開始標記不需要結束斜杠：如<form />
jQuery需要一個哈希來查找id，缺少哈希： $('searchBtn')
您沒有正確提交表單。 如果我沒有弄錯，你試圖傳遞你輸入的任何內容作為查詢字符串，但你現在沒有傳遞任何東西。
load()查找URL，無需使用對象。 http://api.jquery.com/load/

以這種方式做到：

<form id="index2_form">
    <input type="text" name="sb" id="searchBox" />
    <input type="submit" id="searchBtn" value="Submit"/>
</form>
<div id="test"></div>
<script>
    $('#index2_form').submit(function () {
        var query = $(this).serialize();
        var url = "index2.php?" + query;
        $('#test').load(url);
        return false;
    });
</script>

Answer 3

<script>
    $('#searchBtn').click(function () {
        let searchTerm = $('#searchBox').text();
        $('#test').load("index2.php?sb=" + searchTerm);
    });
</script>

我做了上述修改，顯示了如何將搜索詞放入查詢中。

使用jQuery load（）將php結果加載到div中時遇到問題

問題描述

3 個解決方案

解決方案1
0 2017-05-18 14:31:31

解決方案2
0 已采納 2017-05-18 14:39:50

解決方案3
0 2017-05-18 14:48:15

使用jQuery load（）將php結果加載到div中時遇到問題

問題描述

3 個解決方案

解決方案1 0 2017-05-18 14:31:31

解決方案2 0 已采納 2017-05-18 14:39:50

解決方案3 0 2017-05-18 14:48:15

解決方案1
0 2017-05-18 14:31:31

解決方案2
0 已采納 2017-05-18 14:39:50

解決方案3
0 2017-05-18 14:48:15