您可以尝试使用ajax并捕获成功和错误：

Question

我正在尝试使用jquery更改div的内容。但内容闪烁并重置div。我无法使用return false;，因为后期文本字段值有另一个按钮。我想保留div的变化。这是我的代码：

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>

</head>
<body>

    <div>
        <form id="form" method="POST">
            <input type="text" name="gname" id="gname"/></br>
            <button id="btn">Set</button>
            <button id="nbtn">View</button>
        </form>
    </div>
    <div id="outp">

    </div>
</body>
<script>
    $("#btn").click(function(event) {
        $.post("send.php", {
            named: $("#gname").val()}, function(data) {
            alert(data);
        });
    });

</script>

<script>
    $("#nbtn").click(function(e) {

        $("#outp").html("<?php include './view.php'; ?>");

    });
</script>

Answer 1

这不是jQuery;这是你的表格被张贴。所以你做了更改，但随后发布了表单，并从服务器刷新页面。

button元素的默认类型为"submit"。要使这些按钮中的一个或两个只是一个按钮，请使用type="button"。

或者，如果您希望在禁用JavaScript时允许使用该表单（例如，允许其正常发布），请将按钮保留为提交按钮，但阻止使用JavaScript提交表单。 E.g：

$("#form").submit(false); // Prevents the form being submitted in the normal way.

Answer 2

表单中的所有按钮都被视为submit按钮。

因此，您需要在event.preventDefault()代码中添加.click。

另外，为什么你的脚本在body部分之外？

Answer 3

您可以尝试使用ajax并捕获成功和错误：

$("#btn").click(function() {
    var named: $("#gname").val();
    $.ajax({
        url: 'send.php',
        type: 'POST',
        data: {param1: 'value1'},
    })
    .done(function(data) {
        console.log("Post success"+data);
    })
    .fail(function() {
        console.log("Post error"+data);
    });     
});

jquery正在重置我的div内容

3 个答案:

您可以尝试使用ajax并捕获成功和错误：