提交时不刷新AJAX

时间:2013-11-13 04:21:50

标签: ajax forms submit refresh

好的,我已经看到了很多关于提交表单而没有刷新的事情,我觉得有几种方法可以通过提交或只使用按钮(差异/最好?)来做到这一点而且我仍然遇到pproblems尽管搜索通过无数的帖子。所以:

$(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个单选按钮的表单。所以我认为问题是通过许多教程和帖子我有一个组合,当你“提交”或点击“按钮”时该做什么,但也许其他人可以看到我错过的一些容易。

TY

编辑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);

?>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

全部排序。这是editOptions的问题,而不是传递正确的变量名称。 :P TY