0

我的任务是根据这些要求使用我的 HTML/CSS/JavaScript/jQuery 技能来解决代码块：

要求： - 通过 add_user 函数使用 ajax 提交用户输入的数据。
- 您可以假设服务将以 200 状态响应。
- 当添加用户服务响应值为 false 的成功属性时，在表单顶部显示红色错误。使用错误属性作为消息。
- 当响应返回成功属性时，在用户列表中显示新用户
- 当用户输入无效的电子邮件地址时，突出显示电子邮件输入。此外，以红色显示文本“请输入有效的电子邮件地址”。
注意：该服务将不提供此验证功能，并将接受无效的电子邮件。

//example usage.
addUser('john', 'smith', function(response){
    console.log('response is: ' + JSON.stringify(response)); 
});

/*
################################### DO NOT MODIFY BELOW THIS LINE ##########
############################################################################
*/
// Add user service wrapper.
function addUser(username, email, callback) {
    var response;

    if(username === "Error"){
        response = JSON.stringify({
            success: false,
            error: "Error is not acceptable username."
        });
    } else {
        response = JSON.stringify({
            success: true,
            user: {
                username: username,
                email: email
            }
        });   
    }

    $.ajax({
        url: '/echo/json/',
        type: "post",
        data: {
            json: response
        },
        success: callback
    });
};

以下 HTML 适用：

<h2>Add a User:</h2>
<form>
    <input type="text" name="username" placeholder="name">
    <input type="email" name="email" placeholder="email">
    <button>add user</button>
</form>
<h2>Users:</h2>
<ul id="users"></ul>

CSS：

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

好吧，希望你还在我身边。我对面向对象的 JavaScript 以及 jQuery、HTML 和 CSS 有深入的了解。但是，我对 AJAX 的经验很少，对 JSON 语法/应用程序也没有。因此，这个项目的某些方面对我来说似乎很简单，我认为我不需要帮助来弄清楚它们。我已经知道如何正确做的事情包括：

  • 在表单上方以红色显示错误（检索错误信息是另一回事）
  • 在无序列表部分显示新用户
  • 输入无效电子邮件地址时突出显示电子邮件输入（使用客户端验证）

我在理解这个项目时遇到的问题集中在提交和检索表单中输入的数据上。似乎函数 addUser() 首先使用“对象”的“字符串”数据类型版本定义变量响应，其中包含“成功：布尔值，错误：字符串”或“成功：布尔值，用户”的键：值对: {username:string,email:string}' - 这是我遇到第一个麻烦的地方......

如果要依赖包含这些键：值对的对象来确定验证期间是否发生错误，并检索错误消息和与用户名和电子邮件关联的字符串等数据，则保留它们是有意义的作为实际对象，而不是“字符串化”对象。作为字符串，我不知道如何访问该对象的属性值。如果它们是对象，我可以简单地使用点符号来引用它们并检索它们的属性值。（即 sampleObj.success 或 sampleObj.error） 似乎 eval() 和 JSON.parse() 之类的 JavaScript 函数足以将这些字符串返回到适当的对象中，但我不知道如何正确实现这些函数。

我遇到的第二个主要问题与 .ajax() 方法的 jQuery 调用有关。我对 AJAX 的运作方式有一个非常基本的了解，但是这里使用的语法让我感到困惑。我知道数据：{json:response} 正在使用 type:'post' 发送到 url:'/echo/json/'，但我不明白在这发生后如何检索该数据。我也不明白“响应”的价值在那个过程中指的是什么。

最后，我不明白 $.ajax() 语句末尾的回调函数的使用，以及它与单击表单按钮输入的结果的 addUser() 函数的初始调用有何关系。我不明白它的目的，或者它在语法上的使用方式。

我知道这是一个相当复杂的项目，我可能会问很多。但是我花了几天时间试图利用我自己的知识和现有的在线资源来理解这一点，但尽管我很努力，但还没有走得很远。我希望有人可以帮助我理解这个例子。

此项目的实时版本的链接 (jsfiddle.net)

//EDIT// jsfiddle 工作流程的更新链接，具有正确的 jQuery 选择器和用于显示错误消息/用户输入的附加功能：http: //jsfiddle.net/brianjsullivan/5vv5w/

4

3 回答 3

0

问题是您忘记了#代码中的 (id)：

JSFIDDLE

$(document).ready(function(){
    $('#button').click(function(){
        $userInput = $('#username').val();
        $emailInput = $('#email').val();

        addUser($userInput,$emailInput,function(response){
            $('#users').html(JSON.stringify(response));
        });
    });    
});
于 2013-09-25T18:29:08.727 回答
0

将您的代码更改为

$(document).ready(function(){
 $('#button').click(function(){
    $userInput = $('#username').val();
    $emailInput = $('#email').val();

    addUser($userInput,$emailInput,function(response){
        $('#users').html(JSON.stringify(response));
    });
 });
});

这是小提琴。

于 2013-09-25T18:34:08.590 回答
0

JSON/字符串问题是关于 JSON 和 JSON 对象的一些实验/熟悉的问题，但需要大量解释来代替一些测试，因此我将专注于您问题的第 2 部分和第 3 部分。也许其他人比我更能解决第一部分。

一个 AJAX 代码块 (1) 定义一些带有值的变量，(2) 将它们传输到服务器端脚本进行处理，(3) 接收来自服务器的响应。

“旧”结构（我们现在使用 Promises 接口）是设想 AJAX 工作原理的最简单方法：

$.ajax({
    type: "POST",
    url:  "pagename.php",
    data: "varName=" +varValue+ "&nextVarName=" + nextVarValue,
    success: function(returned_data) {
        //Var returned_data is ONLY available inside this fn!
        alert("Server said: " + returned_data);
    }
});

在服务器端（本例使用 PHP）：

<?php

    $one = $_POST['varName'];  //$one contains varValue
    $two = $_POST['nextVarName'];  //$one contains nextVarValue

    //Do something with the received data, for eg a MySQL lookup

    $result = mysql_result(mysql_query(some lookup),0);

    $out = '<h1>Server says:</h1>';
    $out .='<p>For the purpose of this test, the server sends back:</p>';
    $out .= $result;

    echo $out;  //NOTE: uses echo, not return

服务器端发送给浏览器的任何内容都会作为我们命名的变量的内容被接收returned_data。

请注意，我们必须仅在成功函数内处理该变量。如果我们稍后需要访问它，我们可以将内容保存到全局变量中，或者将数据注入隐藏的 DOM 元素，或者......

但是，这些天来，您想使用 promises 接口——它本质上是做同样的事情，但在 SO 帖子中的解释目的不是很清楚。见下文：

资料来源：

Kevin Chisholm 谈 jQuery Promise 接口
jQuery 4 U
Daniel Demmel 谈承诺
José F. Romaniello

于 2013-09-25T19:09:35.113 回答