javascript - 仅当 Ajax 调用返回成功时才更改单选按钮

Question

在 HTML 表单中，我有一组单选按钮。在 onchange() 事件中，它通过 Ajax 调用推送其值。

然后，Ajax 调用到达服务器并根据调用发送的值进行处理。它返回字符串“success”或“failure”。

如果返回字符串是“success”，那么单选按钮应该保持不变。如果发生“失败”，它应该恢复到最后的位置。

我做了什么？好吧，我需要对复选框做类似的事情，并且在复选框的情况下很容易，我只需取消选中特定的复选框即可。我不知道如何记录单选按钮的最后位置...

有什么帮助吗？

Answer 1

每当您的最后一个 ajax 请求在选中单选按钮后返回成功数据时，请将选中的单选按钮的值保存到变量中。

当您的下一个请求返回失败数据时，只需从变量中获取值并选中相应的单选按钮即可。

使用 AJAX 请求更新代码

$(function(){

    var lastInput = 'r1';

    $('input').change(function(){

        var rdio = $(this);

        $.ajax({
          url: 'script.php',
          type: 'POST',
          dataType: 'json',
          'success' : function(response){
            if(response.status == 'success'){
                lastInput = rdio.val();
            }
            else{
                $('input[name="radio_group"][value="'+ lastInput +'"]').prop('checked', true);                
            }
          },
        });
    });
});

虚拟代码

$(function(){

    var lastInput = 'r1';

    $('input').change(function(){

        var rdio = $(this);

        switch(rdio.val()){
            case 'r1':
                lastInput = rdio.val();
                alert("Success");
                break;

            case 'r2':
                $('input[name="radio_group"][value="'+ lastInput +'"]').prop('checked', true);
                alert("Failure");
                break;

            case 'r3':
                lastInput = rdio.val();
                alert("Success");
                break;              
        }
    });
});

出于测试目的，我在没有 Ajax 请求的情况下完成了此操作，并使用 Switch/Case 语句进行了模拟，其中第二个条件显示了失败时的行为。

http://jsfiddle.net/rYxUs/