4

请不要评判我的 JS 技能，我完全是初学者。=))

所以我有一个注册用户的功能，但我想制作“create_sample_user”按钮来用一些数据填充文本字段。通过这种方式，人们可以快速查看网站，而无需输入姓名、电子邮件等...

在此处输入图像描述

但问题是：当我自己输入用户名和所有其他字段时，注册按钮工作正常。但是当我用“create_sample_user”按钮填充它们时不起作用（我假设它只是没有“看到”文本字段的值）。

function create_sample_user() {
    var button = $("#create-sample-user");
    button.click(function() {
        var ranNum = 1 + Math.floor(Math.random() * 100);
        var uname = 'Sample_'+ranNum;
        $("#id_username").val(uname);
        $("#id_email").val(uname+'@'+uname+'.com');
        $("#id_password").val(uname);
        $("#id_password2").val(uname);
    });
}

function register_user() {
    $("#register-user").click(function() {
        $.ajax({
            url: "/registration/register_user/",
            type: "POST",
            dataType: "text",
            data: {
                username : $("#id_username").val(),
                email : $("#id_email").val(),
                password : $("#id_password").val(),
                password2 : $("#id_password2").val(),
            },
            success: function(data) {
                parsed_data = $.parseJSON(data);
                if (data) {
                    alert("User was created");
                    window.location = parsed_data.link;
                }
                else {
                    alert("Error");
                }

            }
        });
    });
}

答案：

由于这行代码中的一个字符，整个事情都不起作用：

`var uname = 'Sample_'+ranNum;`

出于某种原因_，字符是问题，而 AJAX 不想接受它。换句话说：

var uname = 'Sample'+ranNum;

这条线可以解决问题:=)

4

3 回答 3

2

好的，create_sample_user()用这个替换你的方法：

$(document).ready(function() {
    var button = $("#create-sample-user");
    button.click(function() {
        var ranNum = 1 + Math.floor(Math.random() * 100);
        var uname = 'Sample_'+ranNum;
        $("#id_username").val(uname);
        $("#id_email").val(uname+'@'+uname+'.com');
        $("#id_password").val(uname);
        $("#id_password2").val(uname);
    });
}​);​

另外，尝试删除function register_user()函数包装器。

这应该这样做。它也应该弹出成功警报框（我将您的 AJAX URL 更改为使用 jsFiddle 的 AJAX 回显）：http: //jsfiddle.net/MQ6Cq/4/

更新（因为您发布了代码 - 我会在发现错误时更新它）：

  • 您现在有两个$(document).ready()电话 - 删除第一个（已编辑）
  • 您必须function register_user() {从注册用户单击处理程序周围删除行和右大括号

我对我之前的小提琴做了一个小小的更新，以防它有助于测试，并将请求类型更改为“GET”。打开浏览器的控制台 (F12)，右键单击并打开 XMLHttpRequests 的日志记录。然后运行它，您会看到 AJAX 正在成功传输数据。我不知道你的其他东西有什么问题，但我没有可以测试它的服务器，而且在你尝试每个建议后我没有得到足够的反馈来知道发生了什么（或者即使你重新尝试它们）。我只是希望这可以帮助您解决问题。

祝你好运！:)

于 2012-09-10T18:26:40.583 回答
1

您的代码应该可以工作。这是一个jsfiddle（它的简化版本）

如果您查看控制台，您会看到数据格式正确。

我在您的代码中看到的唯一内容是未调用 create_sample_user() ，因此未将单击事件应用于按钮。但我猜你只是忽略了把它放在问题中

create_sample_user();
$('#register-user').click(register_user);

function create_sample_user() {
    var button = $("#create-sample-user");
    button.click(function() {
        var ranNum = 1 + Math.floor(Math.random() * 100);
        var uname = $("#id_username").val('Sample_'+ranNum);
        $("#id_email").val(uname.val()+'@'+uname.val()+'.com');
        $("#id_password").val(uname.val());
        $("#id_password2").val(uname.val());
    });
}



function register_user() {
    data = {
                username : $("#id_username").val(),
                email : $("#id_email").val(),
                password : $("#id_password").val(),
                password2 : $("#id_password2").val(),
            }

    console.log(data);
}
于 2012-09-10T18:26:08.840 回答
0 
$("#create-sample-user").click(create_sample_user);

$('#register-user').click(register_user);

function create_sample_user() {

    var ranNum = 1 + Math.floor(Math.random() * 100);
    var uname = $("#id_username").val('Sample_' + ranNum);
    $("#id_email").val(uname.val() + '@' + uname.val() + '.com');
    $("#id_password").val(uname.val());
    $("#id_password2").val(uname.val());

}

function register_user() {
    data = {
        username: $("#id_username").val(),
        email: $("#id_email").val(),
        password: $("#id_password").val(),
        password2: $("#id_password2").val(),
    }

    console.log(data);
}
于 2012-09-10T18:32:40.943 回答