让 jquery 和 php 与表单一起工作？答案

【问题标题】：Getting jquery and php work together with forms?让 jquery 和 php 与表单一起工作？
【发布时间】：2011-03-20 23:25:52
【问题描述】：

所以我有一个简单的问题，但我找不到答案。

我有一个表单，其中用户在文本字段中输入内容并单击值为“添加”的提交按钮。右侧会有列表，每次用户点击添加时，右侧列表中都会添加一个元素，并带有淡入动画。

我正在使用 php 来制作它，以便每次用户单击添加时，它都会查询数据库并找到用户正在寻找的内容。如果它不在数据库中，则将其插入到数据库中。

当用户单击“添加”时，我正在使用 javascript/jquery 来淡入动画。

我知道如何单独做这些事情，但是当我单击添加按钮（提交按钮）时，整个页面刷新，php 工作正常，但没有动画。

我尝试在 jquery 上使用 preventDefault()，动画效果很好，但是 php 代码没有注册？我将如何使 php 和 javascript 不会互相切断？这和ajax有关系吗？谢谢

【问题讨论】：

欢迎来到stackoverflow，您能否尝试更好地解释您的问题，也许可以发布一些代码示例？我很难理解您的实际问题。
嘿亚历克斯，我澄清了我的问题多一点。我问了一个一般问题，点击表单上的提交按钮会刷新页面并阻止我的 javascript 动画实现。

标签： php jquery ajax forms form-submit

【解决方案1】：

您需要使用 jquery Ajax 函数。这些是专门制作的，以便您可以在不刷新页面的情况下调用 php 脚本。

Click Here 获取关于 Ajax post 函数的官方文档，以及如何使用它们。

【讨论】：

【解决方案2】：

这是我想出的一个例子。希望对您有所帮助。

index.php的内容

这是您的表单所在的位置以及添加的项目将显示的位置。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Page Title</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript">
        <!--
            jQuery(function($) {
                // Declare DOM elements for quick access
                var itemsList = $('#items-list'),
                    searchInput = $('#search-input');

                // click event handler for the 'Add' button
                $('#add-btn').click(function(e) {
                    // Prevent the form from being sent
                    e.preventDefault();

                    var searchValue = searchInput.val();

                    // Send the AJAX request with the search parameter
                    $.post('search.php', {
                            search: searchValue
                        },
                        function(data, textStatus) {
                            // data is returned as a json object
                            if (data.found) {
                                // Create a new hidden element into the list
                                // and make it fade in
                                $('<p class="item">'+searchValue+'</p>').hide()
                                    .appendTo(itemsList)
                                    .fadeIn();
                            }
                        }, 'json'
                    });
                });
            });
        //-->
        </script>
    </head>
    <body>
        <form action="index.php" method="post" id="search-form">
            <div>
                <input type="text" name="search" id="search-input"> 
                <input type="submit" id="add-btn" value="Add">

                <div id="items-list"></div>
            </div>
        </form>
    </body>
</html>

search.php 的内容

<?php

// AJAX Request?
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    // Prepare the reponse
    $response = array('found' => FALSE);

    // Check that the search parameter was provided
    $search = filter_input(INPUT_POST, 'search', FILTER_SANITIZE_STRING);

    if (!empty($search)) {
        // Note: We'll assume a connection to a MySQL database
        // with the following constant already declared
        $mysqli = new mysqli(DB_HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_NAME);

        // Make sure that the connection was successful
        if (!$mysqli->connect_error) {
            $query = "SELECT id, keyword FROM search_table WHERE keyword = ?";

            // Check if the search keyword already exists
            $stmt = $mysqli->prepare($query);
            $stmt->bind_param('s', $search);
            $stmt->execute();

            // Create a new entry if not found
            if (0 == $stmt->num_rows()) {
                $query = "INSERT INTO search_table(keyword) VALUES(?)";

                $stmt = $mysqli->prepare($query);
                $stmt->bind_param('s', $search);

                $response['found'] = $stmt->execute();
            }
            else {
                $response['found'] = TRUE;
            }
        }
    }

    echo json_encode($response);
}

这未经测试，如果您遇到任何问题，请告诉我。

干杯，

【讨论】：