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()查找网址，无需使用对象。 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（）

3 个答案: