提交不刷新 AJAX答案

【问题标题】：Submitting without refresh AJAX提交不刷新 AJAX
【发布时间】：2013-11-25 13:12:22
【问题描述】：

好的，我已经看到很多关于提交表单而不刷新的情况，我觉得有几种方法可以通过提交或仅使用按钮（差异/最佳？）来做到这一点，尽管搜索我仍然遇到问题通过无数的帖子。所以：

$(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();
        var privacy = $('input:radio[name=privacy]:checked').val();
        var invites = $('input:radio[name=invites]:checked').val();
        var posts = $('input:radio[name=posts]:checked').val();
        var dataString = 'privacy=' + privacy + '&invites=' + invites + '&posts=' + posts;
        alert(dataString);
        $.ajax({
            type: "POST",
            url: "editOptions.php",
            data: dataString,
            success: function() {
                $('#admin').append("<div id='message'</div>");
                $('#message').html("Changes Saved");
            }
        });
        return false;
    });
});

和：

<form action="" method="post" name="editOptions">

Privacy
<input type="radio" name="privacy" id="privacy" value="public" 
<?php if($privacy == "public") { ?>checked="checked"<?php } ?>> 
Public

<input type="radio" name="privacy" id="privacy" value="private" 
<?php if($privacy == "private") { ?>checked="checked"<?php } ?>> 
Private

Invites
<input type="radio" name="invites" id="invites" value="adminonly" 
<?php if($invite == "adminonly") { ?>checked="checked"<?php } ?>> 
Admin Only

<input type="radio" name="invites" id="invites" value="everyone" 
<?php if($invite == "everyone") { ?>checked="checked"<?php } ?>> 
Everyone

Posts
<input type="radio" name="posts" id="posts" value="adminonly" 
<?php if($post == "adminonly") { ?>checked="checked"<?php } ?>> 
Admin Only

<input type="radio" name="posts" id="posts" value="everyone" 
<?php if($post == "everyone") { ?>checked="checked"<?php } ?>> 
Everyone

<button>Save Changes</button>
</form>

所以只是一个包含 3 组 2 个单选按钮的表单。因此，我认为问题出在许多教程和帖子中

编辑editOptions以防万一

<?php 
include 'config.php';

$privacyX = $_POST['privacy'];
$invitesX = $_POST['invites'];
$postsX = $_POST['posts'];
$groupAd = $_POST['groupName'];

$sql = "UPDATE `options` SET privacy='$privacyX', invite='$invitesX', post='$postsX' WHERE adminGroup = '$groupAd'";

if(!mysql_query($sql, $link))
{
    die('Error: ' . mysql_error()); 
}

mysql_close($link);

?>

【问题讨论】：

标签： ajax forms submit refresh

【解决方案1】：

完整的工作示例：

     <script type="text/javascript">
        $(function() {
            $('.button1').click(function(e) {
                e.preventDefault();
                var privacy = $('input:radio[name=privacy]:checked').val();
                var invites = $('input:radio[name=invites]:checked').val();
                var posts = $('input:radio[name=posts]:checked').val();

                console.log(privacy, invites, posts);
                //return;
                //alert(dataString);
                $.ajax({
                    type: "POST",
                    url: "editOptions.php",
                    data: {privacy: privacy, invites: invites, posts: posts},
                    success: function(result) {
                        $('#admin').append("<div id='message'>Changes Saved</div>");
                        console.log(result);
                        console.log("success");
                    }
                });
            });
        });
     </script>
</head>
<body>
    <div id="admin">
    </div>
    <form action="" method="post" name="editOptions">

        Privacy
        <input type="radio" name="privacy" id="privacy" value="public" > 
        Public

        <input type="radio" name="privacy" id="privacy" value="private" > 
        Private

        Invites
        <input type="radio" name="invites" id="invites" value="adminonly" > 
        Admin Only

        <input type="radio" name="invites" id="invites" value="everyone" > 
        Everyone

        Posts
        <input type="radio" name="posts" id="posts" value="adminonly" > 
        Admin Only

        <input type="radio" name="posts" id="posts" value="everyone" > 
        Everyone

        <button class="button1">Save Changes</button>
    </form>


</body>

【讨论】：

不幸的是仍然无法正常工作。当我 alert(privacy') 或任何其他人它总是 adminonly 所以我把它改回： var privacy = $('input:radio[name=privacy]:checked').val();它呼应了正确的词，但仍然只是给了我一条成功消息，并且即使我检查了并且 editOptions 工作正常，也没有改变任何东西。这些是正确的脚本吗？这是我第一次使用 AJAX btw
如果重要的话，我在页面上还有多个表单，不过它们都使用提交按钮。
如果您有多个表单，上述代码会产生问题，因为所有表单都会调用相同的 Ajax 方法。此外，就我而言，很难判断服务器端代码有什么问题。让我再检查一遍
我使用了一个按钮类。所以你的其他表格不会受到这个代码的影响。
这太奇怪了，我完全有你复制和粘贴的内容，但它仍然没有改变我的数据库值。我已经通过提交表单和editOptions 进行了测试，当我将ajax 放入其中时，它给了我成功消息，但我的数据库表没有任何变化。感谢您的帮助

【解决方案2】：

全部排序。这是 editOptions 的问题，没有传递正确的变量名。 :P 太棒了

【讨论】：