试图通过php和ajax在网页上获取数据

Question

This might go very basic, but I am not able to understand what is the best way to call AJAX on a button click event on page and get the data from the server to be displayed using php. 这可能非常基础，但是我无法理解在页面上的按钮单击事件上调用AJAX并从服务器获取数据以使用php显示的最佳方法是什么。

What I have is a simple webpage called div.php : 我有一个简单的网页，名为div.php ：

<html>
<head>
    <title>
        Test
    </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">
        $(document).ready(function(){
            $('#btn').click(function(){
                $("#data").html('Loading...');

                $.ajax({
                    url:'test.php',
                    type:'GET',
                    success:function(data){
                        $("#data").html(data);
                    }
                });
            });
        });
    </script>
</head>

<body>
    <form method="get">
        <button id="btn">
            Get Data from PHP file
        </button>

        <div id="data">
        </div>
    </form>
</body>
</html>

And then a page behind it doing the database operation, test.php : 然后在它后面执行数据库操作的页面test.php ：

<?php 
    include ("config.php");

    $sql = "SELECT * FROM userInfo;";
    $result = mysql_query($sql);

    $row = mysql_fetch_array($result, MYSQL_ASSOC);
    $count = mysql_num_rows($result);

    if ($count > 0) {
        while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
            echo $row["userLogin"] . "<br>";
        }
    }
?>

It is pretty basic and I am supposed to get the query result on the button click, but it doesn't work. 这是非常基本的，我应该在单击按钮时得到查询结果，但是它不起作用。 Is there something wrong in here? 这里有什么问题吗？

Any help or ideas to understand PHP to AJAX to JS flow will be really appreciated. 对于理解PHP到AJAX到JS流程的任何帮助或想法，将不胜感激。

Answer 1

You need to embed the JS separately, you can't do what you've done but need to split as below. 您需要分别嵌入JS，您无法完成已完成的工作，但需要按如下所示进行拆分。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#btn').click(function(){
           ... etc
        });
    });
</script>

Answer 2

This is difficult to debug based on the limited info available, although I think this may be the issue. 尽管我认为这可能是个问题，但是基于有限的可用信息很难调试。 Your <button> element is inside a <form> element. 您的<button>元素位于<form>元素内。 This means that when you click the button, it is submitting the form and reloading the page. 这意味着，当您单击按钮时，它将提交表单并重新加载页面。 Your AJAX may have worked but the page has reloaded so you won't see the data. 您的AJAX可能有效，但是页面已重新加载，因此您将看不到数据。 Solution: 解：

Either remove your <form> from the page or look into e.preventDefault() for the button click function in jquery. 从页面中删除<form>或在e.preventDefault()查看e.preventDefault()以获取按钮单击功能。

On another note, you should migrate your code to using another library such as PDO for accessing databases as the mysql_* functions should no longer be used. 另外，由于不应该再使用mysql_ *函数，因此您应该将代码迁移到使用其他库（例如PDO）来访问数据库。

试图通过php和ajax在网页上获取数据

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-12-15 23:25:47

解决方案2
1 2016-12-15 23:27:15

试图通过php和ajax在网页上获取数据

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-12-15 23:25:47

解决方案2 1 2016-12-15 23:27:15

解决方案1
2 已采纳 2016-12-15 23:25:47

解决方案2
1 2016-12-15 23:27:15