Question

我有一个简单的HTML文档，其中包含我希望在不离开页面的情况下发布到服务器的表单。我整天都在网上搜索，试图弄清楚如何让它工作，我想出了以下代码：

<body>
    <script> 
    $(document).ready(function() {

        $('#newResource').submit(function (e) {

            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'scripts/script.php?new-resource=1',
                data: $('#newResource').serialize(),
                success: function () {
                    alert('form was submitted');
                }
            });
            return false;

        });

    });
    </script>

    <form id="newResource" class="form-basic" enctype="multipart/form-data" method="post" action="scripts/script.php?new-resource=1">
        <label><b>Resource Name:</b></label>
        <input class="input-text" type="text" placeholder="Enter the resource name..." name="name" id="name" autocomplete="off" required="">
        <br>

        <label><b>Resource URL:</b></label>
        <input class="input-text" type="text" placeholder="Enter the resource URL..." name="url" id="url" autocomplete="off" required="">
        <br>

        <label><b>Resource Department:</b></label>
        <p>Select the department this resource should belong to.</p>
        <select class="input-select" name="department" id="department">
            <option value="5">Human Resources</option>
            <option value="1">Information Technology</option>
            <option value="3">Marketing</option>
            <option value="0">No Department</option>
            <option value="6">Purchasing</option>
            <option value="4">Sales</option>  
        </select>
        <br>

        <label><b>Resource Icon:</b></label>
        <p>Select the icon image to be displayed with this resource.</p>
        <select class="input-select" name="icon" id="icon">
            <option value="bell.png">Alarm Bell</option>
            <option value="chat-bubbles.png">Chat Bubbles</option>
            <option value="chronometer.png">Chronometer</option>
            <option value="database.png">Database Icon</option>
            <option value="envelope.png">Envelope</option>
            <option value="folder.png">File Folder</option>
            <option value="analytics.png">Monitor with Line Graph</option>
            <option value="pie-chart.png">Monitor with Pie Chart</option>
            <option value="networking.png">Networking Heirarchy</option>
            <option value="orientation.png">Orientation Arrow</option>
            <option value="server.png">Server Rack</option>
            <option value="settings.png">Settings Gears</option>
            <option value="speedometer.png">Speedomoeter</option>
            <option value="worldwide.png">World Wide Web Globe</option>
        </select>
        <br>

        <div style="float: right;">
            <button type="button" onclick="loadPrefs('resources');" class="form-button cancel">Cancel</button>
            <button class="form-button submit" type="submit">Submit</button>
        </div>

    </form>
</body>

代码全部在body标签内。

问题是当我单击提交按钮时，我被重定向到PHP动作脚本。我需要的脚本是否需要在head标签中？

如果我从表单中删除操作，则脚本会重定向到同一页面，但不会提交任何数据。

如有必要，这是PHP脚本：

if(isset($_GET['new-resource'])){

    // escape the SQL input for security
    $name = mysqli_real_escape_string($conn, $_POST['name']); 
    $url = mysqli_real_escape_string($conn, $_POST['url']); 
    $department = mysqli_real_escape_string($conn, $_POST['department']); 
    $icon = mysqli_real_escape_string($conn, $_POST['icon']); 

    // Run the SQL query to add the new resource item
    $sql = "INSERT INTO Resources (ID, ResourceName, ResourceURL, IconImg, Department) VALUES (NULL, '$name', '$url', '$icon', '$department');";
    $conn->query($sql);

    // Close the SQL connection
    $conn->close();

}

我似乎无法弄清楚为什么这不起作用。任何想法和反馈都表示赞赏。

Answer 1

您案例中的重要信息是＆＃34; HTML表单元素添加了AJAX＆＃34;。在$(document).ready()，#newResource表单元素尚不存在，因此该事件从未绑定。在您的工作示例中，您使用了事件委派：$(document).on('click', '.submit', function(e) {...}，这是为不存在的元素设置事件侦听器的正确方法。

Answer 2

您的事件处理程序绑定到表单的submit事件。到表单提交时，停止默认的同步HTML表单提交为时已晚。

将处理程序绑定到提交按钮上的to click事件，使用event.preventDefault()并通过Ajax提交表单：

$(document).ready(function() {

        $('.submit').click(function (e) {

            e.preventDefault();

            var form = $('#newResource');
            var action = form.attr('action');
            var data = form.serialize();


            $.ajax({
                type: 'POST',
                url: action,
                data: data,
                success: function () {
                    alert('form was submitted');
                }
            });


        });

    });

请注意，写入的方式是，对于具有提交类的元素的任何点击，它都会触发。由于您的网页上可能有多个表单，而且有多个提交类的按钮，因此表单变量使用硬编码ID选择器并不好。

如果所有网站表单的HTML总是以相同的方式编码，使用嵌套在表单中的div内的提交按钮，您可以替换：

var form = $('#newResource');

使用：

var form = $(this).parent().closest('form');

现在你可以将这个代码包装在一个名为“bindForms（）”的函数中，或者你可以使用一个通用的处理所有表单的方法，前提是HTML结构总是相同的（或者至少是提交按钮始终具有提交类，并始终包装在父容器中，该容器是表单的子容器。

Answer 3

好的，我已设法让以下代码运行：

<script type="text/javascript"> 
$(document).on('click', '.submit', function(e) { 

    debugger;

    e.preventDefault();

    var form = $(this).parent().closest('form');
    var action = form.attr('action');
    var data = form.serialize();


    $.ajax({
        type: 'POST',
        url: action,
        data: data,
        success: function () {
            loadPrefs('resources');
        }
    });
});
</script>

HTML表单元素随AJAX一起添加，但脚本元素也是如此。我将脚本元素移动到页面顶部，以便它是静态的，不再加载表单。

AJAX表单Post PreventDefault不起作用

3 个答案: